Discussion :

[canary]

Bonjour à tous,

J'ai récupéré un menu horizontal et j'aimerai le mettre vertical, quelle est l'astuce svp?

Merci à tous
Aud-

[c_s_s]

Bonjour,

Le plus simple serait de trouver directement un menu vertical plutôt que d'essayer de modifier un menu dont la feuille de style est écrite pour que l'affichage soit horizontal.

Pour te donner une idée, ce sont les float:left ou les display:inline qui permettent généralement d'aligner les onglets les uns à côté des autres.
Tu peux les enlever, mais il te restera encore des problèmes de marge et de largeur à résoudre.

Voilà pourquoi il est plus simple de trouver un menu déjà vertical, ce n'est pas ça qui manque sur le net.

[canary]

oui mais le truc c'est que je ne veux que ce type d'onglet pour faire comme un agenda... et sur le net j'ai beau chercher se ne sont que des cases rectangulaires très moches. C'est donc pour cela que je souhaite trouver l'astuce afin de basculer le menu horizontal en vertical...

[canary]

oui mais le truc c'est que je ne veux que ce type d'onglet pour faire comme un agenda... et sur le net j'ai beau chercher se ne sont que des cases rectangulaires très moches. C'est donc pour cela que je souhaite trouver l'astuce afin de basculer le menu horizontal en vertical...

edit: je ne suis pas sûr de me faire comprendre en fait c'est pas des cases l'une au dessus de l'autre que je veux mais plutôt que le menu horizontal actuel fasse une rotation de 90° vers la gauche et donc que l'écriture soit debout... possible? si oui comment?

merci par avance
Aud-

[mama07]

Pour faire de ton menu horizontal un menu vertical modifie les lignes suivante de style.css:

#tabs6 li {
display:inline;
margin:0;
padding:0;
}

devient :

#tabs6 li {
margin:20px;
padding:0;
}

#tabs6 a {
float:left;
background:url("tableft6.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

devient :

#tabs6 a {
background:url("tableft6.gif") no-repeat left top;
margin:0;
padding: 4px; /*ligne modifié*/
text-decoration:none;
}

#tabs6 a span {
float:left;
display:block;
background:url("tabright6.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

devient :

#tabs6 a span {
background:url("tabright6.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

[canary]

dors et deja merci pour les avoir mis les un au dessus des autres mais comment faire pour les tourner à 90° à gauche?