28173 sujets

CSS et mise en forme, CSS3

Div imbriquées : largeurs fixes + largeur moins fixes

Bonjour,

Mes permiers pas dans la présentation d'une page avec DIV.
Voici ce que je souhaite obtenir :
upload/14928-homepagedi.jpg
Avec les contraintes suivantes :
div 1 : largeur = 100% de la page
hauteur = 80px (fixe)
div 2 : largeur = 120px (fixe)
hauteur = remplir jusqu'en bas de la page
div 3 : largeur = remplir jusqu'au bord droit de la page
hauteur = 17px (fixe)
div 6 : largeur = 100px (fixe)
hauteur = remplir en fonction du contenu
div 4 et 5 : se partagent la largeur restante à raison de :
div 4 : 60% du total de largeur restante
div 5 : 40% du total de largeur restante

Pourriez-vous me guider pour réaliser mes div et mes styles css liés à ces div ?

Je cafouille. Smiley decu

Merci

Nathalie Smiley confused

Ajout au message :

Voici mon code:
<HTML>
<head>
<style type="text/css">
div#un {
	height: 80px;
	background-color:#CC3366;
	clear: both;	
}
div#deux {
	width: 120px;
	background-color:#00FF66;
	float:left;
}
div#trois {
	clear:right;
	height:17px;
	background-color:#CCFF66;
	text-align:right;
}
div#six {
	width: 100px;
	background-color:#0033FF;
	float:right;
}
div#quatre {
	/*width: 60%; --> marche pas, prend 60 % de la largeur totale et pas de la largeur restante disponible grrr */  
	background-color:#FF0000;
	float:left;
}
div#cinq {
	/*width: 40%; --> marche pas*/
	background-color:#FFFF00;
	float:right;
}
</style>
</head>
<BODY>
<div id="un">1</div>
<div id="deux">2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<div id="trois">3</div>
<div id="six">6<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<div id="quatre">4<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<div id="cinq">5</div>
</BODY>
</HTML>

Modifié par Zoupine (28 Nov 2007 - 12:49)
Je me réponds à moi-même ... cela peut peut-être aider quelqu'un ...

Voici mon nouveau code :


<HTML>
<head>
<style type="text/css">
div#un {
	height: 80px;
	background-color:#CC3366;
	clear: both;	
}
div#deux {
	width: 120px;
	background-color:#00FF66;
	float:left;
}
div#trois {
	clear:right;
	height:17px;
	background-color:#CCFF66;
	text-align:right;
}
div#six {
	width: 100px;
	background-color:#0033FF;
	float:right;
}
div#quatre { 
	padding-top:103px ;/* div1 + div3 + 5px */
	padding-left:125px;/* div 2 + 5px */
	background-color:#FF0000;
	float:left;
	left:125px;
	min-width:400px;
	 /* IE Dynamic Expression to set the width */
    width:expression(document.body.clientWidth < 550 ? "400px" : "40%" );
/* pas 40% du restant mais 40% de la page ... estimation à la louche */

}
div#cinq {
	/*width: 30%;*/
	padding-top:103px ;/* div1 + div3 + 5px */
	padding-right:105px ;/* div1 + div3 + 5px */
	background-color:#FFFF00;
	right:105px;
}
</style>
</head>
<BODY>
<div id="un">1</div>
<div id="deux">2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<div id="trois">3</div>
<div id="six">6<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<div id="quatre">4<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<div id="cinq">5</div>
</BODY>
</HTML>


Cela ne résout pas mon problème 60%-40% pour mes div 4 & 5 mais au moins, à l'affichage, ça passe déjà mieux.

Si quelqu'un trouve une solution à mon problème 60-40%, je suis preneuse Smiley langue !

Je poursuis mes investigations ...

Nathalie
Modifié par Zoupine (28 Nov 2007 - 13:38)
Salut,

En général je ne m'attarde pas sur les posts sur lesquels il s'agit de faire le travail pour les autres, mais je vois que tu cherches malgré tout, et puis j'ai pris çà comme un exercice.

Voilà ce que je ferais. A noter que les colonnes de même longueur vont poser problème pour un design très compliqué, à cause des colonne de largeurs fluides.

Voilà la page (css inclus dans l'html) :
http://mikachudesign.free.fr/divers/essai.html

En espérant que cela puisse te renseigner un peu sur la manière de procéder. Elle n'est pas forcément idéale, car il y a certainement plusieurs manières d'y parvenir, mais voilà comment j'aurais fait.
Merci beaucoup Mikachu. Smiley smile

Je me disais aussi qu'il fallait sûrement passer par des DIV imbriqués ... d'où le titre de mon sujet d'ailleurs ... mais j'avais essayé dans tous les sens, ça ne marchait pas.

Merci pour ton aide. Je vais comparer les 2 solutions (la mienne et la tienne) et voir celle qui me convient le mieux !

A+

Nathalie
Sujet clos
Aller à