28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Adapter un div à la taille d'un autre ?

Bonjour,

Je développe actuellement mon site personnel et je suis confronté à un petit problème, je souhaite que le rectangle rouge s'adapte à la hauteur de mon rectangle vert.

Voici une capture d'écran :

Note de modération : Pensez à générer un apercu (vignettage) lorsque vos images sont de grande taille, pour ne pas déformer le forum, merci de votre compréhension Smiley smile


Mon code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Titre</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<link rel="stylesheet" type="text/css" media="screen,projection" href="css/ecran.css"/>
		<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
		<script type="text/javascript" src="js/jquery.timer.js"></script>
		<script type="text/javascript" src="js/entete.js"></script>
	</head>
	<body>
		<div id="page">
			<div id="entete">
				<div id="live_actualite">
					<div id="scrollup"></div>
				</div>
				<div id="live_meteo"></div>
				<div id="live_vigilance"></div>
				<div id="live_date"></div>
				<div id="live_heure"></div>
				<div id="live_fete"></div>
			</div>
			<div id="menu"></div>
			<div id="contenu"></div>
			<div id="pied"></div>
		</div>
	</body>
</html>


Mon code CSS :

body
{
	background-color	: #458B2B;
	background-image	: url(../images/fond.png);
	background-position	: top;
	background-repeat	: repeat-x;
	font-family			: Tahoma,Verdana,Segoe,sans-serif;
	font-size			: 11px;
	margin				: 0;
	padding				: 0;
}

img
{
	border				: 0;
}

#page
{
	margin-left			: auto;
	margin-right		: auto;
	margin-top			: 15px;
	margin-bottom		: 15px;
	width				: 950px;
}

#entete
{
	background-image	: url(../images/entete.png);
	background-repeat	: no-repeat;
	height				: 400px;
	width				: 950px;
}

#live_actualite
{
	height				: 110px;
	left				: 170px;
	position			: absolute;
	top					: 240px;
	width				: 445px;
}

#scrollup
{
	height				: 110px;
	left				: 5px;
	overflow			: hidden;
	position			: relative;
	width				: 435px
}

#scrollup .headline
{
	cursor				: pointer;
	height				: 100px;
	position			: absolute;
	top					: 120px;
	width				: 435px;
}

#live_meteo
{
	height				: 90px;
	left				: 636px;
	position			: absolute;
	top					: 235px;
	width				: 354px;
}

#live_vigilance
{
	height				: 80px;
	left				: 1011px;
	position			: absolute;
	text-align			: center;
	top					: 244px;
	width				: 80px;
}

#live_date
{
	height				: 14px;
	left				: 635px;
	position			: absolute;
	text-align			: center;
	top					: 338px;
	width				: 185px;
}

#live_heure
{
	height				: 14px;
	left				: 842px;
	position			: absolute;
	text-align			: center;
	top					: 338px;
	width				: 90px;
}

#live_fete
{
	height				: 14px;
	left				: 955px;
	position			: absolute;
	text-align			: center;
	top					: 338px;
	width				: 135px;
}

#menu
{
	background-color	: #FF0000;
	float				: right;
	min-height			: 200px;
	overflow			: auto;
	position 			: relative;
	width				: 250px;
}

#contenu
{
	background-color	: #00FF00;
	min-height			: 700px;
	width				: 700px;
}

#pied
{
	background-image	: url(../images/pied.png);
	background-position	: bottom;
	background-repeat	: no-repeat;
	min-height			: 32px;
	text-align			: center;
	width				: 950px;
}


Je ne peux pas mettre de fond blanc, car j'utilise la transparence du PNG de l'entête pour les coins arrondi.

Au passage, si vous voyez des erreurs ou implémentations étranges, ne pas hésiter à me le signaler afin que je corrige.

Merci pour votre aide,
Mathieu
Modifié par mrousse83 (30 Aug 2008 - 00:15)
Bonsoir mrousse83,

Concernant ce petit soucis, une recherche sur les termes "colonnes factices" devrait a priori donner satisfaction Smiley cligne

Cdt,
Sylvain
Sujet clos
Aller à