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 - 4 juin 2008 à 19:01

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

Afficher la suite

A voir également:

Petit probleme d'alignement
Trier du plus petit au plus grand excel - Guide
Petit 3 ✓ - Forum Word
Petit 2 ✓ - Forum Windows
Petit 9 - Forum Mail
Comment imprimer une photo en petit ✓ - Forum Photo numérique

3 réponses

Réponse 1 / 3

doctormad Messages postés 430 Date d'inscription Statut Membre Dernière intervention 99

Salut,

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

Winterboard Messages postés 137 Date d'inscription Statut Membre Dernière intervention

bonjour,

Malheureusement aucune solution ne marche :(

Avez vous s'autres idees?

merci

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

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?

Réponse 2 / 3

X-Fan Messages postés 805 Date d'inscription Statut Membre Dernière intervention 24

Tu peux essayé d'ajouter TEXT-VALIGN: center dans ton ul li a et ul li a:hover. ;)

Réponse 3 / 3

Brachior Messages postés 613 Date d'inscription Statut Membre Dernière intervention 46

rajoute juste dans ton CSS :

#navcontainer{ margin-top: 5px; }

Petit probleme d'alignement

3 réponses

Votre réponse

Discussions similaires