28173 sujets

CSS et mise en forme, CSS3

[Résolu]Probléme avec menu horizontal en css

merci Raphael mais je trouve pas dans le code des menu se qui met en horizontal (je vien de commencer et je comprend pas tous)

ces bon j'ai trouvais, il fallais rajouter sa float: left;
Modifié par spawn_92 (02 Nov 2006 - 17:41)
tu prends le premier menu et dans les options de ton navigateur tu fais : afficher le code source.

Si j'ai bien coppris ta question Smiley lol
Qu'est-ce qui ne fonctionne pas chez toi sous Firefox ?

ps: ah c'est foutus navigateurs... au fait quelqu'un sait si IE7 qui est en beta à l'heure actuelle sera aux normes comme firefox 2.0 ?)
salut
j'aimerais centrer se menu et aussi rajouter ces deux image sur les coté
celle la pour la coter gauche

http://spawn92wiimages.site.voila.fr/imagessite/boutonwii2233_copie_fin.jpg
et celle la pour le coter droit
http://spawn92wiimages.site.voila.fr/imagessite/boutonwii24444_copie.jpg

voila le code html 
<link rel="stylesheet" media="screen" type="text/css" title="new 4" href="new_3.css" />
<ul id="menu">
	<li><a href="#">item n°1</a></li>
	<li><a href="#">item n°2</a></li>

	<li><a href="#">item n°3</a></li>
	<li><a href="#">item n°4</a></li>
	<li><a href="#">item n°5</a></li>

</ul>



et voila le code css 
ul#menu
{
	margin-left: 140px;
	margin: -5px ;

	
	list-style-type: none ;
	
}

ul#menu li
{
	float: left ;
	text-align: center ;
}
 



ul#menu li a
{

	width: 60px ;
	line-height: 30px ;
	font-size: 0.6em ;
     font-family: arial ;
font-weight: bold;
	letter-spacing: 2px ;
	color: #000000 ;
	display: block ;
	text-decoration: none ;
	text-decoration: none ;
	background: url(http://spawn92wiimages.site.voila.fr/imagessite/boutonwii22_copie_fin.jpg) no-repeat 0 0 
}

ul#menu li a:hover
{
	background: url(http://spawn92wiimages.site.voila.fr/imagessite/boutonwii22_copie_fin.jpg) repeat-x 0 -30px ;
}


merci pour vos réponses
Modifié par spawn_92 (03 Nov 2006 - 14:33)
Modérateur
bonsoir,

ul est est le conteneur principal du menu , il est donc possible dy mettre une image de fond.

Pour la deuxieme image , on peut ajouter un item dans la liste.
Cette item de liste peut-etre remplie avec un lien de "raccourcie" vers le contenu principale de la page , pour justifier de sa prescence et ajouté un confort de navigation pour certain visiteurs .

Voici ce que je te propose en pratique :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" 

xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test menu </title>
<style type='text/css'>
ul#menu
{
	margin-left: 140px;
	list-style-type: none ;
	padding-right:48px;
	background:url(http://spawn92wiimages.site.voila.fr/imagessite/boutonwii24444_copie.jpg) no-repeat right ;
	display:table;
}
ul#menu li
{
	float: left ;
	text-align: center ;
}
.bg {
	width:48px;
	height:30px;
	background:url(http://spawn92wiimages.site.voila.fr/imagessite/boutonwii2233_copie_fin.jpg) no-repeat 0 0 ;
	overflow:hidden;
}
.bg a {
	position:absolute;
	width:0;height:0;
	z-index:-1;
	overflow:hidden;
}
ul#menu li a
{
	width: 60px ;
	line-height: 30px ;
	font-size: 0.6em ;
	font-family: arial ;
	font-weight: bold;
	letter-spacing: 2px ;
	color: #000000 ;
	display: block ;
	text-decoration: none ;
	text-decoration: none ;
	background: 	url(http://spawn92wiimages.site.voila.fr/imagessite/boutonwii22_copie_fin.jpg) no-repeat 0 0 ;
}
ul#menu li a:hover
{
	background:url(http://spawn92wiimages.site.voila.fr/imagessite/boutonwii22_copie_fin.jpg) repeat-x 0 -30px ;
}
p {width:100%;}
</style>
<!--[if IE ]>
<style type="text/css">
ul#menu
{
	float:left;
/* l'un et l'autre se complete afin d'eviter le comportement "block", activer le padding-right
et eviter le bug de double-marge . on y retrouve presque le display:table  */
	display:inline;


}
ul#menu li
{
	float: left ;
	text-align: center ;
}
.bg   {
	overflow:hidden;
}


</style>
<![endif]-->
</head>
<body>
<ul id="menu">
<li class="bg"><a href="#">raccourcie contenu</a></li>
	<li><a href="#">item n°1</a></li>
	<li><a href="#">item n°2</a></li>
	<li><a href="#">item n°3</a></li>
	<li><a href="#">item n°4</a></li>
	<li><a href="#">item n°5</a></li>
</ul>
<p>ne pas oublié de donner une largeur au conteneur pour eviter de voir les listes du menu passer a la ligne au retrecissement de la page </p>
<p>Placé en flottant dans IE , penser à donner le "layout" aux elements ou un clear , sur le contenu suivant le menu.(ici un width:100%)</p>
</body>
</html>


bonsoir.
Re.

La largeur du menu étant fixée, il serait possible d'utiliser une seule image de fond, reprenant les deux coins, et appliquée à ul#menu. Ce qui permettrait de se passer de l'item de liste supplémentaire. Mais bon. Si ça marche comme ça, tant mieux Smiley smile

Au fait, pense à ajouter le [Résolu] dans le titre Smiley cligne
Modifié par Sopo (03 Nov 2006 - 23:06)
Modérateur
heu, non ,la largeur n'etait pas fixée , la taille des polices non plus Smiley smile , la fluidité me semble bien de rigueur , alors resolu ou pas ?
Sujet clos
Aller à