[b]Bonjour à tous !.
Je suis un débutant qui a besoin d'un peu d'aide.
J'ai un problème avec mon menu flottant a gauche, avec Internet Explorer tout marche bien, mais avec firefox il y a des liens qui sont décalés à droite du menu, je ne sais pas du tout comment faire pour que les liens du menu soient correctement là où il devrait être.
Si quelqu'un pouvait me dire comment faire, ça serait très gentil, car la je suis vraiment perdu !.
Je remercie par avance ce qui voudront bien m'aider.
Amicalement.
Julien.
Voici mon code.
Code :
- /* CSS Document */
- #deux { /*compteur colonne de gauche*/
- background: #FFCC00;
- float: left;
- width: 140px;
- height: 20px;
- text-align: center;
- }
- #trois { /*compteur colonne de gauche*/
- background: #FFCC00;
- float: left;
- width: 140px;
- height: 20px;
- text-align: center;
- }
- #quatre { /*compteur colonne de gauche*/
- background: #FFCC00;
- float: left;
- width: 140px;
- height: 20px;
- text-align: center;
- }
- #cinq { /*compteur colonne de gauche*/
- background: #FFCC00;
- float: left;
- width: 140px;
- height: 20px;
- text-align: center;
- }
- ul.liste, .liste li, .liste a {padding:0px ; margin:0px} /*met à 0 les marges internes et
-
- externes de la liste et des liens */
- .liste {width :10.3em ; /* largeur de la liste : environs 15 lettres majuscules - voir em */
- list-style-type:none /* suppression des boutons CSS devant les items de la liste */
- background: #FF6600; /*colonne de gauche de menu couleur orange */
- float: left; width: 140px; /* colonne de gauche du menu*/
- }
- .liste li a {border-left:0.5em solid #FF6600 ; /* crée un gros carré gris à gauche des liens non
-
- survolés */
- background-color:#FF6600 ; /* couleur de fond des liens non survolés #CCD*/
- display:block; /* force le lien à prendre 100% de la largeur de la liste */
- padding-left:0.2em ; /* insère un espace entre le texte du lien et le gros carré gris */
- color:black ; /* la police des liens non survolés est noire */
- text-decoration:none ; /* on suprime le soulignement des liens */
- height:1.5em;} /* hauteur de chaque ligne. N'est indispensable que pour IE 5.0 et 5.5 */
- .liste li a:hover { /* style des liens lors du survol */
- background-color:black ; /* le fond du lien passe au noir */
- color:white ; /* le texte passe au blanc */
- border-left-color:red} /* crée un gros carré rouge à gauche des liens survolés */
|
Code :
- <ul class="liste">
- <div id="deux">compteur</div>
- <div id="trois">galeries photos</div>
- <li><a href="index.php">Accueil</a></li>
- <li><a href="nocario1.php">Nocario 1</a></li>
- <li><a href="nocario2.php">Nocario 2</a></li>
- <li><a href="nocario3.php">Nocario 3</a></li>
- <li><a href="pietricaggio1.php">Pietricaggio 1</a></li>
- <li><a href="pietricaggio2.php">Pietricaggio 2</a></li>
- <li><a href="pietricaggio3.php">Pietricaggio 3</a></li>
- <li><a href="erbaggio1.php">Erbaggio 1</a></li>
- <li><a href="erbaggio2.php">Erbaggio 2</a></li>
- <li><a href="michel.php">Saint-Michel</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="merci.php">Remerciements</a></li>
- <div id="quatre">histoire</div>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <div id="cinq">la généalogie</div>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- <li><a href="#">link</a></li>
- </ul>
|
Voici une page de mon site.
http://ile.chrispat.free.fr/index.php