Discussion :

[supertino7]

Bonjour,

Voila j'ai mon code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<div id="globalmember">
	<h3 id="memberlogin">
		Login
	</h3>
 
	<div id="memberprofile">
		<h5>Profil</h5>
		<p>Sexe</p>
		<p>Inscrit depuis le</p>
 
		<p>Localite : </p>
		<p>Informations complémentaires : <br /> Pas de description...</p>
	</div>
 
	<div id="memberoptions">
		<h5>Options</h5>
		<p>Contacter</p>
		<p>S'abonner</p>
	</div>
 
	<div id="membervideolist">
		<h5>Liste</h5>
		<p>Blablablabl...</p>
		<p>Balablabla2 balbla.</p>
	</div>
 
</div>

Avec le css qui va bieng

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
#globalmember div {
border:1px solid gray;
margin-bottom: 10px;
}
#globalmember p {
border:1px solid silver;
margin-top:1px;
margin-bottom:1px
}
#globalmember h5 {
background: silver;
height: 20px;
margin-top: 0;
margin-bottom: 5px;
}
h3#memberlogin {
text-align:center;
width:50%;
margin:auto;
margin-bottom:20px;
}
div#memberprofile {
width: 50%;
float: left;
}
div#memberoptions {
width:35%;
margin-left:480px;
}
div#membervideolist {
clear:both;
}

Ce qui me donne le résultat suivant :



Mon bloc #memberprofile est bien extensible et ne depasse pas sur #membervideolist grace au Clear.

Le probleme, et je suis dessus depuis 2H, c'est que je n'arrive pas à faire en sorte que le bloc Liste se rapproche du bloc Profil, je comprends pas pourquoi il y a cette marge entre les deux... enfin j'imagine que c'est à cause de l'espace qu'occuperai en réalité Options, s'il n'y avait pas le Float.

J'aurais donc besoin de votre aide pour savoir comment puis-je procéder pour rapprocher ces deux blocs ?

Merci d'avance.

[devyan]

Salut,

Si tu ne positionne pas "margin-bottom" dans h5 le problème devrait disparaître

[supertino7]

J'essaie ça de suite

edit: nope malheureusement.
Ca modifie juste la marge sous le titre des blocs, à l'intérieur.

D'ailleurs, sous IE c'est encore pire

[Erwan31]

Bizarre.... Pourrais tu donner stp la totalité des codes XHTML/CSS?

Attention de bien préciser une marge aussi en % pour que le placement horizontal du bloc de droite s'adapte selon la taille du viewport (zone d'affichage):

div#memberoptions {
width:35%;
margin-left:55%;
}

[supertino7]

Bizarre.... Pourrais tu donner stp la totalité des codes XHTML/CSS?

Attention de bien préciser une marge aussi en % pour que le placement horizontal du bloc de droite s'adapte selon la taille du viewport (zone d'affichage):

Tu m'as mis sur la piste.
Effectivement la page est incluse dans un template, et il y a 3 autres fichiers css. j'ai testé la page et le css "seuls" et là, plus de probleme.

Je pense qu'il y a une autre feuille de style qui doit foutre la merde, mais je sais pas trop si je dois les coller, vu la taille de ces derniers.

Je vais déja les desactiver une par une voire laquelle entre en conflit.

[Erwan31]

Pour détecter facilement la source de ce type de problème, et si tu ne
souhaites pas coller le code ici, je te conseil vivement d'installer Firebug (une
extension de Firefox pour le developpement front-end)

[supertino7]

Bon eh bien, apparemment, c'est ma feuille de style principale qui merde.

Désolé elle un peu longue, désordonnée, et pas encore optimisé, il doit y avoir pas mal d'erreurs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
/* ================================= BODY */
body {
	width: 85%;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: #e0eec3;
	background-image: url("../images/background.png");
	background-repeat: repeat-x;
	font-family: Tahoma, Verdana, Arial, "Sans-Serif";
	color: black;
}
 
a { /* Formatage des liens generaux */
	color: black;
	font: 1em Tahoma,Arial,sans-serif;
	text-decoration: none;
}
a:hover, a:focus, a:active { 
	color: #960006;
}
 
/* ================================= STYLES MENU HAUT */
#menu_top {
	margin-bottom: 20px;
}
#banniere {
	border: 1px solid black;
	border-bottom: none;
	width: 100%;
	height: 60px;
	margin: auto;
	background-image: url("../images/banniere.png");
	background-repeat: repeat-x;
}
 
#menu_notlogged {
	font-size: 0.8em;
	border: 1px solid black;
	width: 100%;
	margin: auto;
	text-align: center;
	background-color: #bcda7b;
}
 
#menu_notlogged ul { /* PROPRIETES DE LA LISTE POUR MENU, MENU TOP */
	height: 20px; 
	margin-top: 7px;
	margin-bottom: 3px;
}
 
#menu_notlogged li { /* PROPRIETES DES ELEMENTS DU MENU, MENU TOP */
	display: inline;
	margin-right: 20px;
}
 
