[RÉGLÉ] Changer le style css d'un menu

[tmos]

Bonjour à tous et à toutes
J'ai acheté le ebook du site Joomlack sur la création de templates pour joomla (d'ailleurs s'il passe par ici, je le félicite, c'est assurément la meilleure ressource sur le sujet que j'ai pu trouver !).
J'ai assez bien réussi à suivre le tuto, et j'ai commencé à créer mon propre thème. Pas de gros soucis pour l'instant, je me débrouille avec les bases de html/css que j'ai, au besoin je vais faire un tour sur le site du zéro ou autre pour récupérer les balises qui me manquent...

Seulement voila, j'ai un menu en longueur et je n'arrive pas à me défaire du style par défaut.



[Attention, en utilisant le code que j'ai mis ci dessous, le texte apparait en taille 30, bold et Trebuchet, ici on ne voyait rien sur la capture en laissant ces paramètres...]

J'ai quand même réussi à bidouiller un peu dans mon template.css, voici les différentes lignes de code que j'ai écrites (elles ne se suivent pas dans le fichier, je ne sais pas si cela à une importance...)

ul {
list-style: none;
display : inline;
}

#topmenu {
height : 38px;
width : 1000px;
margin: 0 auto;
background : url(../images/menu_bg.png) top left repeat-x;
}

#topmenu a {
display: inline;
list-style: none;
font-family : Trebuchet MS,Verdana,Helvetica,Arial,sans-serif;
font-weight : bold;
font-size : 30px;
color : white;
}

J'ai entraperçu une réponse à mon problème dans les "suffixes css" de modules, mais cela n'a rien donné, je m'y suis peut être mal pris...

Voila, j'espère que l'exposé de mon problème est assez clair, j’attends avec impatience vos réponses,
bien cordialement,
Tom

[tmos]

Re : Changer le style css d'un menu

Bon et bien j'ai réussi à trouver une réponse à ma question (c'est ça de poster le dimanche midi ), je la met ici, j'espère que cela pourra aider des gens dans la même situation !

/*** MENU HORIZONTAL ***/
#topmenu {	 /*menu en lui meme*/
height : 38px;
width : 1000px;
margin: 0 auto;
background : url(../images/menu_bg.png) top left repeat-x;
}

#topmenu a {	 /* liens du menu*/
font-family : Trebuchet MS,Verdana,Helvetica,Arial,sans-serif;
font-weight : bold;
font-size : 30px;
color : white;
}

#topmenu ul{	 /*liste du menu*/
list-style: none;
display : inline;
}

#topmenu li {	 /*chaque objet de la liste*/
float : left
}
/*** FIN MENU HORIZONTAL ***/

C'est donc ce fameux float:left qui me posait problème !

Malgré tout s'il existe une méthode plus "propre" ou bien s'il y a moyen d'optimiser un peu ce bout de code, n'hésitez pas.
De plus il subsiste un mystère : si je retire le "display : inline;" je me retrouve avec un décalage de mon menu vers le bas (image de fond comprise), quelqu'un serait en mesure d'expliquer ce mystère ?
Cordialement,
Tom

[lefabdu51]

Re : Changer le style css d'un menu

pour ton decalage, c est que la difference entre inline et block est la suivante.
Display:inline implique s aucun retour a la ligne a la fin de ton element. Il peut deborder en largeur.
Si tu met display:block ( ce qui est par defaut), alors a la fin de l element, l'élément suivant est automatiquement mis à la ligne sil ne peut etre placé au bout de l autre.
sur une resolution de 1024Px, si tu affiches en inline un element de 800px de large plus un élément de 400px, tu auras les deux cote a cote et un ascenceur horizontal.
Si tu met les meme élements en block, tu les auras l un en dessous de l autre car il n y as pas assez de largeur pour acceuillir les deux sur la meme ligne.
C est la difference entre une balise div et une balise span..

un exemple
<span><a></span><span><a></span> te feras afficher les deux liens sur la meme ligne
Si tu utilise <div><a></div><div><a></div> la tu les auras obligatoirement sur deux lignes car la balise div est en mode block.

[tmos]

Re : Changer le style css d'un menu

Merci beaucoup pour ces précisions, vraiment !
Je passe en résolu,
T.