18041 sujets

Questions générales et questions de débutants

Menu horizontal / css

Bonjour à tous !

Je passe par ici parce que le site est génial.

Voila, je me prend la tête sur un stupide menu horizontal.
Il est tout simple mais le css attaché fonctionne mal...je débute...

Voici le code CSS :

body {
	margin:0;
	padding:0;
	font-family:Arial,Verdana;
	font-size:small;
}

div#header {
width: 100%;
margin: 0;
padding: 5px;
}

div#headerbox {
width: 600px;
margin: auto;
padding: 0;
}

div#logo {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
/*background-color: #034;*/
}

div#mainmenu {
width: 100%;
margin: 0;
padding: 2px 0;
border-bottom: 1px solid black;
}

div#mainmenu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}

div#mainmenu li {
display: inline;
margin: 0;
padding: 0;
border-right: 1px solid black;
}

div#mainmenu li:hover {
background-color: #034;
}

div#mainmenu a {
margin: 0;
padding: 0 10px;
line-height: 8px;
font-family: verdana;
font-size: 80%;
text-decoration: none;
}

div#mainmenu a:hover {
text-decoration: none;
}

div#mainmenu li a {
color: black;
}
div#mainmenu li:hover a {
color: white;
}

div#mainmenu li.lastitem {
border: none;
}


Et le HTML :

<html><head></head>

<body>
<div id="header">
<div id="headerbox">
<div id="logo">logo</div>
<div id="mainmenu">
<ul>
<li><a href="#">commandes</a></li><li><a href="#">listes</a></li><li><a href="#">agence</a></li><li><a href="#">stats</a></li><li class="lastitem"><a href="#">admin</a></li>
</ul>

</div>


</div>
</div>

</body>
</html>


Bon alors franchement je suis désolé pour le cafouillage sur ce post...je vais me cacher.
Sinon, j'ai résolu le problème de décalage des <li> vers la droite qui était du au code html :
il fallait coller les balises pour les supprimer.
Mais s'il y a une autre solution je suis preneur.

Mais il reste que j'ai du mal à centrer les <a> en hauteur et largeur dans les <li>,
je manque de vista...

Alors RE merci d'avance.
Modifié par cyberkoa (07 Jan 2010 - 00:02)
Salut et bienvenue à toi,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
Oh ! Pardon !!

Je vais essayer de me rattraper pour la suite.

Je remets le code en forme.

Le CSS :

body {
	margin:0;
	padding:0;
	font-family:Arial,Verdana;
	font-size:small;
}

div#header {
width: 100%;
margin: 0;
padding: 5px;
}

div#headerbox {
width: 600px;
margin: auto;
padding: 0;
}

div#logo {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
background-color: #034;
}

div#mainmenu {
width: 100%;
margin: 0;
padding: 2px 0;
border-bottom: 1px solid black;
}

div#mainmenu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}

div#mainmenu li {
display: inline;
margin: 0;
padding: 0;
border-right: 1px solid black;
}

div#mainmenu li:hover {
background-color: #034;
}

div#mainmenu a {
margin: 0;
padding: 0 10px;
line-height: 8px;
font-family: verdana;
font-size: 80%;
text-decoration: none;
}

div#mainmenu a:hover {
text-decoration: none;
}

div#mainmenu li a {
color: black;
}
div#mainmenu li:hover a {
color: white;
}

div#mainmenu li.lastitem {
border: none;
}


Et le HTML :

<html><head></head>

<body>
<div id="header">
<div id="headerbox">
<div id="logo">logo</div>
<div id="mainmenu">
<ul>
<li><a href="#">commandes</a></li>
<li><a href="#">listes</a></li>
<li><a href="#">agence</a></li>
<li><a href="#">stats</a></li>
<li class="lastitem"><a href="#">admin</a></li>
</ul>

</div>


</div>
</div>

</body>
</html>


Si quelqu'un peut m'aider, je suis toujours preneur...
Salut,

Dans mon précédent message il était expliqué comment editer ton message initial au lieu de le répéter en respectant la consigne. Pourrais tu modifier ton message initial, merci.
Bonjour,
C'est vraiment beau si ça marche et si tu arrives à avoir le résultat que tu souhaites car si tu regardes bien tes styles, tu ne donnes à aucun moment une taille pour ton li. Tout le monde fait 100% de largeur Smiley confus

