28220 sujets

CSS et mise en forme, CSS3

Salut,

Comment vous y prendriez-vous pour positionner les 4 blocs ci-dessous, suivant le contexte ?

Dans les 2 cas, les blocs forment un quadrillage : les 2 d'en haut sont à la même hauteur dans la page, les 2 d'en bas également, et ils forment des colonnes. Mais on ne connaît pas la hauteur de chaque bloc.

Cas 1 : lecture comme un livre : haut gauche -> haut droite -> bas gauche -> bas droite
upload/82-4blocs-cas1.png

Cas 2 : lecture comme un journal en colonnes : haut gauche -> bas gauche -> haut droite -> bas droite
upload/82-4blocs-cas2.png

Merci
Modifié par Marvin Le Rouge (26 Oct 2005 - 14:13)
En fait tout dépend du contenu de ces blocs. Y'a t-il une suite logique entre eux ou sont-ils complétement indépendants ?

Dans le premier cas (la suite logique), selon moi il vaudrait mieux avoir une lecture en colonne, car justement rapport aux journaux, cette mise en forme semble plus logique...

Après dans le second cas, ben c'est un peu comme on veut puisque l'ordre de lecture n'a aucune importance...

Voilà, en espérant t'avoir aidé...
Salut,

Les blocs sont indépendants, et ont une importance équivalente. En fait, je ne déciderai pas de l'ordre logique : il me sera fourni tel quel, et à moi de faire avec.

Ma question concernait plus la façon de pouvoir rendre ce positionnement en css.
Modifié par Marvin Le Rouge (23 Oct 2005 - 13:48)
Aguire a écrit :
Je vais peut-être me faire huer mais...
Pourquoi pas un bon vieux tableau ? Smiley sweatdrop


Le contenu en question n'ayant rien de tabulaire (aucun rapport en les données contenues dans 2 blocs d'une même ligne, ou entre 2 blocs d'une même colonne), tu vas peut-être te faire huer Smiley cligne
Salut !!

Je pense que le positionnement par colonnes n'est pas ce qu'il y a de mieux car étant donné que tes blocs commencent sur la même ligne horizontale, il faudrait déduire la différence de hauteur entre les deux bloc horizontaux de la premiére rangée pour la mettre en marge et ainsi aligner les blocs du bas sur la même ligne.

Donc le positionnement en horizontal avec 2 div en positonnement relatif, et à l'intérieur deux éléments soit en flottant, soit en absolute serait à mon avis le plus approprié.

Ce n'est que mon avis. Smiley cligne
Bonjour,
Prquoi pas :
<div style="background-color:#f00;width:300px;float: left;"><p style="height:200px;">...</p></div>
<div style="background-color:#0f0;width:300px;"><p style="height:220px;">...</p></div>
<div style="background-color:#00f;width:300px;[#ff0000]clear: both;[/#]float: left;"><p style="height:220px;">...</p></div>
<div style="background-color:#ff0;width:300px;"><p style="height:200px;">...</p></div>
L'enchaînement logique souhaité étant "lecture comme un livre, en Z", j'ai opté pour un groupement des blocs par ligne, avec le premier flottant à gauche.
Je clos