28172 sujets

CSS et mise en forme, CSS3

DIV qui depasse

Bonjour a tous!

Désolé de ne pas mettre un titre plus explicite, mais je ne sais pas vraiment comment décrire mon problème (c'est aussi pour ça que j'ai eu du mal a trouver une réponse sur google)

Bon, comme des images et du code valent mieux qu'un long discours :

Voila ce que ça donne a l'écran (ubuntu + Firefox) : http://img217.imageshack.us/i/capture4w.png/

Le code xHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr"><head>

<title>Thinking Hat - Creation Gears under a Hat</title>

<link rel="icon" type="image/png" href="">
<link rel="stylesheet" type="text/css" href="css/structure.css">
<link rel="stylesheet" type="text/css" href="css/texte.css">

<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

</head>

<body>
		
		<div id="central">
		<img src="image/central-barre-top.png" alt="" />
		<img src="image/central-barre-bas.png" alt="" />
		</div>
	
</body>

</html>

Le code CSS :

* {
	border : 0;
	margin : 0;
	padding : 0;
}


#central {
	position : relative;
	width : 615px;
	background-image : url("../image/arriere-plan-central.png");
	background-repeat : no-repeat;
	background-color : #77c93f;
	margin-bottom : 25px;
	float : left;
}


Comme vous pouvez le voir sur l'image, le cadre de la div dépasse pas mal en dessous de l'image de bordure. Quelqu'un aurait-il la solution?

Par avance, merci!
Modifié par linki (17 Aug 2010 - 19:29)
Bonjour,

Des images contenues dans un div ne peuvent, théoriquement (du moins sans que cela ne soit demandé explicitement), pas en dépasser. Je suppose que tu utilises des png semi-transparent pour des bordures, il est donc normal que la couleur de fond de la div apparaisse en dessous.

Une solution : ne pas utiliser d'image semi-transparente, mais inclure la couleur de fond attendu dans celles-ci.
Merci pour ta réponse!

Mais le problème c'est que mes images ont déja un fond définis, et aucune transparence. (sinon, j'aurais la couleurs verte de fond tout autour des bordures rondes). Je parlais plutôt des deux trois pixels verts qui dépassent en dessous de l'image et forme une fine bordure verte. (visible en zoomant fortement, mais tout de même désagréable a la vue quand on navigue)

Je m'apprêtais a uploader ma page xHTML pour vous la montrer (c'est plus parlant qu'une image). Une fois fait, je me suis mis a ne plus rien comprendre du tout. La première image ( http://img217.imageshack.us/i/capture4w.png/ ) viens de mon serveur local, un LAMPP classique. C'est la qu'on peu voir la fine bordure verte de 2 pixels en dessous de l'image.

Voila ce que ça donne une fois uploader : http://cruntett.ifrance.com/pr-th-22/
Et la vous pouvez zoomer autant de fois que vous voulez, il n'y a pas de bordure verte comme sur l'image.

Pour résumer => http://img824.imageshack.us/f/capture6b.png/

Alors maintenant je ne comprends plus. Pourquoi j'ai ce problème en local et pas sur ifrance (c'est quand même pas grâce a tous leurs scripts a la con? ^^). Comme le problème ne semble apparaitre qu'en local ça me semble pas si grave, mais je reste assez troublé. Si quelqu'un a la réponse miracle... Smiley smile
Sujet clos
Aller à