BOnjour .. je me suis inspirer du gabarie dans la section css
Voici le probleme: Tout est "OKAY" dans firefox, explorer mais dans netscape 6 il je ne suis pas capable de coller la liste a l'image du haut dans la section de gauche... je ne sais si j'ai utiliser la bonne méthode
1. J 'ai mis dans colone de #gauche en "float:left" (le menu )
2. J'ai mis une images dans cette colone et j'ai mis "display: block" pour quelle s'affiche une par dessus l'autre.
?? Faut-il indiquer la l'argeur de chaque élément du coté gauche !? ou juste l'indiquer un max-width: 132px; suffit au #gauche
Mais en netscape la liste #osl-menu ne veux pas se coller avec l'image..
Merci d'y jetter un coup d'oeil
voici le code
Voici le probleme: Tout est "OKAY" dans firefox, explorer mais dans netscape 6 il je ne suis pas capable de coller la liste a l'image du haut dans la section de gauche... je ne sais si j'ai utiliser la bonne méthode
1. J 'ai mis dans colone de #gauche en "float:left" (le menu )
2. J'ai mis une images dans cette colone et j'ai mis "display: block" pour quelle s'affiche une par dessus l'autre.
?? Faut-il indiquer la l'argeur de chaque élément du coté gauche !? ou juste l'indiquer un max-width: 132px; suffit au #gauche
Mais en netscape la liste #osl-menu ne veux pas se coller avec l'image..
Merci d'y jetter un coup d'oeil
voici le code
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>osl</title>
<style type="text/css">
/*<![CDATA[*/
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
}
#header {
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
width:632px;
position: absolute;
left: 0px;
top: 0px;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
width: 450px;
float: left;
}
#gauche {
float:left;
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}
.vague_menu{
display: block;
}
#osl-menu{
background: yellow;
margin: 0;
padding: 0;
display: block;
float: left;
width: 130px;
}
/*]]>*/
</style>
</head>
<body>
<div id="conteneur">
<div id="header">
Header (modèle utilisant les positionnement flottants)<a
href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">
(voir tous les modèles)</a>
</div>
<div id="gauche">
<img class="vague_menu" src="images/vague-menu.gif" alt="Vague" title="Vague" />
<div id="osl-menu">
<ul>
<li><a href="#">L'OSL...</a></li>
<li><a href="#">À signaler</a></li>
<li><a href="#">Plus d'info</a></li>
<li><a href="#">Ressources</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Questions</a></li>
</ul>
</div>
</div>
<div id="centre">
<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
</div>
<div id="pied">
pied de page (se place en dessous des éléments flottants grâce à <code>clear:both;</code>)
</div>
</div>
</body>
</html>