Bonjour,
Probablement que ce topic intéressera les plus pointus d'entre vous. Un ami m'a posé une question hier soir à une problématique de mise en page qu'il rencontre, pour voir si j'avais pas une piste de réflexion à lui donner... Ce qu'il veut faire est assez simple à comprendre, mais après y avoir pensé la journée et à avoir discuté avec des collègues, rien n'y fait, je ne sais pas comment arriver au rendu final qu'il désire.
Code de base:
8 rectangles rouges de taille identique (Height1) qui se suivent. Chaque bloque a un numéro unique, ceci afin de facilité mes explications.
Etape suivante, modifiez la class du deuxième block seulement. "block_height1" devient "block_height2". Pour les flemmards, voici la balise body au complet :
En affichant le résultat vous aurez probablement déjà compris la question que je vais vous poser. Entre les rectangles N° 1, 2 et 7 il y a un magnifique trou béant car le rectangle N° 5, au lieu de revenir à l’extrême gauche du conteneur parent se place à la droite du conteneur N°2 puisqu'il le rencontre d'abord.
Ceux qui pensaient suggérer de positionner en absolute le bloque 5, auraient raison, mais uniquement pour ce cas de figure... L'objectif est que la solution fonctionne également si l'on change le style des autres bloques (par exemple si vous changez la classe du bloque 4 en "block_Height2").
D'avance merci à vous tous d'avoir pris le temps de lire ce petit casse-tête. Peut-être n'a-t-on pas choisis le bon angle pour résoudre le problème... donc si vous avez des articles (anglais ou français, c'est égale) qui pourraient aider, on est preneur.
Bien à vous
Greg
Modifié par g.berclaz (17 Jan 2013 - 17:49)
Probablement que ce topic intéressera les plus pointus d'entre vous. Un ami m'a posé une question hier soir à une problématique de mise en page qu'il rencontre, pour voir si j'avais pas une piste de réflexion à lui donner... Ce qu'il veut faire est assez simple à comprendre, mais après y avoir pensé la journée et à avoir discuté avec des collègues, rien n'y fait, je ne sais pas comment arriver au rendu final qu'il désire.
Code de base:
8 rectangles rouges de taille identique (Height1) qui se suivent. Chaque bloque a un numéro unique, ceci afin de facilité mes explications.
<!DOCTYPE html>
<html>
<head>
<title>Test positionnement</title>
<style>
html, body {
padding: 0;
margin: 0;
}
#conteneur-principal {
background-color: #CCCCCC;
margin: 2%;
position:relative;
}
.block_Height1,
.block_Height2 {
margin: 20px 2%;
background-color: #990000;
width: 21%;
height: 120px;
display: inline-block;
text-align: center;
font-size: 40px;
color: white;
float: left;
}
div.block_Height2 {
height: 280px;
}
</style>
</head>
<body>
<div id="conteneur-principal">
<div class="block_Height1">1</div><div class="block_Height1">2</div><div class="block_Height1">3</div><div class="block_Height1">4</div><div class="block_Height1">5</div><div class="block_Height1">6</div><div class="block_Height1">7</div><div class="block_Height1">8</div>
<br style="clear: both;" />
</div>
</body>
</html>Etape suivante, modifiez la class du deuxième block seulement. "block_height1" devient "block_height2". Pour les flemmards, voici la balise body au complet :
<div id="conteneur-principal">
<div class="block_Height1">1</div><div class="block_Height2">2</div><div class="block_Height1">3</div><div class="block_Height1">4</div><div class="block_Height1">5</div><div class="block_Height1">6</div><div class="block_Height1">7</div><div class="block_Height1">8</div>
<br style="clear: both;" />
</div>En affichant le résultat vous aurez probablement déjà compris la question que je vais vous poser. Entre les rectangles N° 1, 2 et 7 il y a un magnifique trou béant car le rectangle N° 5, au lieu de revenir à l’extrême gauche du conteneur parent se place à la droite du conteneur N°2 puisqu'il le rencontre d'abord.
Ceux qui pensaient suggérer de positionner en absolute le bloque 5, auraient raison, mais uniquement pour ce cas de figure... L'objectif est que la solution fonctionne également si l'on change le style des autres bloques (par exemple si vous changez la classe du bloque 4 en "block_Height2").
D'avance merci à vous tous d'avoir pris le temps de lire ce petit casse-tête. Peut-être n'a-t-on pas choisis le bon angle pour résoudre le problème... donc si vous avez des articles (anglais ou français, c'est égale) qui pourraient aider, on est preneur.
Bien à vous
Greg
Modifié par g.berclaz (17 Jan 2013 - 17:49)
