Titre: Souci de texte
Posté par: bidouille7 le le 22-10-2011 a 11:56:46
Bonjour à tous. J'essaie en vain depuis plusieurs jours de mettre des noms sur une même ligne mais espacés.J'ai un bloc ou je voudrais mettre des noms dont 1 à gauche,le 2 au milieu et le 3 à droite.Après bien des essais, je n'y arrive pas.Chaque fois c'est tous les noms qui se déplacent ensemble.
Qui peut me donner la solution pour regler ce souci.
Merci et à plus. |
Titre: Re:Souci de texte
Posté par: MarvinLeRouge le le 24-10-2011 a 10:18:56
Salut,
A priori, je dirais ul en text-align center + li en display-inline avec un margin-left et right. Tu aurais une page de test, qu'on se fasse une idée ? |
Titre: Re:Souci de texte
Posté par: bidouille7 le le 24-10-2011 a 14:53:16
Bonjour. malheureusement c'est une page de test et impossible de la mettre sur le web pour visualiser. Par contre je te joins la partie de code des (div) concernées:
<div class="story">
<h3 align="center">Recettes du jour </h3> Là c'est bon
<ul>
<li>
<div align="left">Entrée</div>
<div align="center">Plat</div> Ce sont les 3 là qui ne vont pas
<div align="right">Dessert </div>
<!--end content -->
Il y a 3 div et je n'en voudrais qu'une avec les 3 rubriques dessus.Et aussi un décalage à gauche et à droite par rapport au bord de la page.
Si besoin est, je pourrai t'envoyer le css. Merci et à plus. |
Titre: Re:Souci de texte
Posté par: Pad le le 24-10-2011 a 16:56:54
Le code est complètement faux sauf si ta oublié une partie...
Essaye ça :
Code:
<div class="story">
<h3 align="center">Recettes du jour </h3> Là c'est bon
<ul>
<li>Entrée</li>
<li>Plat</li>
<li>Dessert </li>
</ul>
</div>
en ajoutant les styles :
.story ul { width:600px;padding:0 20px;float:left;position:relative; }
.story ul li { width:190px;padding:0 10px 0 0;float:left;position:relative; }
|
|
|
Titre: Re:Souci de texte
Posté par: MarvinLeRouge le le 24-10-2011 a 20:56:16
@Pad : pourquoi les float left et les position relative, je pige pas.
Je propose une base de ce style :
HTML
Code:
<h3>Recettes du jour</h3>
<ul class="recettes">
<li>Entrée</li>
<li>Plat</li>
<li>Dessert</li>
</ul> |
|
CSS
Code:
h3, .recettes {text-align : center; margin : 1em 2em; list-style : none;}
.recettes li {display : inline; margin : 0 1em;} |
|
|
Titre: Re:Souci de texte
Posté par: Pad le le 24-10-2011 a 22:23:01
| @MarvinLeRouge : juste une habitude de codage ;) |
Titre: Re:Souci de texte
Posté par: bidouille7 le le 25-10-2011 a 11:47:59
Bonjour. J'ai mis en place les codes,mais en local cela ne fonctionne pas. les noms des rubriques sont l'un en dessous de l'autre,au lieu d'être sur la même ligne et espacés.
Y a-t-il une autre solution? Merci et à plus. |
Titre: Re:Souci de texte
Posté par: Pad le le 25-10-2011 a 16:47:20
| faut surement faire quelques ajustements... du genre réduire le width du style des <li> ! Faut bidouiller comme ton pseudo l'indique ;) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|