[HTML / CSS] Problème pour créer un petit menu horizontal

Problème pour créer un petit menu horizontal [HTML / CSS] - HTML/CSS - Programmation

Marsh Posté le 04-05-2004 à 01:08:24    

Hello !
 
Je me suis laissé convaincre par les bienfaits des CSS pour la mise en page, mais je dois avouer avoir bien du mal à me passer des tableaux ! Pourtant un div associé à un style adéquat semble on ne peut plus approprié pour ce que je veux faire, mais je bloque.
 
Il me faudrait remplacer ce tableau sans bordure visible :
 
<table>
  <tr>
    <td align="left" width="15%">Titre n° 1</td>
    <td align="center" width="20%">Titre 2</td>
    <td align="center" width="20%">Titre 3</td>
    <td align="center" width="30%">Titre numéro quatre</td>
    <td align="right" width="15%">Titre n° 5</td>
  </tr>
</table>
 
Par un div avec bordure visible. La cellule de gauche doit être plaquée à gauche de l'élement conteneur, la cellule de droite doit être plaquée à droite, et les cellules du milieu doivent être de taille variable (adaptée automatiquement à la taille du texte qu'elles contiennent) et séparées d'un espace de taille fixe :
 
http://coreamp.online.fr/divers/menu.png
 
A priori ca ne va pas être possible en appliquant un style sur le div :
 
<div>
  <ul>
    <li><a href="1.htm">Titre n°1</a></li>
    <li><a href="2.htm">Titre 2</a></li>
    <li><a href="3.htm">Titre 3</a></li>
    <li><a href="4.htm">Titre 4</a></li>
    <li><a href="5.htm">Titre numéro quatre</a></li>
    <li><a href="6.htm">Titre n° 5</a></li>
  </ul>
</div>
 
Il va me falloir un style pour chaque élément de la liste ?

Reply

Marsh Posté le 04-05-2004 à 01:08:24   

Reply

Marsh Posté le 04-05-2004 à 01:49:37    

Je te propose trois liens qui pourront t'aider je pense...
http://www.openweb.eu.org/articles/problemes_tableaux/
http://mammouthland.free.fr/cours/css/cours2.php
http://www.alsacreations.com/articles/menu/


Message édité par Spiderkat le 04-05-2004 à 03:10:30
Reply

Marsh Posté le 04-05-2004 à 08:47:29    

J'ai déjà parcourus 2 de ces 3 liens de long en large mais je n'ai rien trouvé qui me permettent d'arriver au résultat souhaité. Ou alors il me faudrait abandonner la liste et faire un div pour chaque titre de mon menu, en spécifiant des propriétés d'alignement différentes pour tous. Je trouve ca assez lourd, il n'y a pas de solution avec un style unique appliqué sur le div ?

Reply

Marsh Posté le 04-05-2004 à 09:24:13    

Il suffit de :
- placer les éléments de liste (li) en float left (tu auras ainsi un menu horizontal
- donner une largeur en % à tes éléments (de manière à ce que le total fasse 100%) puisque c'est ce que tu veux apparemment
- donner des marges gauche et/ou droite à tes éléments pour avoir un espace entre eux.
 
Et voilà !


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 04-05-2004 à 09:24:53    

PS : ton div est complètement inutile ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 04-05-2004 à 12:54:24    

SIBELIUS a écrit :

Il suffit de :
- placer les éléments de liste (li) en float left (tu auras ainsi un menu horizontal
- donner une largeur en % à tes éléments (de manière à ce que le total fasse 100%) puisque c'est ce que tu veux apparemment
- donner des marges gauche et/ou droite à tes éléments pour avoir un espace entre eux.
 
Et voilà !


 
Pas besoin de float left, un display : inline suffit ..., cela permettra de le centrer si l'on souhaite


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Sujets relatifs:

Leave a Replay

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