#menu_notlogged li a { /* PROPRIETES DES LIENS DANS LES ELEMENTS DU MENU, MENU TOP */
	padding: 4px 20px;
	color: black;
	border: 1px solid black;
	font: 1em Tahoma,Arial,sans-serif;
	text-align: center;
	text-decoration: none;
}
 
#menu_notlogged li a:hover, #menu_notlogged li a:focus, #menu_notlogged li a:active { /* PROPRIETES DES LIENS DANS LES ELEMENTS DU MENU AU PASSAGE DE LA SOURIS, MENU TOP */
	background: #a8cf52;
	color: #960006;
}
 
/* ================================= STYLES MENUS GAUCHE */
#menu_left { 
	float: left;
	width: 18%;
}
 
.bloc_menu_left { /* PROPRIETES DES MINI BLOCS MENU GAUCHE */
	background-color: #bcda7a;
	border: 1px solid black;
	margin-bottom: 20px;
	padding: 5px;
	font: 0.7em Tahoma,Arial,sans-serif;
}
 
.bloc_menu_left input { /* PROPRIETES DU CHAMPS LOGIN DU BLOC MENU GAUCHE */
	background-color:#e8f2d3;
	border:1px solid #56701f;
	font-family: Tahoma,"sans-serif";
	font-size: 1.2em;
}
 
.bloc_menu_left input[type=text],.bloc_menu_left input[type=password] { /* PROPRIETES DES INPUTS TEXTE MENU GAUCHE */
	width: 100px;
}
.bloc_menu_left input[type=submit] { /* PROPRIETES DES INPUTS TEXTE MENU GAUCHE */
	font-size: 1em;
}
 
.bloc_menu_left p { /* PROPRIETES DU BLOC PARAGRAPHE MENU GAUCHE */
	font-family: Tahoma,"sans-serif";
	font-size: 1em;
	margin-top: 0px;
	margin-bottom: 5px;
}
 
span.bloc_menu_left_bigger { /* PROPRIETE DU PSEUDO DANS LE BLOC GAUCHE */
	font-weight: bold;
	font-size: 1.2em;
}
 
/* ================================= STYLES CONTENU */
#content  {
	margin-left: 20%;
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid black;
	background: #e8f2d3;
	/*height: 100%;*/
}
 
/* ================================= STYLE PIED DE PAGE */
#footer{ /* PROPRIETES DU PIED DE PAGE */
	background-color: #bcda7a;
	border: 1px solid black;
	text-align: center;
	margin-top: 20px;
	clear: both;
}
#footer p {
	height: 20px;
	margin: auto;
	font-size: 0.6em;
	padding-top: 5px;
}

et voici l'html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Le site de fou</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="website" href="css/design.css" />
       <link rel="stylesheet" media="screen" type="text/css" title="website" href="css/member.css" />       
       <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
   </head>
 
<body>
<!--  Menu haut -->
	<div id="menu_top">
		<div id="banniere"></div>
<div id="menu_notlogged">
	<ul>
			<li><a href="index.html" title="Accueil">Accueil</a></li>
			<li><a href="intro" title="Aide">Aide</a></li>
			<li><a href="forum" title="Forum">Forum</a></li>
 
			<li><a href="postvideo" title="Poster une vidéo">Poster une vidéo</a></li>
			<li><a href="-out" title="Deconnexion">Quitter</a></li>
	</ul>
</div>
	</div>
 
<!-- Menu gauche -->
	<div id="menu_left">
			<div class="bloc_menu_left">
 
		<p>Bonjour <span class="bloc_menu_left_bigger">supertino7</span></p>
		<p><a href="postvideo"><strong>Poster une vidéo</strong></a></p>
		<p><a href="myvideos" title="Mes videos">Mes videos</a></p>
		<p><a href="myaccount">Mon compte</a></p>
	</div>
 
<div class="bloc_menu_left">
 
	<p>Rechercher</p>
		<form method="post" action="search.php">
		<p><input type="text" name="search">&nbsp;<input type="submit" value="ok"></p>
		</form>
</div>
 
<div class="bloc_menu_left">
	<p>Statistiques</p>
</div>
	</div>
 
<!-- Contenu -->
	<div id="content">
 
			<div id="globalmember">
	<h3 id="memberlogin">
 
		Login
	</h3>
 
	<div id="memberprofile">
		<h5>Profil</h5>
		<p>Sexe</p>
		<p>Inscrit depuis le</p>
 
		<p>Localite : </p>
 
		<p>Informations complémentaires : <br /> Pas de description...</p>
	</div>
 
	<div id="memberoptions">
		<h5>Options</h5>
		<p>Contacter</p>
		<p>S'abonner</p>
 
	</div>
 
	<div id="membervideolist">
		<h5>Liste</h5>
		<p>Blablablabl...</p>
		<p>Balablabla2 balbla.</p>
	</div>
 
</div>	</div>
 
<!-- Pied de page -->
	<div id="footer">
<p>Copyright</p>
</div></body>
</html>

merci