3 bloc côte à côte dans un bloc ?

Salut à tous,

J'arrive de ce tutoriel:
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

Et je voulais savoir si on pouvez mélanger les exercices, par exemple:
Trois blocs côte-à-côte avec un espace de séparation contenus dans un autre bloc ?

Voir même de pousser au maximum les possbilités du CSS avec un tuto
qui permettrait de poser côte à côte 2 blocs,
puis 20 px plus bas 2 autres blocs côte à côte le tout dans un bloc...

en fait je n'ai pas trés bien compris qu'est-ce qui fait qu'un bloc se place à côté ou en dessous d'un autre...
et ce que ça implique lorsqu'ils sont imbriqué...

Quelqu'un de pédagogue pourrait m'expliquer?
Modifié par Maroile (21 Nov 2006 - 13:06)

HTML :
<div class="conteneur">
	<div class="element"></div>
	<div class="element"></div>
	<div class="element"></div>
	<div class="element"></div>
</div>

CSS :
div.conteneur {
	overflow: hidden;
	width: 600px;
	background: yellow;
}
div.element {
	float: left;
	width: 280px;
	min-height: 100px;
	margin: 10px;
	background: royalblue;
}

Quelque chose comme ça ?

Oui,


Mais, dans ce cas les positions ne sont pas choisi...?

Je voudrais pouvoir dire
-l'élément0 est collé à gauche à 20px du bord top et du left
-l'élément1 est collé à gauche à 50px de l'élément0
-l'élément2 est collé à gauche à 30px en dessous de l'élément0
-l'élément3 est collé à droite

- et si c'est possible un texte entre les éléments 2 et 3 sur la même ligne, coller à droite à 10 px de l'élément3

Je commence en Css, autant que je sache avec quelle précision on peut travailler...

c'est pas faisable?

Maroile a écrit :
c'est pas faisable?

Si, en exploitant (suivant les besoins) les flottants (left et right), le positionnement relatif, et au besoin le positionnement absolu.

Donc oui, c'est tout à fait gérable.
Par contre, ça demande un petit peu de bouteille (même juste un tout petit peu), et les débutants ont du mal à réaliser très exactement ce qu'ils veulent. Donc si tu as un besoin concret et que tu ne sais pas par quel bout le prendre (flottants ? positionnement absolu ?), tu peux toujours demander de l'aide sur le forum, en disant :
- ce que tu souhaites (pour la mise en page, une maquette/un schéma, c'est l'idéal...) ;
- les solutions auxquelles tu as pensé, ou que tu as testé.

Maroile a écrit :
Je voudrais pouvoir dire
-l'élément0 est collé à gauche à 20px du bord top et du left
-l'élément1 est collé à gauche à 50px de l'élément0
-l'élément2 est collé à gauche à 30px en dessous de l'élément0
-l'élément3 est collé à droite

Suivant le design à réaliser, les solutions seront différentes, mais en gros s'il faut bien distinguer les différents éléments ça pourra se traduire ainsi :

<div class="conteneur">
	<div class="element" id="element1"></div>
	<div class="element" id="element2"></div>
	<div class="element" id="element3"></div>
	<div class="element" id="element4"></div>
</div>

La classe permettant d'attribuer un style de base unique, et les identifiants permettant de préciser la mise en forme et le positionnement de chaque élément.


Petit conseil en passant : si tu débutes avec les CSS, commence par des choses simples, et complexifie au fur et à mesure.

Merci Gourou.

Je n'ai pas vraiment un besoin concret, j'ai juste grand soif de curiosité.
En fait, je voulais compléter le tuto pour les suivants qui comme moi souhaiteraient en savoir un peu plus.

je vais essayé de le faire, et je reviendrais le mettre à disposition.