Posez votre question Signaler

Hauteur d'une div [Résolu]

marsouin - Dernière réponse le 25 sept. 2008 à 22:05
bonjour à tous,
j'ai créé une div avec une couleur de fond. Je lui donne l'attribut visible. Lorsque je remplis ma div de texte, le texte est bien visible si je dépasse la taille de la div, mais la couleur de fond ne s'agrandit pas. Auriez-vous une solution ? Je suppose que ce n'est pas grand chose, mais je n'arrive pas à trouver.
Merci d'avance.
mon code :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:283px;
top:56px;
width:277px;
height:74px;
z-index:1;
background-color: #993399;
overflow: visible;
}
-->
</style>
</head>
<body>
<div id="apDiv1">ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte </div>
</body>
</html>
Lire la suite 

Hauteur d'une div »

19 réponses
Réponse
+3
moins plus
Ah oui, j'ai oublié de te dire : après tes deux div en flottant, il faut annuler l'effet de flottant, afin que le bloc container s'agrandisse normalement.

Dans ton code, il faut ajouter :

<div id="contenant">
<div id="txt1"> ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 </div>
<div id="txt2">ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 </div>
<br class="clear" />
</div>

Et dans tes styles :

.clear {
clear:left;
}


Ainsi, le problème devrait disparaître.
Ajouter un commentaire
Réponse
+1
moins plus
Bonsoir Marsoin !

J'ai vu que tu avais mis une hauteur fixe sur ton div, et un overflow:visible, ce qui fait que le contenu peut sortir du contenant (le texte sort de ton div), sans agrandir ton div, qui a une hauteur fixe. Donc la couleur de fond ne suit pas le texte forcément ! :) Ce que tu peux faire, c'est mettre :

#apDiv1 {
position:absolute;
left:283px;
top:56px;
width:277px;
min-height:74px;
z-index:1;
background-color: #993399;
}

la propriété min-height, comme son nom l'indique, est une hauteur minimale pour ton div, mais peut être agrandie par ton contenu. Ainsi, pas de soucis, ton div fera au minimum 74 pixels de haut, mais pourra s'agrandir. Cette propriété min-height ne marche pas sous Internet Explorer 6 et inférieur, ces navigateurs n'étant pas aux normes du Web... Du coup ton overflow est inutile... Pour ces navigateurs vieillissants, si tu tiens vraiment à les prendre en charge, je te recommande l'utilisation de JavaScript. Voici un lien : http://forum.alsacreations.com/...

Ca devrail aller normalement :)
Ajouter un commentaire
Réponse
+0
moins plus
ok merci. Effectivement c'est impeccable. Une autre question : il se trouve que mon div est imbriqué dans un autre div. Y a-t-il un moyen pour que le contenant s'agrandisse lui aussi ?
Ajouter un commentaire
Réponse
+0
moins plus
voici mon code :


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:0px;
top:5px;
width:277px;
min-height:74px;
z-index:2;
background-color: #993399;
overflow: visible;
}
#contenant {
position:absolute;
left:253px;
top:10px;
width:422px;
height:103px;
z-index:1;
background-color: #0099FF;
}
-->
</style>
</head>

<body>

<div id="contenant">
<div id="apDiv1">ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte </div>
</div>
</body>
</html>
Fenrir - 24 sept. 2008 à 20:06
Autant pour moi, j'ai remis un overflow:visible, à retirer... ;)
Ajouter un commentaire
Réponse
+0
moins plus
De rien ! :)

Alors pour répondre à ta question, peut être n'as-tu pas mis tout ton code source, mais il manque la balise <html> au début de ton code...

En fait, le problème majeur vient du fait que tu emploies le positionnement absolu partout : le positionnement absolu, contrairement en positionnement en relatif, rend chaque élément indépendant les uns par rapport aux autres : ainsi, la hauteur de ton contenu ne peut pas modifier la hauteur de ton contenant.

Je te recommandes de mettre :

<style type="text/css">
<!--
#contenant {
position:absolute;
left:253px;
top:10px;
width:422px;
min-height:103px;
z-index:1;
background-color: #0099FF;
}
#apDiv1 {
position:relative;
margin:5px 0 0 0;
width:277px;
min-height:74px;
z-index:2;
background-color: #993399;
overflow: visible;
}
-->
</style>

Explication :
- ton apDiv1 agira sur les dimensions de ton conteneur, car il est maintenant positionné en relatif. Il comporte une marge de 5 pixels en haut, ce qui équivaut au top:5px;.
- ton conteneur a maintenant une hauteur minimale, comme ton <div> à l'intérieur, et s'agrandira proportionnellement à ton contenu.

En fait, pourquoi as-tu mis des z-index ? le div à l'intérieur de l'autre sera forcément au-dessus dans ce cas...

Dis-moi si ça fonctionne, mais le problème pour moi vient à coup sûr du positionnement en absolu (par défaut, il est plus pratique de positionner en relatif), et d'une hauteur fixe dans ton conteneur, à la place d'un min-height...

;)
Ajouter un commentaire
Réponse
+0
moins plus
d'accord... merci beaucoup.
Ca fonctionne très bien, mais j'ai encore un nouveau petit soucis : si je mets au calque apdiv1 un top: 10px par exemple, le apdiv1 dépasse de 10 pixels en bas du contenant. Une solution ?

Merci pour ces réponses rapides, très bien expliquées en plus... ne connaissant pas l'attribut min-height, je n'aurais jamais trouvé seul !

PS : effectivement, les z-index n'ont aucune utilité. C'est juste une erreur de manip' en écrivant cet exemple.
Ajouter un commentaire
Réponse
+0
moins plus
Oui, je te conseilles d'utiliser des margin plutôt que des top ou left, lorsque tu es en position relative. les top, left, right et bottom sont plus utilisés en position absolue...

En fait, le top que tu mets, fait ressortir ton bloc, le décale, alors qu'une marge ne va pas faire dépasser ton contenu en bas du contenant.

Pour avoir l'équivalent de ton top:10px sans les inconvénients, je te conseilles de mettre margin:10px 0 0 0; (en fait, cette manière d'écrire signifie : marge de 10 px en haut, 0 à droite, zéro en bas, zéro à gauche. Dans le sens des aiguilles d'une montre). Au fait, j'avais fait une erreur dans mon précédent mail, j'avais laissé un overflow:visible, qui est à retirer...

Normalement ça devrait le faire.

De rein pour les explications, c'est avec plaisir :)
Ajouter un commentaire
Réponse
+0
moins plus
Euh, autant pour moi, ne tiens pas compte de mon précédent message, j'avais mal compris un truc. Je réfléchis, je te tiens au courant dès que possible.
Ajouter un commentaire
Réponse
+0
moins plus
ben pourtant, le truc des marges fonctionne...
Ajouter un commentaire
Réponse
+0
moins plus
Oui, c'est ça : je te recommandes d'utiliser des marges pour apdiv1, plutôt que un top:10px; (mon précédent mail était bon, autant pour moi). Donc pour apdiv1 :

#apDiv1 {
position:relative;
margin:10px 0 0 0;
width:277px;
min-height:74px;
background:#993399;
}

Donc, marge de 10 pixels en haut. Comme ça, il se décalera de 10 pixels du haut de ton conteneur, sans dépasser en bas de 10 pixels...

Et en haut de ton fichier html, avant la balise <html>, je te recommandes d'utiliser un doctype (il précise quelle norme html utiliser : transitionnel ou strict) :

Par défaut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
+ la suite

ou :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
+la suite

Plus d'infos ici : http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

Bonne chance !
Ajouter un commentaire
Réponse
+0
moins plus
oui, j'ai effectivement
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
au début. Je fais mon site avec dreamweaver, alors il fait tout ça automatiquement. J'avais raccourcis le code pour que ce soit plus pratique.

Merci beaucoup pour tous ces renseignements.
Ajouter un commentaire
Réponse
+0
moins plus
De rien, bonne éclate à toi pour ton site ;)
marsouin - 25 sept. 2008 à 19:46
personne n'aurait une solution pour moi ?
Ajouter un commentaire
Réponse
+0
moins plus
Désolé, j'ai encore un problème !

Je veux maintenant mettre dans mon contenant deux div côte à côte, toujours avec les mêmes fonctions. Je ne peux les mettre que l'un en dessous de l'autre. Je suppose qu'il y a un problème avec l'attribut relative, mais je ne vois pas comment le résoudre.

le code :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#contenant {
margin-left: auto;
margin-right: auto;
top:0px;
width:900px;
min-height:700px;
z-index:1;
background-color: #00CC00;
overflow: visible;
}
#txt1 {
position:relative;
left: 10px;
margin:50px 0 30px 0;
width:345px;
min-height:293px;
z-index:2;
background-color: #006600;
overflow: visible;
}
#txt2 {
position: relative;
left : 400px;
margin:0px 0 30px 0;
width:345px;
min-height:293px;
z-index:3;
background-color: #006600;
overflow: visible;
}
-->
</style>
</head>

<body>


<div id="contenant">
<div id="txt1"> ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 </div>
<div id="txt2">ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 </div>
</div>
</body>
</html>
Ajouter un commentaire
Réponse
+0
moins plus
Bonsoir Marsouin,

Déjà, je pense que tu peux mettre :

<style type="text/css">
<!--
body {
margin:0;
padding:0;
}

#contenant {
position:relative;
margin:0 auto;
width:900px;
min-height:700px;
background:#00CC00;
}

#txt1 {
position:relative;
float:left;
margin:0 0 30px 10px;
width:345px;
min-height:293px;
background:#006600;
}

#txt2 {
position:relative;
float:left;
margin:0px 0 30px 0;
width:345px;
min-height:293px;
background:#006600;
}
-->
</style>

Body : suppressions des margin et padding, pour avoir un affichage plus propre.

Le reste : Ensuite, par défaut, les div dans le même contenant vont l'un en dessous de l'autre. L'attribut float fait en sorte que les deux div vont l'un à côté de l'autre. J'ai testé, et je n'ai pas de problème, deux colonnes se créent.

Si j'ai bien compris ta question, ça devrait maintenant fonctionner.

Bonne chance pour la suite !
Ajouter un commentaire
Réponse
+0
moins plus
Effectivement ça fonctionne.

Par contre, le calque contenant ne s'agrandit plus, je ne bénéficie donc plus de ma couleur de fond ???
Ajouter un commentaire
Réponse
+0
moins plus
Tout est ok !

Un grand merci. Je n'y serais jamais parvenu sans toi...

Au risque d'abuser, si tu es aussi bon avec le java qu'avec les css, j'ai ouvert un autre fil là :
http://www.commentcamarche.net/forum/affich 8586363 phrase aleatoire en java
Ajouter un commentaire
Réponse
+0
moins plus
De rien Marsouin, c'était avec plaisir ! Pour le JavaScript, je vais regarder si je peux, mais je ne te garantis rien, car je suis pas super doué dans ce langage et la programmation...

Si tes questions sont résolues sur ce post, penses bien à le mettre en résolu ! ;)

Bonne chance !
Ajouter un commentaire
Ce document intitulé « hauteur d'une div » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook