Faire une liste horizontalement

20 juin 2006 à 20:57:30

Bonjour, voilà j'aimerais créer plusieurs liens, pour cela j'utilise les balises liste <ul>:

Mais j'aimerais que ma liste soit horizontalement disposé comme ceci:

lien1 lien2 lien3 lien4

Pouvez vous m'aider

Merci

Zazou

20 juin 2006 à 20:59:13

Tu mets une class à ton li et tu lui infliges un display: inline

Micheva

20 juin 2006 à 22:42:09

Merci beaucoup

mais j'ai remarqué quand utilisant cette fonction, la largeur pour les liens que j'ai fixé n'est plus celle que j'ai choisi, mais elle se fixe en fonction de la longeur de texte du lien.

C'est possible d'y remédier ?

Merci

Riko

20 juin 2006 à 22:54:41

Moi, j'utiliserai le float:

.liens_horizontaux {
float: left; /*on peut utiliser right au lieu de left*/
border: thin solid #0066CC;/*bordures pour voir l'effet des marges*/
margin-left: 10px;/*pour décoller les blocs les uns des autres*/
width: 100px;/*largueur des blocs*/
text-align: center;/*pour centrer le texte dans le bloc*/
}

<ul>
<li class="liens_horizontaux">liens1</li>
<li class="liens_horizontaux">liens1</li>
<li class="liens_horizontaux">liens1</li>
<li class="liens_horizontaux">liens1</li>
<li class="liens_horizontaux">liens1</li>
</ul>

Zazou

20 juin 2006 à 23:17:03

Bah tu peux également infligé un width à la class utilisé pour ton li

Micheva

21 juin 2006 à 0:14:36

regarder les codes que j'ai mis:

<div id="onglets_superieurs>
<div class="onglets"><a href="index.php" title="Retournez à l'acceuil du site">ACCUEIL</a></div>
<div class="onglets"><a href="reglement.php" title="Consultez le règlement du site">REGLEMENT</a></div>
<div class="onglets"><a href="cadeaux.php" title="Consultez tous les cadeaux">CADEAUX</a></div>
</div>

#onglets_superieurs
{
width: 760px;
height: 16px;
border: 2px solid black;
margin-bottom: 5px;
text-align: center;
}

.onglets
{
width: 125px;
height: 12px;
border: 2px solid black;
}

J'ai donc défini 3 liens, je veux que ces liens soit encadré par une bordure de largeur 125px et de hauteur 12px.

Mais mes liens sont diposés comme ceci:

LIEN1
LIEN2
LIEN3

Et j'aimerais les disposés comme ceci:

LIEN1 LIEN2 LIEN2

mais sans que leur taille soit affecté et je n'y arrive pas.

Merci

Riko

21 juin 2006 à 0:29:34

As tu essayer le code que je t'ai donné précédemment?

[EDIT]

Citation : http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne

Les éléments en-ligne se distinguent eux-même en deux parties : les éléments "remplacés" et les éléments "non-remplacés".

Les éléments "remplacés" sont les seuls qui possèdent des dimensions (height, width) par défaut. Il s'agit des éléments <img>, <input>, <textarea>, <select> et <object>.

Tous les autres éléments en-ligne ("non-remplacés") n'ont pas de dimension à proprement parler (il n'occupent que la place minimum nécessaire à leur contenu). C'est le cas des éléments <strong>, <em>, etc.

Suite à cette explication :

Il vaut mieux utiliser une liste pour un menu (plus semantique),
Il vaut mieux utiliser un float sur la balise <li> de type bloc, (si tu mets la balise <li> en inline tu ne pourras pas définir de largueur)
Si tu utilises la balise <a> , tu ne pourras pas mettre de largueur car a =inline (hormis si tu mets un display:block, ça je n'ai essayer)

Rick

21 juin 2006 à 0:36:18

Hmm moi j'aurai fait comme Riko le propose, je sais pas si c'est la meilleure solution, mais elle me parait pas mal

Micheva

21 juin 2006 à 1:00:06

Merci ca marche j'ai compris, j'aurais encore juste une question.

j'aimerais savoir comment faire pour qu'il n'y est pas d'espace en par exemple les balises:

<div id="menu1">
<h3 class="titre1">TITRE1</h3>
<ul>
<li class="lien_menu1"><a href="index.php" title="Texte">LIEN</a></li>
</ul>
</div>

J'ai toujours un espace entre le titre et le lien, et je n'arrive pas a l'enlever.

Merci

Riko

21 juin 2006 à 1:05:04

#menu1 .titre1 {
margin-bottom: 0px;/*supprime la marge haute par défaut*/
}
#menu1 ul {
margin-top: 0px;/*supprime la marge basse par défaut*/
}

Tu peux aussi mettre margin 0px et cela otera toutes les marges par defaut.