Pour un menu horizontal, c'est pas génial. Il faudrait que ton #mainmenu Li est une largeur définie.
Et sauf erreur de ma part, reprenez moi si je me trompe, tu n'es pas obligé d'utiliser un bloc <div> puisque tu utilises derrières un bloc <ul>. Le bloc <ul> fera très bien l'affaire tout seul.

<ul id="mainmenu"> 
<li><a href="#">commandes</a></li> 
<li><a href="#">listes</a></li> 
<li><a href="#">agence</a></li> 
<li><a href="#">stats</a></li> 
<li class="lastitem"><a href="#">admin</a></li> 
</ul>


alors ton CSS devient


ul#mainmenu { 
width: 100%; 
margin: 0; 
padding: 2px 0; 
list-style: none; 
text-align: right; 
border-bottom: 1px solid black; 
}


et tu remplaces tout tes div#maimenu par ul#mainmenu

ensuite n'oublie pas d'affecter une largeur fixe à tes ul#mainmenu li
bonjour,

ton decallage vers la droite est du a ton : text-align:right; dans div#mainmenu ul

Pour l'alignement vertical :
Il vaut peut-etre mieux formaté tes li avec : display:inline-block; si tu veut les centrer horizontalement (demande une correction CSS pour IE7 et inf ) ou float:left; (si tu ne veut pas les centrer horizontalement ). "display:inline;" ne permet d'imposer ni hauteur ni largeur (même avec un line-height détourné).
Puis tu impose un line-height ... ce qui devrait avoir pour effet de leur imposer une hauteur (jaugeable visuellement avec la bordure laterale que tu dessine) en centrant les texte verticalement (tes liens en l'occurance).

Enfin , pour que sa passe bien en general , donne un doctype valide qui maintient en particulier IE en mode de rendu standard : html 4.01 transitionnal ou strict, ou html5, ou xhtml transitionnal ou strict -> sans prelude xml Smiley smile .

ex:
div#mainmenu ul { 
margin: 0; 
padding: 0; 
list-style: none; 
overflow:hidden;zoom:1;/* contexte de formatage modifié  si li en flottant */
} 
 
div#mainmenu li { 
float:left;
margin: 0; 
padding: 0; 
border-right: 1px solid black; 
line-height:2em;/* ici hauteur a determiner */
} 
 
div#mainmenu li:hover { 
background-color: #034; 
} 
 
div#mainmenu a { 
margin: 0; 
padding: 0 10px; 
font-family: verdana; 
font-size: 80%; 
text-decoration: none; 
}

ou (qui ne passe pas tel quel dans IE7 et inferieurs ou firefox 2 et inférieurs)
div#mainmenu ul { 
margin: 0; 
padding: 0; 
list-style: none; 
text-align:center;
} 
 
div#mainmenu li { 
display:inline-block
margin: 0; 
padding: 0; 
border-right: 1px solid black; 
line-height:2em;
} 
 
div#mainmenu li:hover { 
background-color: #034; 
} 
 
div#mainmenu a { 
margin: 0; 
padding: 0 10px; 
font-family: verdana; 
font-size: 80%; 
text-decoration: none; 
}


Cordialement
GC
Merci beaucoup à vous 2.
C'est sympa de vous pencher sur un code aussi sommaire Smiley cligne

Je vais faire un essai avec vos suggestions.
A priori le float:left me semble plus judicieux car plus universel.

Bonne continuation ++
Apres plusieurs tests, la technique du float:left; est interesssante car elle permet de jouer sur la hauteur de ligne.
Mais je ne parviens plus à aligner le <ul> à droite... car c'etait bien mon intention première !! lol
C'est voulu pour faire un effet gauche/droite avec le futur logo.

Bref, je cherche un moyen d'améliorer.

Merci d'avance pour toute aide
POur cette technique là, ce que je fais c'est que je donne une largeur fixe au <ul> et le place dans ma page.

pour la largeur, si tu as 7 <li> que tu utilises en float:left mesurant 120px de large sans margin, sans border et sans padding et bien ton <ul> mesureras 120x7=840px. Pour le centrer tu lui affecteras un margin de 0px sur la hauteur et auto sur la largeur.
Pour l'aligner à droite dans un div de 100% he bien je ne sais pas car je ne l'ai jamais fait Smiley confused
Sujet clos
Aller à