Aller au contenu

Contenu de DIV qui dépasse ?


wighie

Sujets conseillés

Bonjour,

J'ai un soucis avec ma template, je souhaite réaliser une structure simple sans tableau... Mon soucis c'est que avec le code ci-dessous, dès qu'un contenu est plus long que le div, il ne reste pas dans la "boite" mais déborde sans agrandir la hauteur du DIV.

Je me retrouve avec un contenu qui "flotte" en dehors de sa zone... ou est l'erreur ???

Voici le code html :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>[...]</head>
<body>
<div id="page">
 <div id="header">-- HEADER --</div>
 <div id="links"><p>-- LINKS --<br />-- LINKS --<br />-- LINKS --<br />-- LINKS --<br />-- LINKS --<br />-- LINKS --<br />-- LINKS --<br />-- LINKS --<br />-- LINKS --<br />-- LINKS --<br />-- LINKS --<br />-- LINKS --<br />-- LINKS --<br /></p></div>
 <div id="content">-- CONTENT --</div>
 <div id="footer">-- FOOTER --</div>
</div>
</body>
</html>

et la CSS :

* {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:rgb(0,0,0);
}

body  { font-family:Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; }


#page    { border:rgb(0,0,0) 1px solid; position: absolute; width: 767px; left: 50%; margin-left: -380px; background-color:#CCCCFF; }
#header  { border:rgb(0,0,0) 1px solid; height: 100px; background-color: #99CCCC; }
#content  { border:rgb(0,0,0) 1px solid; background-color:#9999CC; margin-left: 150px; }
#links  { border:rgb(0,0,0) 1px solid; position: absolute; left:0; width: 150px; }
#footer  { border:rgb(0,0,0) 1px solid; height: 30px; background-color: #99CC99; }

Merci d'avance ;)

Lien vers le commentaire
Partager sur d’autres sites

Hello,

Le positionnement absolu sort du flux. Le div parent n'a donc aucune emprise sur un contenu en absolu.

Je ne comprends pas trop l'utilité d'avoir choisi le positionnement absolu pour tes éléments. Il serait plus simple et plus logique de les laisser dans le flux normal.

Lien vers le commentaire
Partager sur d’autres sites

  • 1 month later...

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...