Menu aligné horizontalement

13 avril 2006 à 23:14:50

Bonsoir, je suis en train de réalisé un menu avec un un fond de 90px de large et de type display block.

Cependant, chaque lien du menu se met en dessous de l'autre, alors que je n'ai pas mis de <br />

Comment ça se fait ?

Voici mon code css:

#header
{
height: 19px;
padding-top: 64px;
padding-bottom: 3px;
background-image: url('images/header.jpg');
text-align: right;
padding-right: 16px;
}
a.menus
{
display: block;
width: 94px;
background-color: #FFFFFF;
color: #A7D100;
text-decoration: none;
text-align: center;
font-variant: small-caps;
font-size: 13px;
font-family: Arial;
}

En sachant que le menu fait partie du header

Voici le code html (dans une include)

<a href="index.php" class="menus">Accueil</a>
<a href="index.php" class="menus">Les forums</a>
<a href="index.php" class="menus">S'inscrire</a>
<a href="index.php" class="menus">Les membres</a>
<a href="index.php" class="menus">Les photos</a>

Bien, j'espère avoir une réponse

Merci

Riko

13 avril 2006 à 23:17:20

Salut, je pense que c'est normal car tu transformes des element inline en bloc donc ils se comporte comme tels.

Que veux tu obtenir exactement?

Orion

13 avril 2006 à 23:20:05

Un alignement horizontal, soit les uns à côté des autres, et non en dessous

maypeur

13 avril 2006 à 23:22:32

salut !
Essaye d'enlever le texte align de a.menus et le display block comme le dit Riko je pense qu'il veut simplement que sont menu s'affiche en long dans sont block #header.

Orion

13 avril 2006 à 23:29:05

Je m'étais mal expliqué.

En fait, j'ai mon header, et dans ce header se situent les menus.

Ces menus doivent être dans un rectangle blanc, tous (rectangles) séparés de 10 px. Et les rectangles sont sur une même ligne.

Riko

13 avril 2006 à 23:38:17

Pour faire un menu, utilise des listes (balise UL, LI que tu mets transformes en inline).
Tu positionne le tout avec ton css.

Orion

13 avril 2006 à 23:46:58

Je ne comprends pas, pourrais-tu le faire avec le css stp ?

Merci

Riko

14 avril 2006 à 0:05:54

Le code html pour le menu

ul {
list-style-type: none;/*supprime les puces*/
margin: 0px;/*supprime les marges par défaut*/
}
li {
display: inline;/*mets les liens cote a cote*/
padding-left: 10px;/*joue avec ces valeurs pour mettre en place ton texte*/
padding-right: 10px;
}

<ul >
<li><a href="#">liens</a></li>
<li><a href="#">liens</a></li>
<li><a href="#">liens</a></li>
<li><a href="#">liens</a></li>
<li><a href="#">liens</a></li>
</ul>

Tu affectes une class ou un id à ce que tu veux!

gcyrillus

14 avril 2006 à 0:11:29

bonjour,
en remplaçant, "position:absolute;" par "float:left;" pour tes balises a , tu vas faire en sorte de toujours pouvoir les dimensionner(width:94px, marchera toujours) et les laisser se placer les unes a cotés des autres (tant qu'elles auront de la places)

++

<edit> je me refere au code de ton premier post dans le sujet </edit>

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Riko

14 avril 2006 à 0:23:02

Effectivement il serait plus facile de positionner avec des floats.

Une autre solution:

.liens {
margin: 0px;/*supprime les marges par défaut*/
list-style-type: none;
text-align: center;
margin-top: 60px;/*pour positionner l'ensemble des liens utilises top bottom ou right au besoin*/
}

.menu {
float: left;
width: 94px;
margin-left: 10px;/*pour positionner le texte et les blocs*/
border: thin solid #FF0000;
}

<ul class="liens" >
<li class="menu"><a href="#">liens</a></li>
<li class="menu"><a href="#">liens</a></li>
<li class="menu"><a href="#">liens</a></li>
<li class="menu"><a href="#">liens</a></li>
<li class="menu"><a href="#">liens</a></li>
</ul>

gcyrillus

14 avril 2006 à 0:31:21

margin-left: 10px;/*pour positionner le texte et les blocs*/

je suis plus pour un

padding-right:10px;

dans

.liens li

...les liste .
on evite ainsi le risque de marge exterieur gauche doublé dans IE, et de decaller le premier lien ...

++

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Riko

14 avril 2006 à 0:42:22

Salut gcyrillus, je ne pense pas que le padding-right:10px; sépare les blocs (je pense qu'Orion veut séparer les blocs).

Qu'en penses tu?

gcyrillus

14 avril 2006 à 1:39:19

?? remplacé une marge exterieur a "a" par une marge interieur a "li", a le m^me effet non ? 10 px c'est 10px non ?

repense y quand tu te trouve face au bug de marge gauche de IE qui passe a 20 px quand tu donnes 10 px dans le css :), ça evite de rebricolé le css avec des zoom:1; ou je ne sais quoi d'autres, foutu IE, on peut pas s'empecher de penser a lui, je dois etre traumatiser.

++

<edit>il y aussi opera qui applique les fusion de marge de bonne façon, par exemple si dans ce menu (a en float ) tu fais margin:0 10px; il y aura 20 px d'ecart entre cahque a , sauf dans opera qui fusionne les marges et ne laissera qu'un ecart de 10px, la marge interieur (padding), alors redevient une bonne soluce si tu veut vraiment ces 20px (pour la marge gauche de preference)

</edit>

sinon, le sujet il est resolue ?

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Riko

14 avril 2006 à 1:41:19

Eh bien je n'en sais rien!