28172 sujets

CSS et mise en forme, CSS3

[Résolu] Colonnes

Bonjour !

Au sein d'une div "container" de 990px est disposé un ensemble de zone cliquable (5 par ligne) séparée par un espace à droite de 18px, soit au total : 5x180 + 4x18 = 972px

Ainsi, en fin de ligne, il reste un espace vide de 18px (990-972px).

J'aimerai que la 5ème zone de chaque ligne, soit collée à droite de la div "container" avec un espace identique entre chaque zone.

J'ai bien trouvé la solution de faire des colonnes avec des margin-left différents selon la numéro de colonne, mais je veux utiliser la formule au sein d'un cms ou la base de données alimentera automatiquement le nombre de zones cliquables.

Y'a t'il une solution simple à ce problème ? Faut-il utiliser des %, ul/li, display, javascript ?
D'avance, un grand merci Smiley cligne 


<html>
<head>
<style>
#container {width:990px; height:600px; background-color:#000}
.content a {width:180px; height:300px; background-color:#F00; margin-right:18px; margin-top:20px; float:left}
</style>
</head>

<body>

<div id="container">
<div class="content">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</div>

</body>
</html>

Modifié par webmc (24 Mar 2013 - 15:40)
Bonjour,

Avec un doctype html5, voici ce qu'on peut faire en css:

#container {width:990px; height:600px; background-color:#000;}
.content > a {width:180px; height:300px; background-color:#F00;}
.content > a:nth-child(-n+4) {float:left; margin-right:22.5px;}
.content > a:last-child {float:right; margin-right:0}

N.B.: le margin-right n'est plus de 18px dans ce cas évidemment (c'est mathématique...)
Smiley smile
Cela fonctionne sous Google Chrome, Firefox, Safari ...

Attention : ceci ne fonctionne pas sous IE8 et < IE8
Merci Iddsoft !
Effectivement, ça marche bien Smiley biggrin
Par contre, si l'on rajoute une ou plusieurs lignes <a href=""></a>, elle n’apparaît pas automatiquement en dessous ? Une idée ?
Bosse un peu là-dessus :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
#container {width:990px; height:600px; background-color:#000;}
.content1 > a, .content2 > a {width:180px; height:300px; background-color:#F00;}
.content1 > a:nth-child(-n+4), .content2 > a:nth-child(-n+4) {float:left; margin-right:22.5px;}
.content1 > a:nth-child(5), .content2 > a:nth-child(5) {float:right; margin-right:0}
.clear {clear:both;}
</style>
</head>
<body>
<div id="container">
	<div class="content1">
		<a href=""></a>
		<a href=""></a>
		<a href=""></a>
		<a href=""></a>
		<a href=""></a>
	</div>
	<div class="clear"></div>
	<div class="content2">
		<a href=""></a>
		<a href=""></a>
		<a href=""></a>
	</div>
</div>
</body>
</html>

Modifié par lddsoft (26 Mar 2013 - 17:26)
Bsoir,

et si on partait du principe que les <a> peuvent etre formater en inline-block (au lieu de float), il suffit alors de preciser un letter-spacing de 18px; (au lieu de bidouiller avec les marges) Smiley smile .

demo pour voir : http://dabblet.com/gist/5247411 si ça le fait.
++
Merci à vous deux !!!
lddsoft, ta seconde solution fonctionne bien, c'est parfait !
Seulement, le fait de devoir utiliser plusieurs div pose problème vis à vis de l'utilisation avec une base de données (pas de problème en gestion manuelle) et l'usage réservé aux seuls navigateurs exploitant html 5 ne m'enchante pas beaucoup.
Gc-nomade, jusqu'à preuve du contraire, ça correspond pleinement à ce que je souhaitais. Et, la démo en bonus, wouah énorme Smiley eek
Merci encore !!!
@gc-nomade

Effectivement, ta solution me plaît beaucoup aussi, +1 (même si le background sur le html fait un peu "tape-à-l'oeil" et que le #container ait rétréci de 2px) ! Smiley biggrin
Modifié par lddsoft (26 Mar 2013 - 23:06)
Sujet clos
Aller à