Petit probleme d'alignement

Résolu

Winterboard -

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:

#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

Afficher la suite

3 réponses

doctormad

Salut,

Tu ne donne pas le code la classe "bar", sinon essaies la propriété vertical-align:middle;

Winterboard Auteur
bonjour,

Malheureusement aucune solution ne marche :(

Avez vous s'autres idees?

merci
0

Winterboard Auteur

@Winterboardvoila 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?

Réponse 2 / 3
X-Fan
Tu peux essayé d'ajouter TEXT-VALIGN: center dans ton ul li a et ul li a:hover. ;)
0
Réponse 3 / 3
Brachior
rajoute juste dans ton CSS :
```
#navcontainer{ margin-top: 5px; }
```
ou plus ou moins de pixel ^^
0

Petit probleme d'alignement

3 réponses

Discussions similaires

Newsletters