Bonjour à tous !
Je suis débutant en CSS et cherche à réaliser un layout afin d'entamer la
conception de mes propres squelettes. Le design que je recherche est le
suivant:
+---------------------------------------------------------------------------
-+
| Chapeau (1)
|
|
|
|
|
+---------------------------------------------------------------------------
-+
+---------------------------------------------------------------------------
-+
| Bannière (2)
|
|
|
+---------------------------------------------------------------------------
-+
+----------------+
+---------------------------------------------------------+
| Menu (3) | | Contenu (4)
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
+----------------+ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
+---------------------------------------------------------+
+---------------------------------------------------------------------------
-+
| News externes (5)
|
|
|
+---------------------------------------------------------------------------
-+
+---------------------------------------------------------------------------
-+
| Pied de page (6)
|
|
|
+---------------------------------------------------------------------------
-+
J'ai donc créé une feuille de style où j'utilise les DIV avec:
1- positionnement absolu
2- positionnement absolu, en précisant top/left
3- positionnement absolu, en précisant top/left + largeur de 25%
4- positionnement relatif, avec une margin gauche de 28%
5- positionnement relatif, largeur = 100%, margin-top: 70px
6- idem, sauf margin-top: 10px
C'est là que ca coince : comment faire en sorte que les deux derniers
containers soient toujours positionnés sous le + haut de 3 et 4 ? En effet,
si le texte présent dans le menu augmente, je finis par constater un
chevauchement entre le container "menu" et le container "news externes". Par
contre, si le texte de "contenu" augmente, le container "news.." reste
correctement positionné sous la dernière ligne de "contenu"..
Question subsidiaire: j'ai été obligé de mettre margin-top: 70px pour le
container 5, mais sans vraiment comprendre pourquoi.. Pour moi, il faudrait
mettre margin-top: 10px pour rester 10 px en dessous de la dernière ligne de
"contenu"..
Merci de votre aide !
Jean-Luc GARNIER