28220 sujets

CSS et mise en forme, CSS3

Problemes avec <il> <ul>

Voila je vous pose mon probleme.
Je suis entrain de faire un menu horizontale avec les balises <ul> et <il> tout ca avec un peut de CSS ... mais justement, le point de la balise <il> me gene et je ne sais pas avec quoi l'enlever et de plus, ce menu devant etre horizontale ... j'aimerais savoir comment faire pour qu'il le soit !
Merci a celui qui repondra je suis la si il y a besoin de plus de details .
Salut,
alors déjà, c'est pas <il> mais <li> la balise Smiley smile
Ensuite pour les puces :

ul
{
list-style-type: none;
}

Et pour l'horizontalité, tu as 2 méthodes, display: inline; sur les <li> ou bien float: left; (ou right selon le rendu souhaité) toujours sur les <li>

Ces différents modèles devraient t'aider Smiley cligne
http://css.maxdesign.com.au/listamatic/

@+

li {
display:inline; 
 }


ca devrais marcher mais ... ca marche pas
Modifié par Igor (18 Jun 2005 - 14:27)
Slipki a écrit :

li {
display:inline; 
 }


ca devrais marcher mais ... ca marche pas


Ah tu un exemple en ligne ou un bout de code plus complet parceque dit comme ça, ça marche Smiley smile donc si ça ne marche pas c'est qu'il nous manque des morceaux Smiley smile 

<div id="menuhaut">
  <ul>
  <li><a class="lacc" href="lien.htm"></a></li>
  <li><a class="lacc1" href="lien.htm"></a></li>
  <li><a class="lacc2" href="lien.htm"></a></li>
  <li><a class="lacc3" href="lien.htm"></a></li>
  </ul>
</div>


et pour la feuille de style 


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


voila ! et si tu veux voir ... c'est ici
Slipki a écrit :
si j'essaye de les enlever mais je pense que j'ai pas le choix


En effet si les <a> sont en display: block; le display: inline; sur les <li> ne fonctionnera pas, il faudra dans ce cas utiliser float: left; sur les <li> ou se passer du display: block; sur les <a>

En passant je sais pas si c'est juste pour écourter ou quoi, mais il FAUT mettre du contenu à tes liens, même si au final tu met une image comme élément de menu.

Tu peux utiliser directement une image dans les <a> attribut alt="" bien renseigné mais c'est moins souple niveau spération contenu/mise en forme, ou bien utiliser les techniques de masquage de texte.
@+
Modifié par Olivier (18 Jun 2005 - 14:37)
Bonjour,
Il faudrait choisir le float left et ne pas le cumuler avec le inline:

ul#menuhaut li a{
display:block;
width: xxxpx;
height: xxxpx;
float:left;
etc.}
oui mais la ca devien trop compliqué pour moi ! j'ai beaucoup de mal avec les float !!!!!!je tente quand meme
je viens de suivre tes essais et effectivement tu souffre un peu.

Reprenons 


#menuhaut ul {
list-style:none;
}

#menuhaut li {
float:left;
width:200px;
height:40px;
}

#menuhaut a {
display:block;
}
on y arrive on y arrive !!! maintenant le menu est horizontale mais tout est partit a droite ... lol ! quand ca va ... ca ne va plus
Sujet clos
Aller à