28220 sujets

CSS et mise en forme, CSS3

Répartir horizontalement de 1 à 4 boîtes en largeur fluide

Pages :
Bonjour,

Voilà le problème est dans le titre : placer régulièrement de 1 à 4 boîtes de largeur fixe dans un conteneur fluide.
Ca fonctionne très bien avec un nombre de boîte déterminé.
Le souci est que je ne connais pas à l'avance le nombre de boîte à afficher.
Je ne peux donc pas utiliser la technique de centrage horizontal habituel (largeur fixe + marges auto).

Merci d'avance
hum, tu n'as qu'une solution pour les centrer, ce serait que ce ne serait pas des boites...
Ne serais-ce pas des images que tu cherches à centrer dans ses boites ?
Dans ce cas, pourquoi utiliser des boites.

Il te suffit de faire ceci

<ul id="menu">
 <li><a href="#"><img src="tonimage.jpg" alt="Ton image" /></a></li>
 <li><a href="#"><img src="tonimage.jpg" alt="Ton image" /></a></li>
 <li><a href="#"><img src="tonimage.jpg" alt="Ton image" /></a></li>
 <li><a href="#"><img src="tonimage.jpg" alt="Ton image" /></a></li>
 <li><a href="#"><img src="tonimage.jpg" alt="Ton image" /></a></li>
</ul>


et dans la partie CSS:

ul#menu{
text-align:center;
}
ul#menu li{
display:inline;
}
Mais as-tu réellement besoin de ses boites ?

Réponse : oui, pour mettre des backgrounds, border ou autres, et dans ce cas, je ne sais pas trop comment faire.

Non, pas spécialement, alors dans ce cas, un code dans le style que je t'ai donné avec le bon vieux text-align:center ira a merveille.

Ce serait mieux, dans tout les cas, si on avait un lien pour voir...
Voici le code html pour 4 boîtes


<div class="vignettes">
<div class="vignette">
<a href="" class="titre">TITRE</a>
<a href="" class="picto"><img ...></a>
<a href="" class="image"><img ...></a>
<a href="" class="texte">TEXTE</a>
</div>
<div class="vignette">
<a href="" class="titre">TITRE</a>
<a href="" class="picto"><img ...></a>
<a href="" class="image"><img ...></a>
<a href="" class="texte">TEXTE</a>
</div>
<div class="vignette">
<a href="" class="titre">TITRE</a>
<a href="" class="picto"><img ...></a>
<a href="" class="image"><img ...></a>
<a href="" class="texte">TEXTE</a>
</div>
<div class="vignette">
<a href="" class="titre">TITRE</a>
<a href="" class="picto"><img ...></a>
<a href="" class="image"><img ...></a>
<a href="" class="texte">TEXTE</a>
</div>
</div>
bonjour,

quand tu écris ceci


<div class="vignette">
<a href="" class="titre">TITRE</a>
<a href="" class="picto"><img ...></a>
<a href="" class="image"><img ...></a>
<a href="" class="texte">TEXTE</a>
</div>


à quoi correspondent tes liens, quatre directions différentes ?

Pour l'instant on ne comprend pas très bien.
Modifié par clb56 (10 Sep 2005 - 10:28)
Tu pourrais déjà faire un code XHTLM beaucoup plus sématique et parlant de la manière suivante :
Ensuite, sache qu'un lien vers la page sera beaucoup mieux qu'un long discours, car on verra tout de suite ou tu veux en venir, et donc les alternatives plus légères et parlantes.

<ul class="vignettes">
 <li>
  <a href="" class="titre">
   <h1>TITRE</h1>
   <img ...>
   <p>Texte</p>
  </a>
 </li>
 <li>
  <a href="" class="titre">
   <h1>TITRE</h1>
   <img ...>
   <p>Texte</p>
  </a>
 </li>
 <li>
  <a href="" class="titre">
   <h1>TITRE</h1>
   <img ...>
   <p>Texte</p>
  </a>
 </li>
 <li>
  <a href="" class="titre">
   <h1>TITRE</h1>
   <img ...>
   <p>Texte</p>
  </a>
 </li>
</ul>
Pour le côté sémantique, j'ai eu un souci :
Cette partie se trouve dans un conteneur #centre où la balise H1 a déjà été redéfinie en CSS.
Or quand je fais :

.vignettes h1 {
...
}

c'est ignoré ?
Je ne trouve pas ça très logique.
Attention Sylvain ton code n'est pas bon du tout, on ne peut pas ainsi mettre des balises de type block (<h1> <p>) dans des balises de type inline (<a> en l'occurence.)
Modifié par clb56 (10 Sep 2005 - 11:55)
Hum, je pensais qu'on pouvais mettre des block dans des block , ou alors ca remet en cause ce que j'ai appris Smiley confus

Si une balise est déclarée comme block , pourquoi ne pourrait-elle pas contenir des blocs?
Administrateur
Sylvain a écrit :
Si une balise est déclarée comme block , pourquoi ne pourrait-elle pas contenir des blocs?

Comme le dit clb56, une balise a un type au départ (bloc ou inline en général).
Les CSS (la propriété display) ne font que modifier sa structure apparente et les propriétés d'affichage qui en découlent, mais rappelle-toi que la structure d'un document est le code HTML et non les éventuelles mises en forme (CSS).

Pour répondre à ta question, nicolas.charlot, il faudrait vraiment un exemple concret plus visuel parce que ça ne me parle pas Smiley ohwell
Modifié par Raphael (10 Sep 2005 - 16:00)
Pages :
Sujet clos
Aller à