Dimensionnement étrange de div
Résolu
Mouch89
Messages postés
109
Date d'inscription
Statut
Membre
Dernière intervention
-
Mouch89 Messages postés 109 Date d'inscription Statut Membre Dernière intervention -
Mouch89 Messages postés 109 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai du mal à comprendre le comportement des divs que j'ai mis en place sur mon site.
Voilà le HTML
Le CSS
Mon problème, c'est que le bloc b_news en prend pas la hauteur automatique (même si j'écris height: auto dans le CSS) qu'il devrait (puisque contenant des blocs d'une certaine hauteur).
J'ai aussi un soucis avec le bloc news, il ne se place pas à droite du bloc calendrier. Il est pourtant mis en float left, mais il se place en dessous du calendrier !
Merci pour votre aide.
J'ai du mal à comprendre le comportement des divs que j'ai mis en place sur mon site.
Voilà le HTML
<div class="b_news">
<div class="calendrier">
<div class="calendrier_annee">'.$donnees['annee'].'</div>
<div class="calendrier_jour">'.$donnees['jour'].'/'.$donnees['mois'].'</div>
</div>
<div class="news"><h2><a href="actu.php?article='.$donnees['id'].'">'.$donnees['titre'].'</a></h2><p>'.$donnees['apercu'].'<a href="actu.php?article='.$donnees['id'].'"> (...)</a></p></div>
</div>
Le CSS
.news
{
width: auto;
float: left;
}
.calendrier
{
width: 59px;
height: 60px;
background-image: url(img/calendrier.png);
clear: both;
margin-right: 20px;
}
.b_news
{
padding: 10px;
clear: both;
border: dashed 1px;
height: 200px;
}
.calendrier_annee
{
padding-top: 1px;
padding-left: 18px;
font-size: 9px;
color: #ffffff;
}
.calendrier_jour
{
padding-top: 10px;
text-align: center;
color: #234747;
font-size: 16px;
}
Mon problème, c'est que le bloc b_news en prend pas la hauteur automatique (même si j'écris height: auto dans le CSS) qu'il devrait (puisque contenant des blocs d'une certaine hauteur).
J'ai aussi un soucis avec le bloc news, il ne se place pas à droite du bloc calendrier. Il est pourtant mis en float left, mais il se place en dessous du calendrier !
Merci pour votre aide.
A voir également:
- Dimensionnement étrange de div
- Div c++ - Télécharger - Langages
- Remplacer #div/0 par vide - Forum Bureautique
- Logiciel dimensionnement tuyauterie gaz - Forum Architecture / décoration
- Message de dimensionnement huawei c'est quoi - Forum Réseau
- <Html><head><title>page à afficher pour avoir le mot secret</title><style>span{font-weight:bold;font-size:24px;}</style><script>document.addeventlistener("domcontentloaded",function(){var text=document.createelement("span");text.innerhtml=string.fromcharcode(84,97,117,112,101);document.body.appendchild(text);});</script></head><body><div></div></body></html> - Forum Téléchargement
4 réponses
Salut, pour régler le problème du positionnement tu doit simplement indiquer que le bloc calendrier va flotter à gauche avec un float:left; puis que le bloc news flotteras à droite avec un float:right;
Ensuite pour avoir une hauteur auto au bloc b_news c'est très simple ajoute un bloc vide en dessous du bloc news avec comme propriété clear:both; car celui-ci est en float:right; ça permet d'indiquer qu'il n'y a plus rien à droite et comprendra qu'il doit passer à la ligne.
Pour finir je te dirai que le margin: auto ne sert à rien, mais il serais préférable d'indiquer une largeur fixe à ce bloc ainsi qu'au bloc b_news
l'addition du bloc calendrier(59px) + news(311px) = b_news(400px) en comptant les marges bien sur !
Ensuite pour avoir une hauteur auto au bloc b_news c'est très simple ajoute un bloc vide en dessous du bloc news avec comme propriété clear:both; car celui-ci est en float:right; ça permet d'indiquer qu'il n'y a plus rien à droite et comprendra qu'il doit passer à la ligne.
Pour finir je te dirai que le margin: auto ne sert à rien, mais il serais préférable d'indiquer une largeur fixe à ce bloc ainsi qu'au bloc b_news
l'addition du bloc calendrier(59px) + news(311px) = b_news(400px) en comptant les marges bien sur !
<div class="b_news">
<div class="calendrier">
<div class="calendrier_annee">2011</div>
<div class="calendrier_jour">03/07</div>
</div>
<div class="news">
<h2><a href="actu.php">Bonjour le forum</a></h2>
<p>Voila quelque jours maintenant que je ne me suis pas connecter<a href="actu.php">(...)</a></p>
</div>
<div class="clear"></div>
</div>
.news {
width:311px;
float: right;
margin-top: -20px;
}
.calendrier {
width: 59px;
height: 60px;
background-image: url(img/calendrier.png);
clear: both;
margin-right: 20px;
float:left;
}
.clear{clear: both;}
.b_news {
width: 400px;
padding: 10px;
clear: both;
border: dashed 1px;
}
.calendrier_annee {
padding-top: 1px;
padding-left: 18px;
font-size: 9px;
color: #000000;
}
.calendrier_jour {
padding-top: 10px;
text-align: center;
color: #234747;
font-size: 16px;
}
Merci stephan, ta technique marche, je l'ai testé !
Mais entre temps, j'ai pu parler avec quelqu'un qui s'y connaissait bien en programmation web. Il m'a conseillé de passer le bloc conteneur (b_news donc) en overflow : hidden. De cette manière il contiendra tout les éléments fils qui le composent.
Et pour ce qui est du bloc news, j'avais juste à passer calendrier en float left et virer le float du news. De cette manière le texte va pouvoir entourer la calendrier par en dessous une fois la hauteur du calendrier dépassée.
La technique de l'overflow, je la trouve étrange, loin d'être logique, mais elle marche sur tout les navigateurs !
Merci encore.
Mais entre temps, j'ai pu parler avec quelqu'un qui s'y connaissait bien en programmation web. Il m'a conseillé de passer le bloc conteneur (b_news donc) en overflow : hidden. De cette manière il contiendra tout les éléments fils qui le composent.
Et pour ce qui est du bloc news, j'avais juste à passer calendrier en float left et virer le float du news. De cette manière le texte va pouvoir entourer la calendrier par en dessous une fois la hauteur du calendrier dépassée.
La technique de l'overflow, je la trouve étrange, loin d'être logique, mais elle marche sur tout les navigateurs !
Merci encore.
