Aller au contenu

Sujets conseillés

Posté

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 ;)

Posté

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.

  • 1 month later...
Posté

Ok, je crois que j'ai saisie... Je vais faire les modifs...

Merci encore

Posté

Bonjour je pense que tu as regle ton problème, sinon supprime la position absolut du div link et mets un clear: both; au pied

Paul

Veuillez vous connecter pour commenter

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



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