Template 3 blocs (conteneur + 2 à gauche + 1 à droite ) - Forum Alsacréations : CSS et Standards Web

Auteur
nono1980	# 16 May 2008 - 13:17:38
1 Posts	Bonjour je me présente, je suis débutant en CSS et j'avoue que j'attend le dernier moment avant de demander de l'aide sur un forum... cependant là je pête un peu une durite comme on dit. et je ne trouve pas de reponse à mon cas en particulier Tout d'abord je tiens à signaler que j'ai presque réussi sous firefox mais que c'est la cata sur Ie7 et Ie6 Alors voilà je tiens à réaliser une structure comme ceci: un DIV D conteneur une div A à gauche calé en haut une div B en bas du A et calé en bas une div C contenant le texte par conséquent la hauteur global de D depend de C voici mon css #d{ background-color:#003399; width:800px; position:absolute;} #a{ background-color:#990000; width:200px; height: 200px; } #b{ background-color:#FFFF00; width:200px; height: 350px; } #c{ background-color:#333; width:600px; float:left; margin-left:200px; height:800px; } et html <div id="d"> <div id="c"></div> <div id="a"></div> <div id="b"></div> </div> bien entendu je me moque des margin pour le moment et j'ai fixé des hauteur pour mieux debugger au fur et à mesure. pouvez vous m'aider? suis je sur la bonne voie? merci Modifié par nono1980 (16 May 2008 - 13:18)
1 Posts
Florent V.	# 16 May 2008 - 17:36:55
On va manger des chips. Modérateur 11976 Posts	Bonjour, nono1980 a écrit : suis je sur la bonne voie? Non. Il ne faut pas faire flotter div#c à gauche, vu que tu veux le placer à droite! Donc ce sera div#c {float: right;}, et pas de margin-left pour ce bloc. À partir de là, placer div#a devrait se faire tout simplement. Quant à div#b, est-ce que sa hauteur est fixe? Est-ce simplement un élément de décoration (auquel cas il faudra plutôt utiliser une image de fond sur div#d), ou bien un contenu avec notamment du texte? Si tu peux figer la hauteur de ce bloc, le placer sera simple: il faudra le positionner en absolu par rapport à son conteneur (div#d) lui-même positionné (en relatif plutôt qu'en absolu comme maintenant). Enfin, il faudra gérer deux choses: 1. donner un margin-bottom ou éventuellement padding-bottom à div#a, de hauteur équivalente au moins à celle de div#b; 2. gérer le dépassement des flottants (avec un overflow: hidden sur div#d par exemple). Lisez les specs! Et aussi: Ressources en intégration web (HTML et CSS)
On va manger des chips. Modérateur 11976 Posts
Prévenir un modérateur

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr