Discussion :

[MeTaLCaM]

Bonjour à tous !

Voilà je fais actuellement une barre de menu "facebook like".
Voilà le code (c'est un peu foutoir mais je vois pas quoi faire de mieux) :

Code :

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

1
2
3
4
5
6
7
8
9
10
<style type="text/css">              
body{margin:0px;padding:0px;width: 100%;}
#main{width:1000px;margin:auto;}
#top{width:1000px;height:25px;background-color:#005AA5;}
#topmenu .menulist {margin:0px auto;padding:0;list-style-type:none;text-align:center;}
#topmenu .menulist li {float:left;margin:auto;margin-left:4px;margin-right:4px;padding:0;background-color:#005AA5;font:bold 12px verdana,sans-serif;}
#topmenu .menulist li a {display:block;color:white;width:auto;text-decoration:none;padding:5px;}
#topmenu #topmenu_right li {float:right;}
#topmenu .menulist li a:hover {background-color:#478EAC;}
</style>

Ca c'était le CSS et voilà mon code :

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
        <div id="main">
        <div id="top">
        <div id="topmenu">
        <div id="topmenu_left">
            <ul class="menulist">
                <li><a href="frmHome.aspx">Home</a></li>
                <li><a href="frmProfile.aspx?id=<%Response.Write(Session["RecId"]);%>">Profile</a></li>
                <li><a href="frmInbox.aspx">Inbox</a></li>
                <li><a href="frmFriends.aspx">Friends</a></li>
                <li><a href="frmPhotos.aspx">Photos</a></li>
                <li><a href="frmVideo.aspx">Video</a></li>
                <li><a href="frmMedPharma.aspx">Medico Pharma</a></li>
                <li><a href="frmGroups.aspx">Groups</a></li>
                <li><a href="frmChat.aspx">Chat</a></li>
            </ul>
        </div>
        <div id="topmenu_right">
            <ul class="menulist">
                <li>
                <form action="#">
                <input type="text" />
                <input type="submit" value="OK" />
                </form>
                </li>
                <li><a href="frmLogout.aspx">Logout</a></li>
            </ul>
        </div>
        </div>
        </div><br />
        <div id="content">  
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
 
            </asp:ContentPlaceHolder>
        </div>
        </div>

Sous firefox ça donne ça :


Et sous IE :


Comment faire pour que ça fasse pareil que sous FF sous IE ?

[He@deR]

Salut,
c'est la balise form qui crée cette espace dans ie
il faut juste ajouter ceci dans ton css

Code :

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

1
2
 
form{margin:0px;padding:0px;}

[MeTaLCaM]

Je suis désolé mais ça ne change rien... :/

[He@deR]

Peux tu mettre ça dans ton 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

<style type="text/css">  
form{margin:0px;padding:0px;}        
body{margin:0px;padding:0px;width: 100%;}
#main{width:1000px;margin:auto;}
#top{width:1000px;height:25px;background-color:#005AA5;}
#topmenu .menulist {margin:0px auto;padding:0;list-style-type:none;text-align:center;}
#topmenu .menulist li {float:left;margin:0px;margin-left:4px;margin-right:4px;padding:0;background-color:#005AA5;font:bold 12px verdana,sans-serif;}
#topmenu .menulist li a {display:block;color:white;width:auto;text-decoration:none;padding:5px;}
#topmenu #topmenu_right li {float:right;}
#topmenu .menulist li a:hover {background-color:#478EAC;}
  
</style>

[HiRoN]

Bonjour,

Peux tu mettre ça dans ton html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">  
form{margin:0px;padding:0px;}        
body{margin:0px;padding:0px;width: 100%;}
#main{width:1000px;margin:auto;}
#top{width:1000px;height:25px;background-color:#005AA5;}
#topmenu .menulist {margin:0px auto;padding:0;list-style-type:none;text-align:center;}
#topmenu .menulist li {float:left;margin:0px;margin-left:4px;margin-right:4px;padding:0;background-color:#005AA5;font:bold 12px verdana,sans-serif;}
#topmenu .menulist li a {display:block;color:white;width:auto;text-decoration:none;padding:5px;}
#topmenu #topmenu_right li {float:right;}
#topmenu .menulist li a:hover {background-color:#478EAC;}
</style>

Pour ma part, mettre cela n'a rien changé, de plus, inutile de mettre une unité (ici px) quand la valeur est 0.

Pour ma part, en reprenant ton code (testé sous FF3 & IE7) :

Code CSS :

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

1
2
3
4
5
6
7
8
9
body{margin:0;padding:0;width:100%;}
#main{width:1000px;margin:auto;}
#top{width:1000px;height:25px;background-color:#005AA5;}
#topmenu .menulist {margin:0px auto;padding:0;list-style-type:none;text-align:center;}
#topmenu .menulist li {float:left;margin:auto;margin-left:4px;margin-right:4px;padding:0;background-color:#005AA5;font:bold 12px verdana,sans-serif;}
#topmenu .menulist li a {display:block;color:white;width:auto;text-decoration:none;padding:5px;}
#topmenu #topmenu_right li {float:right;}
#topmenu .menulist li a:hover {background-color:#478EAC;}
#logBtn { float:right;height:20px; }

(le css pourrait être amélioré)

Code HTML :

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
<div id="main">
	<div id="top">
		<div id="topmenu">
			<div id="topmenu_left">
				<ul class="menulist">
					<li><a href="frmHome.aspx">Home</a></li>
					<li><a href="frmProfile.aspx?id=<%Response.Write(Session["RecId"]);%>">Profile</a></li>
					<li><a href="frmInbox.aspx">Inbox</a></li>
					<li><a href="frmFriends.aspx">Friends</a></li>
					<li><a href="frmPhotos.aspx">Photos</a></li>
					<li><a href="frmVideo.aspx">Video</a></li>
					<li><a href="frmMedPharma.aspx">Medico Pharma</a></li>
					<li><a href="frmGroups.aspx">Groups</a></li>
					<li><a href="frmChat.aspx">Chat</a></li>
				</ul>
			</div>
			<div id="topmenu_right">
				<div id="logBtn">
					<form action="#">
						<input type="text" />
						<input type="submit" value="OK" />
					</form>
				</div>
 
				<ul class="menulist">
					<li><a href="frmLogout.aspx">Logout</a></li>
				</ul>
			</div>
		</div>
	</div><br />
	<div id="content">  
		<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
 
		</asp:ContentPlaceHolder>
	</div>
</div>

[MeTaLCaM]

J'ai modifié mon code, et ça n'a strictement rien changé... Alors j'ai copié coller ce que t'as mis et j'ai créé un fichier html simple que j'ai hébergé. Là j'ai vu du changement (donc le pb est peut être un délire du serveur visual studio), mais c'est toujours pas ça :

http://metalcam.free.fr/test.htm
La barre est trop haute et elle n'est plus centrée comme sur firefox... Je sais pas si ça fait pareil chez vous :/

[HiRoN]

Sauf erreur de ma part,

Le problème vient du fait que tu n'as pas mis de DocType, ce qui fais basculer IE en mode Quirk et qui du coup interprète les boîtes selon le modèle Microsoft...

Au niveau du code, comme tu as dû le voir, j'ai mis ton form dans div (#logBtn) et non dans un li (qui d'ailleurs t'aurai bloqué au niveau validation w3c me semble-t-il).

[MeTaLCaM]

Niquel !!! Merci beaucoup.... (j'suis trop bête d'avoir oublié le doctype...)

[MeTaLCaM]

En fait un autre problème apparait...

Je bosse sur Asp.Net, et le code en fait généré par le serveur donne un truc comme ça :

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
<body id="ctl00_MyBody"> 
<form name="aspnetForm" method="post" action="frmHome.aspx" id="aspnetForm">

<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkgVtcPwKfgutcrcuN0AgFDuAqiZ0=" 

/>
</div>

<div id="main">
	<div id="top">
		<div id="topmenu">
			<div id="topmenu_left">
				<ul class="menulist">
					<li><a href="frmHome.aspx">Home</a></li>
					<li><a href="frmProfile.aspx">Profile</a></li>
					<li><a href="frmInbox.aspx">Inbox</a></li>
					<li><a href="frmFriends.aspx">Friends</a></li>
					<li><a href="frmPhotos.aspx">Photos</a></li>
					<li><a href="frmVideo.aspx">Video</a></li>
					<li><a href="frmMedPharma.aspx">Medico Pharma</a></li>
					<li><a href="frmGroups.aspx">Groups</a></li>
					<li><a href="frmChat.aspx">Chat</a></li>
				</ul>
			</div>
			<div id="topmenu_right">
				<div id="logBtn">
					<form action="#">
						<input type="text" />
						<input type="submit" value="OK" />
					</form>
				</div>
 
				<ul class="menulist">
					<li><a href="frmLogout.aspx">Logout</a></li>
				</ul>
			</div>
		</div>
	</div><br />
	<div id="content">  
		

	</div>
</div>
    </form>
</body>

Voilà en fait ça marche quand j'enlève ce que j'ai mis en gras ci dessus dans le code, sauf que j'en ai absolument besoin ça fait parti d'un mécanisme interne dans Asp.Net !

Donc peut être un css à appliquer au form aspnetForm, mais là je sèche :/ des suggestions ?

[desert]

Bonjour,
Quel genre de problème apparaît ? Un décalage ? Sous IE ? Sous FF ? Les deux ?

[MeTaLCaM]

Ben... ça fait comme les screenshot que j'ai pris en haut... Dès que met le contenu dans une balise form, ça fait ça (voir le rendu sur IE au début du post). Je voudrais que ça fasse comme sur FF

[12monkeys]

Bonjour

Peut tu remettre ton code entier alors parce que je viens de tester le code de HiRoN et il fonctionne très bien sur Firefox 3 et IE 7, c'est à dire que le rendu est absolument identique...

[MeTaLCaM]

Code html :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head id="ctl00_Head1"><title>
 
</title>
 
<style type="text/css">              
    body{margin:0;padding:0;width:100%;}
    #main{width:1000px;margin:auto;}
    #top{width:1000px;height:25px;background-color:#005AA5;}
    #topmenu .menulist {margin:0px auto;padding:0;list-style-type:none;text-align:center;}
    #topmenu .menulist li {float:left;margin:auto;margin-left:4px;margin-right:4px;padding:0;background-
 
color:#005AA5;font:bold 12px verdana,sans-serif;}
    #topmenu .menulist li a {display:block;color:white;width:auto;text-decoration:none;padding:5px;}
    #topmenu #topmenu_right li {float:right;}
    #topmenu .menulist li a:hover {background-color:#478EAC;}
    #logBtn { float:right;height:20px; }
 
</style>
</head>
<body id="ctl00_MyBody">
    <form name="aspnetForm" method="post" action="frmHome.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkgVtcPwKfgutcrcuN0AgFDuAqiZ0=" 
 
/>
</div>
 
<div id="main">
	<div id="top">
		<div id="topmenu">
			<div id="topmenu_left">
				<ul class="menulist">
					<li><a href="frmHome.aspx">Home</a></li>
					<li><a href="frmProfile.aspx">Profile</a></li>
					<li><a href="frmInbox.aspx">Inbox</a></li>
 
					<li><a href="frmFriends.aspx">Friends</a></li>
					<li><a href="frmPhotos.aspx">Photos</a></li>
					<li><a href="frmVideo.aspx">Video</a></li>
					<li><a href="frmMedPharma.aspx">Medico Pharma</a></li>
					<li><a href="frmGroups.aspx">Groups</a></li>
					<li><a href="frmChat.aspx">Chat</a></li>
 
				</ul>
			</div>
			<div id="topmenu_right">
				<div id="logBtn">
					<form action="#">
						<input type="text" />
						<input type="submit" value="OK" />
					</form>
				</div>
 
 
				<ul class="menulist">
					<li><a href="frmLogout.aspx">Logout</a></li>
				</ul>
			</div>
		</div>
	</div><br />
	<div id="content">  
 
 
	</div>
</div>
 
    </form>
</body>
</html>

Voilà si tu copie ce code dans un bloc note, en .htm, tu verras que le rendu est différent sur IE...

Si on enlève ce que j'ai mis en gras sur le code ci dessus, tu verras que ça marche bien, sauf que j'en ai absolument besoin...

[12monkeys]

Comme dit : aucune différence.

N'as tu pas une ligne vide au début de ton document, avant le doctype ? Si oui enlève la.

Au fait : sous quel navigateur ? IE 6 ou 7

J'ai testé avec IE 7 (IE 6 pas sous la main..)

[desert]

Il faut mettre les marges du form à 0 pour régler le problème sous IE6.

[MeTaLCaM]

Bah en fait... j'ai testé avec IE8... Donc peut être que ça marche bien avec IE7 ou 6 je sais pas...

En tout cas, j'ai mis ça en plus dans mon code :

Code :

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

#aspnetForm {margin:0px;}

Dans mes styles CSS et ça change rien (avec IE8)

[HiRoN]

Bonjour,

Il faut mettre les marges du form à 0 pour régler le problème sous IE6.

J'aurai pourtant opté aussi pour cela...

Code CSS :

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

form { margin:0; padding:0; }

[MeTaLCaM]

Bah... ça marche effectivement avec IE6 et 7, mais pas sur le 8... Des idées oO ?

[HiRoN]

Bah... ça marche effectivement avec IE6 et 7, mais pas sur le 8... Des idées oO ?

Le mieu serait alors d'ajouter un "border:1px solid black;" (par exemple) à chaque balise et voir laquelle te génère une marge

[Macmillenium]

Bonjour,

Tu t'en sers très mal de l'héritage, trop de complications pour rien ...

• #topmenu_left et #topmenu_right doivent être flottés à gauche et à droite or tu le fais directement sur les enfants <li>,
• #topmenu_left n'a pas de trace dans ton code,
• Plusieurs éléments sont sélectionnés à partir de #topmenu, d'où les difficultés que tu as pour appliquer un style différent sur l'élément descendant #topmenu_right et ses enfants.
• Des margin:0 auto; et width:auto (qui sert à remettre width à son étant initial) qui trainent inutilement,

Bref, j'ai repris ton code rapidement :

Code xhtml :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head id="ctl00_Head1"><title>
 
</title>
 
<style type="text/css">              
    body{margin:0;padding:0;width:100%;}
    #main{width:1000px;margin:auto; overflow:hidden;}
    #top{height:25px; background-color:#005AA5; }
        
        form { margin:0; padding:0; }
        
        #topmenu { overflow:hidden; }  
        
    #topmenu .menulist {margin:0;padding:0;list-style-type:none;text-align:center;}
    #topmenu .menulist li {float:left;margin-left:4px;margin-right:4px;padding:0; background-color:#005AA5; font:bold 12px verdana,sans-serif;}
    #topmenu .menulist li a {display:block;color:white;text-decoration:none;padding:5px;}       
        
    #topmenu_left .menulist { float:left; }
        
        #topmenu_right { float:right; }  
        #topmenu_right .menulist { float:left; }
        #topmenu_right .menulist li a:hover {background-color:#478EAC;} 
        
    #logBtn { float:right;height:20px; }
 
 
</style>
</head>
<body id="ctl00_MyBody">
 <div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkgVtcPwKfgutcrcuN0AgFDuAqiZ0=" />
</div>
 
<div id="main">
	<div id="top">
		<div id="topmenu">
			<div id="topmenu_left">
				<ul class="menulist">
					<li><a href="frmHome.aspx">Home</a></li>
					<li><a href="frmProfile.aspx">Profile</a></li>
					<li><a href="frmInbox.aspx">Inbox</a></li>
 
					<li><a href="frmFriends.aspx">Friends</a></li>
					<li><a href="frmPhotos.aspx">Photos</a></li>
					<li><a href="frmVideo.aspx">Video</a></li>
					<li><a href="frmMedPharma.aspx">Medico Pharma</a></li>
					<li><a href="frmGroups.aspx">Groups</a></li>
					<li><a href="frmChat.aspx">Chat</a></li>
 
				</ul>
			</div>
			<div id="topmenu_right">
 
				<ul class="menulist">
					<li><a href="frmLogout.aspx">Logout</a></li>
				</ul>
 
				<div id="logBtn">
					<form method="post" action="">
						<div>
							<input type="text" />
							<input type="submit" value="OK" />
						</div>
					</form>
				</div>
 
			</div>
		</div>
	</div> 
	<div id="content">  
 
 
	</div>
</div>
 
</body>
</html>

Le problème vient du fait que tu as deux forms imbriqués ce qui est incorrecte syntaxiquement => le form enfant est donc exclu du DOM généré.
Si tu rajoute le form asp.net, tu va remarquer une augmentation de la hauteur du conteneur #main sous IE8 dont je ne comprends pas l'origine (Le moteur de rendu IE8 étant encore jeune).

[EDIT] Attention quand même asp.net te génère n'importe quoi
Je n'avais pas trop le temps de vérifier tous les points, voici donc une version amélioré du code :

Code xhtml :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head id="ctl00_Head1">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title> Document Sans nom </title>
	<style type="text/css">              
                body{ margin:0; padding:0; }
                        
                #main{ width:1000px; margin:auto; }
                #top{ height:25px; background-color:#005AA5; }
                        
                form { margin:0; padding:0; }
                        
                #topmenu { overflow:hidden; }  
                
                #topmenu .menulist {margin:0; padding:0; list-style-type:none; text-align:center;}
                #topmenu .menulist li {float:left;margin-left:4px; margin-right:4px; font:bold 12px verdana,sans-serif; }
                #topmenu .menulist li a { display:block; color:#fff; text-decoration:none; padding:5px;}        
                        
                #topmenu_left { float:left; } 
                #topmenu_right { width:265px; float:right; } 
 
                #topmenu_right .menulist { float:left; }
                #topmenu_right .menulist li a:hover { background-color:#478EAC;}        
                        
                #logBtn { float:right; }
        </style>
</head>
 
<body id="ctl00_MyBody">
 
<div>
	<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkgVtcPwKfgutcrcuN0AgFDuAqiZ0=" />
</div>
 
<div id="main">
	<div id="top">
		<div id="topmenu">
			<div id="topmenu_left">
				<ul class="menulist">
					<li><a href="frmHome.aspx">Home</a></li>
					<li><a href="frmProfile.aspx">Profile</a></li>
					<li><a href="frmInbox.aspx">Inbox</a></li>
 
					<li><a href="frmFriends.aspx">Friends</a></li>
					<li><a href="frmPhotos.aspx">Photos</a></li>
					<li><a href="frmVideo.aspx">Video</a></li>
					<li><a href="frmMedPharma.aspx">Medico Pharma</a></li>
					<li><a href="frmGroups.aspx">Groups</a></li>
					<li><a href="frmChat.aspx">Chat</a></li>
 
				</ul>
			</div>
			<div id="topmenu_right">
 
				<ul class="menulist">
					<li><a href="frmLogout.aspx">Logout</a></li>
				</ul>
 
				<div id="logBtn">
					<form method="post" action="">
						<div>
							<input type="text" />
							<input type="submit" value="OK" />
						</div>
					</form>
				</div>
 
			</div>
		</div>
	</div> 
	<div id="content">  
 
 
	</div>
</div>
</body>
</html>