28220 sujets

CSS et mise en forme, CSS3

[RESOLU] Positionnement maladroit de <div>

Bonjour à tous et à toutes,

voilà, j'ai une page avec une couleur de fond, puis 4 éléments à placer dans chaque coin.
voici mon 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>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
	background-color:#3985AD;
	margin:0;
	padding:0;
	}

#hg {
	background-image:url(images/head_hg.gif);
	width:265px;
	height:60px;
	background-repeat:no-repeat;
	margin:0;
	padding:0;
	}
	
#hd {
	background-image:url(images/head_hd.gif);
	width:432px;
	height:334px;
	background-repeat:no-repeat;
	float:right;
	margin-top: 0px;
	}

#bg {
	background-image:url(images/foot_bg.gif);
	width:205px;
	height:221px;
	background-repeat:no-repeat;
	float:left;
	margin-left:0px;
	margin-bottom:0px;
	}

#bd {
	background-image:url(images/foot_bd.gif);
	width:72px;
	height:126px;
	background-repeat:no-repeat;
	float:right;
	margin-right:0px;
	margin-bottom:0px;
	}
	
</style>
</head>

<body>
<div id="hg"></div>
<div id="hd"></div>
<div id="bg"></div>
<div id="bd"></div>
</body>
</html>


je suis censé obtenir ceci http://www.image-dream.com/image.php?image=1111063327.fond.png&pseudo=Nahaurys
et j'obtiens ça http://www.image-dream.com/image.php?image=1111137048.sanstitre-1.jpg&pseudo=Nahaurys

aurais-je "foiré" quelque part? ça m'étonnerais pas mais bon...
merci d'avance Smiley cligne
Modifié par Majbryce (18 Mar 2005 - 13:29)
J'ai tenté une modif, c'est a dire de mettre les deux éléments de gauche dans un #conteneurgauche, et les 2 éléments de droite dans un #conteneurdroite
ça donne ceci

<!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>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
	background-color:#3985AD;
	margin:0;
	padding:0;
	}

#conteneurgauche {
	width:50%;
	height:100%;
	margin:0;
	padding:0;
	}
	
#hg {
	background-image:url(images/head_hg.gif);
	width:265px;
	height:60px;
	background-repeat:no-repeat;
	margin:0;
	padding:0;
	}
	
#bg {
	background-image:url(images/foot_bg.gif);
	width:205px;
	height:221px;
	background-repeat:no-repeat;
	float:left;
	background-position:left bottom;
	}

#conteneurdroite {
	width:50%;
	height:100%;
	float:right;
	margin-left:50%;
	}
	
#hd {
	background-image:url(images/head_hd.gif);
	width:432px;
	height:334px;
	background-repeat:no-repeat;
	float:right;
	margin-top:0;
	}


#bd {
	background-image:url(images/foot_bd.gif);
	width:72px;
	height:126px;
	background-repeat:no-repeat;
	float:right;
	margin-bottom:0;
	}
	
</style>
</head>

<body>
<div id="conteneurgauche">
	<div id="hg"></div>
	<div id="bg"></div>
</div>
<div id="conteneurdroite">
	<div id="hd"></div>
	<div id="bd"></div>
</div>
</body>
</html>


et c'est toujours le même bor*** Smiley decu

EDIT : Problème réglé
Modifié par Majbryce (18 Mar 2005 - 13:29)
Sujet clos
Aller à