28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Je cherche à avoir le résultat suivant dans mon menu
upload/26210-onglet.jpg

Mais pour le moment je n'ai que : http://www.s341357812.onlinehome.fr/site/

J'ai joué un peu avec l'interligne mais le resultat ne me plaisait pas n'était pas centrée correctement. Le contenu est généré par du Joomla donc je voudrai éviter les solutions qui demande de gérer séparément chaque onglet (onglet avec retour et onglet sans retour à la ligne)

En espérant que vous pourrez m'aider sur ce petit challenge CSS Smiley cligne

Cordialement,
Modifié par perelk (20 Oct 2010 - 10:41)
Tu dois pouvoir arriver au résultat voulu de cette façon :
div.moduletable_onglet li {
    display: table;
}

div.moduletable_onglet a {
    display: table-cell;
}


Par contre je crois que ça ne fonctionne pas sous IE6 voir même IE7, donc à tester en fonction de ton besoin.
Modifié par moust (19 Oct 2010 - 00:26)
Non ce n'est pas IE7 compatible donc je ne peux pas me permettre de l'utiliser. De plus je vois pas en quoi cela m'aurait aider à gérer l'interligne ?
Salut,

Comment centrer verticalement sur tous les navigateurs ?

Et jette un œil à "Centrer verticalement plusieurs lignes de texte dans un conteneur de hauteur fixe".

EDIT :
Cette solution est intéressante si tu souhaites automatiser le centrage vertical. Si ton menu n'est pas dynamique ou s'il n'est pas amené à évoluer, le plus simple reste d'utiliser le combo height / line-height pour les éléments d'une seule ligne, et de cibler avec une classe les éléments sur deux lignes pour adapter le line-height + du padding-top pour centrer verticalement le tout.
Modifié par BeliG (20 Oct 2010 - 10:25)
Fantastique !
Ca roule ! On oublie trop souvent le inline-lock Smiley ohwell

Sauf que cela ne centre pas verticalement la ligne simple sous IE8 et 7 Smiley ohwell
Modifié par perelk (20 Oct 2010 - 10:48)