Commmint Posté 22 Février 2005 Partager Posté 22 Février 2005 (modifié) Bonjour à tous ! Voila une construction de page en CSS qui fonctionne et accueille correctement du texte dans le DIV "contenu" jusqu'à ce que je décide de définir deux colonnes de texte (div para). Le footer se fait bouffer. Comment faire pour continuer à imbriquer des DIV dans le DIV contenu sans casser l'architecture ? J'hésite à modifier le DIV conteneur, ou alors le footer, ou alors... Merci d'avance !!! <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Document sans titre</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css"><!--#global { position: absolute; left: 20px; top: 20px; width: 600px; background-color: #eeeeee;}#menu { width: 200px; position: absolute; background-color: #ff8800;}#header { width: 100%; background-color: #336600; height: 100px;}#contenu { background-color: #ff7700; margin-left: 200px; padding: 10px;}#footer { width: 100%; background-color: #225599; height: 50px;}#para { width: 170px; float: left; margin-right: 15px; font-family: Tahoma; font-size: 11px; line-height: 15px;}--></style></head><body><div id="global"> <div id="header">salut le header</div> <div id="menu"> <p>salut le menu</p> <p>et les autres trucs de ouf</p> <p>et hop</p> </div> <div id="contenu"> <div id="para"> Lorem ipsum ea audire disputando ullamcorper mei, vim no magna aliquid equidem. Fastidii pericula intellegebat ad eum, eos quem graeci instructior ei. Vel percipit molestiae ut, sed ne quaeque assueverit, duo at novum consulatu instructior. Ad ancillae quaerendum mei, eum ad illud antiopam scripserit. Cum idque commune consequat eu, tota quidam cetero qui at, luptatum adolescens dissentias eos in. </div> <div id="para"> Lorem ipsum ea audire disputando ullamcorper mei, vim no magna aliquid equidem. Fastidii pericula intellegebat ad eum, eos quem graeci instructior ei. Vel percipit molestiae ut, sed ne quaeque assueverit, duo at novum consulatu instructior. Ad ancillae quaerendum mei, eum ad illud antiopam scripserit. Cum idque commune consequat eu, tota quidam cetero qui at, luptatum adolescens dissentias eos in. Ad novum equidem quo. Has ex congue ridens, te delicata necessitatibus nec. Quodsi discere delicatissimi no eos, eu sed altera malorum legendos, agam reprehendunt pro in. Dico legimus democritum cum et, ludus temporibus ius in. Usu te liber omnium percipit, ad sea fugit ceteros. Eos ad virtute invidunt omittantur. </div> </div> <div id="footer">salut le footer</div></div></body></html> Modifié 22 Février 2005 par Commmint Lien vers le commentaire Partager sur d’autres sites More sharing options...
Commmint Posté 22 Février 2005 Auteur Partager Posté 22 Février 2005 "clear:both;" sur le DIV footer fait l'affaire en terme de placement, mais le fond du DIV contenu est désormais tronqué. Lien vers le commentaire Partager sur d’autres sites More sharing options...
K-ZimiR Posté 22 Février 2005 Partager Posté 22 Février 2005 Bonjour, d'emblée : tu utilises 2x <div id="para"> L'élément id doit être unique sinon il faut utiliser une classe. J'ai noté aussi des différences de positionnement entre IE et FF. Je me penche sur le problème Lien vers le commentaire Partager sur d’autres sites More sharing options...
K-ZimiR Posté 22 Février 2005 Partager Posté 22 Février 2005 Bon, voilà Essaye voir ça : <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Document sans titre</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css"> <!-- #global { position: absolute; left: 20px; top: 20px; width: 600px; background-color: #eeeeee; } #menu { float:left; width: 200px; background-color: #ff8800; } #header { width: 100%; background-color: #336600; height: 100px; } #contenu { margin-left: 200px; padding: 10px; } #footer { width: 100%; background-color: #225599; height: 50px; clear: both; } .para { width: 170px; float: left; margin-right: 15px; font-family: Tahoma; font-size: 11px; line-height: 15px; } --></style></head><body> <div id="global"> <div id="header">salut le header</div> <div id="menu"> <p>salut le menu</p> <p>et les autres trucs de ouf</p> <p>et hop</p> </div> <div id="contenu"> <div class="para"> Lorem ipsum ea audire disputando ullamcorper mei, vim no magna aliquid equidem. Fastidii pericula intellegebat ad eum, eos quem graeci instructior ei. Vel percipit molestiae ut, sed ne quaeque assueverit, duo at novum consulatu instructior. Ad ancillae quaerendum mei, eum ad illud antiopam scripserit. Cum idque commune consequat eu, tota quidam cetero qui at, luptatum adolescens dissentias eos in. </div> <div class="para"> Lorem ipsum ea audire disputando ullamcorper mei, vim no magna aliquid equidem. Fastidii pericula intellegebat ad eum, eos quem graeci instructior ei. Vel percipit molestiae ut, sed ne quaeque assueverit, duo at novum consulatu instructior. Ad ancillae quaerendum mei, eum ad illud antiopam scripserit. Cum idque commune consequat eu, tota quidam cetero qui at, luptatum adolescens dissentias eos in. Ad novum equidem quo. Has ex congue ridens, te delicata necessitatibus nec. Quodsi discere delicatissimi no eos, eu sed altera malorum legendos, agam reprehendunt pro in. Dico legimus democritum cum et, ludus temporibus ius in. Usu te liber omnium percipit, ad sea fugit ceteros. Eos ad virtute invidunt omittantur. </div> </div> <div id="footer">salut le footer</div> </div></body></html> Lien vers le commentaire Partager sur d’autres sites More sharing options...
Commmint Posté 22 Février 2005 Auteur Partager Posté 22 Février 2005 (modifié) SI SI c'est bon, MERCI !!! par contre la marge du DIV contenu n'est pas respectée Je cherche encore ! ah ben non en fait Modifié 22 Février 2005 par Commmint Lien vers le commentaire Partager sur d’autres sites More sharing options...
Antoine Cailliau Posté 22 Février 2005 Partager Posté 22 Février 2005 C'est un truc comme ça que tu veux ? http://openweb.eu.org/articles/initiation_...es/annexe3.html je regarderai ton code quand je serai sur Mon pc :s Lien vers le commentaire Partager sur d’autres sites More sharing options...
xpatval Posté 22 Février 2005 Partager Posté 22 Février 2005 Si c'est de 2 div // à l'intérieur d'un div conteneur (centré dans la page) dont tu parles, j'ai résolu le problème de la sorte: [U]Le maitre des conteneurs !![/U]#cont {position: absolute;width:100%;padding:0;margin:0;[U]Le central[/U]#cent {min-height: 400px;margin-left: 150px;margin-right: 150px;}[U]le div gauche[/U]#gauche { float: left;left: 5px; width: 47%; <=== PAS de 50% (merci le hub pour l'astuce)}[U]Le droit[/U]#droit { margin-left: 5px;float: right;width: 50%;} Si ça peut t'aider... xpatval Lien vers le commentaire Partager sur d’autres sites More sharing options...
Commmint Posté 23 Février 2005 Auteur Partager Posté 23 Février 2005 (modifié) J'ai pas trop de problèmes pour créer des colonnes dans un DIV ABSOLUT, le problèmes est que ce DIV conteneur est lui même intégré à une architecture plus complexe. je vous fourni le code de la page réelle dans la matinée ! merci ps: le DIV conteneur est fixé en largeur, et ce DIV conteneur doit pouvoir pousser un DIV footer vers le bas en fonction de la hauteur des colonnes !!! Modifié 23 Février 2005 par Commmint Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant