18073 sujets

Questions générales et questions de débutants

[résolu]Positionnement de 4 blocs

Bonjour à tous,

A la page suivante,

http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

il y a deux exemples : l'un permettant de mettre deux bocs l'un à côté de l'autre et un autre exemple permettant de mettre deux conteneurs l'un au dessus de l'autre.

Ce que je souhaiterais faire c'est un mix des deux à savoir 4 bloc dans un conteneur comme ça :

C C
C C

ça a l'air tout simple mais je n'arrive pas. Si quelqu'un pouvait m'aider ce serait très gentil car je galère vraiment beaucoup.
Modifié par marck5 (07 Jul 2005 - 21:13)
Salut,
une solution consiste à fixer la taille d'un conteneur global des 4 éléments, de fixer la largeur de chaque élément à la moitié de la largeur du conteneur et de passer le tout en float: left;

Sinon, tu scindes en 2 sous parties les 2 lignes de blocs, et tu passes le second en float: left;

enfin il y a 36 méthodes pour y arriver Smiley ohwell

Sinon, ça peut être un tableau si ton contenu correspond à un tableau, etc on en sait pas assez pour te répondre à 100%

C'est quoi ton contenu ? quel est le but de la manoeuvre ? (purement visuel, structurel, ...)

Wala, la balle est dans ton camps !
Okay, donc c'est pûrement visuel Smiley smile

Alors, à partir de là tu as comme je le disais, plusieurs méthodes.

La largeur de la page est-elle fixe ?
La largeur de chaque bloc est-elle fixe ?
Okay, donc allons y pour un essai Smiley langue

L'idée (si je reprend la structure du contenu de ton exemple) c'est d'avoir un conteneur général (genre le conteneur de la partie "contenu" de ta page), celui là tu lui colles une largeur fluide en pourcentage, disons 100% (tu mets ce que tu veux ^^).
Ensuite tu as autant de <div> que de bloc "C" dans ton "schéma", chacun d'eux contenant un titre de niveau <h*> pour le titre de la boite, et un <p> pour le texte (ou plus ou autre etc).

Ca c'est pour la partie HTML

Dans les CSS on a donc le bloc général à 100% (pour notre exemple), ensuite, tu colles une largeur de disons 50% à chacun de tes 4 conteneurs, tes 4 boites, donc là et finalement float: left; sur chacun d'entre eux et ça devrait rouler.
Ca c'est pour l'idée général, faut adapter à ce que tu veux exactement, mais le principe est le même.

C'est une des possibilités Smiley cligne
Sujet clos
Aller à