28111 sujets

CSS et mise en forme, CSS3

[resolu]Grand carre contenant plusieurs carré [css]

Salut,

je te conseille d'utiliser un <ul> avec des <li> et de leur donner des proportions en css.
Après pour les couleurs tu vas devoir t'amuser avec des class je pense.
salut...

Tout dépend à quoi ça va servir après Smiley smile

sinon il y a la solution des div avec des id... dans un grand div contener...

avantages ??

changement de couleurs en js via les ids des divs Smiley smile
width et height très bien gérés par les divs
l'utilisation des float (compatible avec tout les navigateurs) plutot que des display inline..(hack pour ie)

masi les ul li c'est valable aussi Smiley smile tout dépend de l'utilisation finale....
Entièrement d’accord avec pchlj mais à la bourrin compatible ie7 ff8


<!DOCTYPE html>

<html lang="fr">
<head>
  <meta charset="UTF-8">

  <title>Carré</title>
    <link rel="stylesheet" href="carre.css">
</head>
<body>

<div class="carre"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

</body>
</html>



div.carre div {
	background-color:#fe8282
}
div.carre div~div {
	background-color:#530000
}
div.carre div~div~div {
	background-color:#fe2020
}
div.carre div~div~div~div {
	background-color:#b80000
}
div.carre div~div~div~div~div {
	background-color:#fe5c5c
}
div.carre div~div~div~div~div~div {
	background-color:#db0000
}
div.carre div~div~div~div~div~div~div {
	background-color:#6b0000
}
div.carre div~div~div~div~div~div~div~div {
	background-color:#fe3b3b
}
div.carre div~div~div~div~div~div~div~div~div {
	background-color:#fe4c4c
}

div.carre {
	width:300px;
	height:300px;
	border:solid 1px black
}

div.carre div {
	float:left;
	width:33.33%;
	height:100px
}
Hello.

La première question à se poser, c'est la finalité de la chose.
Certes, c'est réalisable en CSS, mais si c'est une simple déco qui se paye au prix d'une bouillie de div, autant utiliser une image de background.
nux02160 a écrit :
Bonjour je voudrais savoir comment faire cela le plus simplement possible en cs... autour je voudrais mettre un border de 1 px solid


div{
background: url('images/mosaique.jpg') no repeat;
border:1px solid #ffff;/* mettre la couleur voulue à la place*/
 }

Smiley cligne
Modifié par jmlapam (06 Dec 2011 - 16:26)
Merci a tous je pensais pas avoir autant de réponse déjà sinon le but c'est de coupler cela a JavaScript j'ai déjà fait un petit truc mais je voulais voir si quelqu'un faisait cela peut être lus simplement.Un grand merci a vous

bien vue jmlapam Smiley langue Smiley langue
Modifié par nux02160 (06 Dec 2011 - 16:36)
Administrateur
Bonjour,

en utilisant le moins possible d'éléments : http://jsfiddle.net/7NzKk/
Ça utilise bien entendu :before et :after autant que possible, flottants sinon la colonne centrale a pas de dimension fixable.
Pour les dimensions, le conteneur a une largeur fixe et les carrés une largeur de 33% ou 33.33% (reste 33.33 ou 34% pour le centre), ça permet de changer simplement cette largeur en un seul endroit.
Administrateur
adrien881 a écrit :

div.carre div~div~div~div~div~div {
	background-color:#db0000
}
div.carre div~div~div~div~div~div~div {
	background-color:#6b0000
}

J'allais faire remarquer que si tu cibles les carrés un par un et qu'ils sont du même type (division), autant utiliser + plutôt que ~ parce que ce serait plus performant mais je découvre en lisant http://www.quirksmode.org/css/contents.html que ~ pose moins de problèmes sur IE7 et 8 ? Ou alors ppk a pas testé ce sélecteur tilde autant que l'autre ?
Sujet clos
Aller à