Problème de navigation réalisé avec CSS
Bonjour tout le Monde,
Voila mon problème : j'ai un fichier HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="CSS.css" type="text/css">
</head>
<body>
<table width="100%" border="0">
<tr><td height="200" background="BanniereHaut.jpg"></td></tr>
</table>
<div id="navcontainer">
<ul>
<li id="active"><a href="#" id="current">Accueil</a></li>
<li><a href="#">Techniques</a></li>
<li><a href="#">Graphiques</a></li>
<li><a href="#">Inscription</a></li>
<li><a href="#">Société</a></li>
</ul>
<form action="" id="search">
<div align="right">
<input name="searchFor" type="text" size="30">
<a href="" id="search1">Recherche</a>
</div>
</form>
</div>
</body>
</html>
et
le CSS suivant :
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 70%;
font-family: arial, helvetica, sans-serif;
font-weight:bold;
height:1.55em;
}
#navcontainer ul li { display:inline; }
#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}
#search
{
float:right;
width: 30%;
color: White;
background-color: #036;
height:1.55em;
}
#search1
{
padding: 0.2em 1em;
color: White;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
font-weight:bold;
}
#search a:hover
{
background-color: #369;
color: #fff;
}
Si par exemple dans IE on diminue la fenêtre du navigateur, la barre de navigation (qui est une liste non ordonnée) est toute tordue - les élements se mettent sur la verticale... Je ne sais pas comment faire pour que ça ne bouge pas!
Merci pour votre réponse :)
