28172 sujets

CSS et mise en forme, CSS3

Mettre le menu horizontalement

Bonjour,

je me prends la tête sur un p'tit bout de code. n'ayant plus pratiquer depuis un moment je me suis remis à codé pour ne pas trop perdre mais voila j'ai perdu et ne je ne retrouve plus me. fiches.

l'idée de créer un menu dans un liste non ordonnée avec un arrière plan

<body>
<div id="menu">
<ul id="nav">
	<li id="bt1"><a href="#">accueil</a></li>
    <li id="bt2"><a href="#">galerie</a></li>
    <li id="bt3"><a href="#">contact</a></li>
</ul>
</div>
</body>



<style type="text/css">
body{
	padding-top:50px;
}

div#menu{
	position:relative;
	height:50;
	background-color:#999;
}

div#menu{
	z-index:1;
	height:100px;
	list-style:none;
	
}

ul#nav{
	position:absolute;
	top:-8px;
	left:150px;
	margin:0px;
	width:450px;
	height:180px;
	background:url(menu_main.png)no-repeat 0 0;
	}
	
ul#nav li{
	display:inline;
}

li#bt1{
	left:0px;
}

li#bt2{
	left:70px;
}

li#bt3{
	left:140px
}



li#bt1 a, li#bt2 a, li#bt3 a{
	/*display:block;*/
	width:146px;
	height:52px;
/*	text-indent:-9999px;*/

}

</style>


l'idée d'utilisé "inline" pour que les boutons s'aligne
utilisé "left" pour les place sur le fond.

avec "block" je crée une zone cliquable de 142x52px et je vire le texte avec "text-indent".
souci lorsque je mets "block" la zone de clique s'aligne verticalement, les uns sous les autres.
je ne comprends pas pourquoi.

"inline" qui est le parent devrait place horizontalement "li"?

merci d'avance pour votre aide.
upload/21686-menumain.png
Bonjour,

Il ya beaucoup d'incohérences dans ton code.

Pour construire un menu très simple comme le tien, il y a pléthore de tutos sur le web...

Sinon tu peux commencer par ceux d'alsacrétions. Comme celui-ci pour la propriété inline-block

Je te donne une version de ton code, à toi de l'améliorer:

#menu{
	margin-top:50px;
	height:50px;
	background-color:#999;
}
#nav{
	position:relative;
	top:-8px;
	right:-152px;
	list-style:none;
	margin:0px;
	width:450px;
	height:180px;
	background-color:#F99;
}
#nav li{
	display:inline;
}
#nav li a{
	display: inline-block;
	background: #36F;
	margin: 2px;
	height: 52px;
	width: 142px;
	border-radius: 8px;
	line-height: 52px;
	text-decoration: none;
	font-size: 24px;
	color: #FFF;
	text-align: center;
}


Bon courage Smiley smile
slt, merci pour l'aide. mais je ne suis pas sur qu'on se soit bien compris. l'idée est créer un environnement pour les designers et minimisé le codage.
Minimisé le codage... ok mais, ça dépend ce que tu veut comme résultat et souplesse :

Tu veut un aspect différent lors du survol ?
Tu veut ou tu peut avoir la possibilité d'ajouter une nouvelle rubrique ?

La façon de faire varieras selon tes réponses
Modifié par Cancre (30 Jan 2013 - 10:21)
oui c'est a moi de bien expliquer ce que je souhaite faire! je vais me reprendre et mieux argumenter et expliquer ce que je souhaite faire.
Sujet clos
Aller à