28172 sujets

CSS et mise en forme, CSS3

Probleme image en bas d'un DIV [résolu]

Bonjour

je suis en train de réaliser un site ...
voici le probleme upload/9982-box.jpg
il y a une bordure de 3px en dessous de ma derniere image

le code html :
 <div id="sidebar">
        	<div class="box"><img src="<?php bloginfo('template_directory'); ?>/img/top_box.gif" width="272" height="18" />
            <h1>Lorem ipsum dolor</h1><p>sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p><img src="<?php bloginfo('template_directory'); ?>/img/bottom_box.gif" width="272px" height="18px" /></div>
            <div class="box"><img src="<?php bloginfo('template_directory'); ?>/img/top_box.gif" width="272" height="18" />
            <h1>Lorem ipsum dolor</h1><p>sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p><img src="<?php bloginfo('template_directory'); ?>/img/bottom_box.gif" width="272" height="18" /></div>


et le CSS :
#sidebar{
	position:relative;
	float:right;
	width:286px;
	}
.box{
	background-image:url(img/centre_box.gif);
	background-repeat:repeat-y;
	margin-bottom:15px;
	width:272px;
}
.box p{
	margin:0px 20px 8px 25px;
	padding:0px;}
.box h1{
	line-height:12px;
	background-image:url(img/fleche.png);
	background-repeat:no-repeat;
	font-size:12px;
	letter-spacing:1px;
	border-bottom:solid 1px;
	margin:0 20px 8px 25px;
	padding:0px 0px 8px 17px;
}


Je ne comprends pas pourquoi ces 3px apparaissent,
bon je pourrais contourner le probleme en rajoutant des div, mais comme dit Alsa faut pas surchargé !!!

Merci pour votre aide
PS : le site en ligne : http://www.ehpad-lapacaudiere.com
Modifié par rom1_ComUnik (02 Jul 2010 - 09:53)
Je pense que c'est parce que tu n'as pas donne de hauteur a ta .box
Si tu la fixe a 258px tu n'as plus de soucis, après ce n'est peut être pas ce que tu veux faire, et pour ma part ce n'est pas le plus propre.

Sinon je te propose de refaire ta .box et de la séparer en 3 parties (3 div HTML) afin d'y insérer les images en tant que background CSS, et non via la balise <img>.
Je pense que ca ne te surchargera pas plus que ca, d'autant plus que tes images sont destinées a être des backgrounds et non des images.
L'utilisation du CSS me semble plus correcte.

A plus Smiley cligne
Ok merci
effectivement le contenu de la .box étant variable, je ne peux pas fixer la hauteur, et oui je vais me résigner a créer 3 div ...

merci pour la réponse...
c'est quand même bizarre ces 3pixels qu'il rajoute comme ça, manière de faire chier ...

aller +++
Non c'est un "illusion" je dirai.

En fait ta div fait bien cette taille, mais le fait que tu utilises une image avec des coins blancs en tant que bottom te donnes l'impression que la DIV dépasse de 3px.

Essaye de mettre un margin bottom de -3px a ton image et tu verras !
yeba !!!
effectivement cela fonctionne avec le margin-bottom -3px ... mais bon ca reste quand meme étrange
Merci juju57
Sujet clos
Aller à