Les balises lien <a> et les retour à la ligne

Les balises lien <a> et les retour à la ligne - HTML/CSS - Programmation

Marsh Posté le 09-07-2005 à 22:54:35    

Salut à tous,
Alors j'ai un méga problème j'aimerai faire un menu horizontal sans <table>
Et Mes lien doivent avoir une image en fond ( width: 133px; height: 25px; )
et la c'est beacoup plus chaud !!!!
Voici mon menu :

<div id="menu"><a href="./" title="Accueil">Accueil</a><a href="" title="Vente">Vente</a><a href="" title="">Location</a><a href="" title="Assurance">Assurance</a><a href="" title="Partenaires">Partenaires</a><a href="?ID=contact" title="Contact">Contact</a></div>

 
Mon style CSS :

#menu {
    background-color:#C9CDFF;
}
#menu a {
    display: block;
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: 14pt;
    color: #4E517C;
    width: 133px;
    height: 25px;
    background: url("./images/menu_off.jpg" );
    text-align: center;
    text-decoration:none;
 
}
#menu a:hover {
    display: block;
    color: #000000;
    width: 133px;
    height: 25px ;
    background-image: url("./images/menu_on.jpg" );
    text-align: center;
    text-decoration:none;
}

 
Et j'ai des retour à la ligne pour chaque balise <a> :fou:  :cry:  :pt1cable: !!!!!
Merci beaucoup à ceux qui prendront le temps de lire ce message.
@+


---------------
Immortal-PC,
Reply

Marsh Posté le 09-07-2005 à 22:54:35   

Reply

Marsh Posté le 09-07-2005 à 23:20:38    

Parce que t'as mis "display: block" et que les blocs se mettent les uns en dessous des autres.
Essaie d'ajouter "float: left"


Message édité par antp le 09-07-2005 à 23:21:21

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 10-07-2005 à 00:18:27    

comme les listes sont très apropriés pour les menu, utilise une liste, prend bien soin de mettre float: left; ou display inline dans le code CSS
 

Code :
  1. #menu ul li {
  2. float: left;
  3.             }


 
et met dans ton code html :
 

Code :
  1. <ul id="menu">
  2. <li><a href="#">accueil</a></li>
  3. <li><a href="#">ventes</a></li>
  4. ..............................
  5. </ul>


 
je pense que c'est mieu ciao

Reply

Marsh Posté le 10-07-2005 à 22:22:28    

Salut,
MERCI beaucoup les gars c'est nikel !!!!!!!
Pour ceux que ça intéresse voici le code :
Les CSS :

Code :
  1. #menu {
  2.     list-style: none;
  3.     display: inline;
  4.     background-color:#C9CDFF;
  5. }
  6. #menu li {
  7.     float: left;
  8. }
  9. #menu a {
  10.     display: block;
  11.     /*white-space: nowrap;*/
  12. font-weight: bolder;
  13.     font-family: Arial, Helvetica, sans-serif;
  14. font-weight: bolder;
  15.     font-size: 14pt;
  16.     color: #4E517C;
  17.     width: 133px;
  18.     height: 25px;
  19.     background: url("./images/menu_off.jpg" );
  20. text-align: center;
  21.     text-decoration:none;
  22. }
  23. #menu a:hover {
  24. display: block;
  25.     color: #000000;
  26.     width: 133px;
  27.     height: 25px ;
  28.     background-image: url("./images/menu_on.jpg" );
  29. text-align: center;
  30.     text-decoration:none;
  31. }


 
Le HTML :

Code :
  1. <ul id="menu">
  2. <li><a href="./" title="Accueil">Accueil</a></li>
  3. <li><a href="" title="Vente">Vente</a></li>
  4. <li><a href="" title="">Location</a></li>
  5. <li><a href="" title="Assurance">Assurance</a></li>
  6. <li><a href="" title="Partenaires">Partenaires</a></li>
  7. <li><a href="?ID=contact" title="Contact">Contact</a></li>
  8. </ul>


 
@+ et encore merci !!!! :jap:  :sol:  :hello:  :bounce:


---------------
Immortal-PC,
Reply

Marsh Posté le 12-07-2005 à 21:56:11    

de rien, c'est une dès premiere fois que je reponds a une personne et qur je sers vraiment a quelque chose :D, d'habitude, c' est moi qui pose des questions ..... ciao @+


---------------
mon site perso, allez visiter
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed