Hauteur d'une div
Résolu/Fermé
A voir également:
- Hauteur d'une div
- Div c++ - Télécharger - Langages
- Hauteur de ligne excel en cm - Forum Excel
- Remplacer #div/0 par vide ✓ - Forum Excel
- Itinéraire routier avec hauteur de pont ✓ - Forum Logiciels
- Itineraire poids lourd ✓ - Forum Logiciels
17 réponses
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.
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.
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/faq/faq-81-Min-width-max-width-min-height-et-max-height-sur-Internet-Explorer.html
Ca devrail aller normalement :)
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/faq/faq-81-Min-width-max-width-min-height-et-max-height-sur-Internet-Explorer.html
Ca devrail aller normalement :)
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 !
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 !
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 ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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>
<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>
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...
;)
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...
;)
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.
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.
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 :)
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 :)
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.
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 !
#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 !
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.
<!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.
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>
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>
Effectivement ça fonctionne.
Par contre, le calque contenant ne s'agrandit plus, je ne bénéficie donc plus de ma couleur de fond ???
Par contre, le calque contenant ne s'agrandit plus, je ne bénéficie donc plus de ma couleur de fond ???
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
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