Petit probleme d'alignement
Résolu
Winterboard
Messages postés
137
Date d'inscription
Statut
Membre
Dernière intervention
-
Winterboard Messages postés 137 Date d'inscription Statut Membre Dernière intervention -
Winterboard Messages postés 137 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
voici mon projet: http://www.lou-castelet.fr/project/standartpagebar.html
mon probleme est que le text n'est pas centré sur la barre.
Pouvez vous regarder mon code et me dire comment corriger ca?
css:
XHTML:
Merci d'avance
voici mon projet: http://www.lou-castelet.fr/project/standartpagebar.html
mon probleme est que le text n'est pas centré sur la barre.
Pouvez vous regarder mon code et me dire comment corriger ca?
css:
#navcontainer ul {
padding-left: 0;
margin-left: 0;
background-color: transparent;
color: White;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
padding: 0.2em 1em;
color: White;
text-decoration: none;
border-right: 1px solid #fff;
text-align: center;
}
#navcontainer ul li a:hover {
background-color:#999999;
color: #fff;
}
XHTML:
<div id="navcontainer" class="bar"> <ul id="navlist" class="bar"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> </ul> </div>
Merci d'avance
Configuration: Windows XP Firefox 2.0.0.14
3 réponses
-
Salut,
Tu ne donne pas le code la classe "bar", sinon essaies la propriété vertical-align:middle;-
- voila la solution :)
XHTML:<div id="navcontainer" class="bar" style="list-style:lower-alpha"> <ul id="navlist" class="navlist"> <li class="barli"><a href="#">Gites</a></li> <li class="barli"><a href="#">Appertements</a></li> <li class="barli"><a href="#">Studio</a></li> </ul> </div>
CSS:#navcontainer ul { padding-left: 0; margin-left: 0; color: White; font-family: arial, helvetica, sans-serif; } #navcontainer li ul{ display: inline-block; } #navcontainer ul li a { padding: 0.2em 3em; color: White; text-decoration: none; text-align: center; } #navcontainer ul li a:hover { background-color: #999999; color: #fff; } .navlist { width: 562px; height: 37px; vertical-align: middle; } .barli { height: 37px; position: relative; top: 9px; display: inline; } .bar { text-align: center; background-image: url('../pic/bar.jpg'); width: 562px; height: 37px; vertical-align: middle; margin-left: 5px; }
Mais j'ai l'impression que j'ai des trucs en double de partout :s
ques ce que je peut supprimer?
-
-
Tu peux essayé d'ajouter TEXT-VALIGN: center dans ton ul li a et ul li a:hover. ;)
-
rajoute juste dans ton CSS :
#navcontainer{ margin-top: 5px; }ou plus ou moins de pixel ^^
