Problème pour créer un petit menu horizontal [HTML / CSS] - HTML/CSS - Programmation
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/
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 ?
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à !
Marsh Posté le 04-05-2004 à 09:24:53
PS : ton div est complètement inutile
Marsh Posté le 04-05-2004 à 12:54:24
SIBELIUS a écrit : Il suffit de : |
Pas besoin de float left, un display : inline suffit ..., cela permettra de le centrer si l'on souhaite
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 :
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 ?