28172 sujets

CSS et mise en forme, CSS3

Bonsoir à tous !

Je rencontre un petit soucis pour centrer mon menu en liste à puces (en désactivant les puces).

J'ai cette structure XHTML :

	<div id="banniere">
		<ul id="menu_horizontal">
			<li><a href="accueil.php">Accueil</a></li>
			<li><a href="news.php">News</a></li>
			<li><a href="livreor.php">Livre d'or</a></li>
			<li><a href="admin.php">Admin</a></li>
			<li><a href="contact.php">Contact</a></li>
		</ul>
	</div>


Et ce code CSS :

#banniere {
	background-image: url(../images/banniere.jpg);
	background-repeat: no-repeat;
	height: 90px;
	width: 810px;
	background-position : center;
	}
	

#menu_horizontal{
	margin: 0;
	padding: 0;
	height:25px;
	line-height:25px;
	text-align: center;
}

#menu_horizontal li{
	display: inline;
	line-height:25px;
	padding:0 10px;
}

#menu_horizontal a, a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}


Et enfin voici ce que j'obtiens :

http://pix.nofrag.com/a/7/c/2169c401bf9f1f642d28f66b16ca2t.jpg

Le problème, c'est que je bataille depuis 1 heure pour centrer ce menu verticalement sur la bannière bleue qui est un background.

Vous z'auriez une petite idée siouplait ? Smiley smile

Bonne soirée à tous !
Modifié par Jeoffrey54 (17 Mar 2009 - 00:15)
Bonjour,
Oui oui tu n'as pas donné la même taille partout Smiley biggrin


#banniere {
	background-image: url(../images/banniere.jpg);
	background-repeat: no-repeat;
	[#darkred]height: 90px;[/#]	width: 810px;
	background-position : center;

	}
	

#menu_horizontal{
	margin: 0;
	padding: 0;
        [#darkred]height:90px;
	line-height:90px;[/#]
	text-align: center;
}

#menu_horizontal li{
	display: inline;
        [#darkred]line-height:90px;[/#]
	padding:0 10px;
}


Modifié par FoxLeRenard (17 Mar 2009 - 09:52)
Super ca marche merci Smiley lol

Et si je souhaite faire ceci :

Image 1 Image2
Lien 1 lien 2

style un menu en images avec le lien associé au dessous.

Je dois m'y prendre comment ?
Moi avec des images a cliquer, je les placent comme toute image
en effet le fait d'avoir ou non un lien sur l'image ne change pas sa disposition, regardes tout les exemples de phototheque !!
Modifié par FoxLeRenard (17 Mar 2009 - 13:41)
D'acc, je vais essayer de me dépatouiller tout seul et je reviendrai poster ici si besoin Smiley smile

Merci pour tout FoxLeRenard.