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 :/