28172 sujets

CSS et mise en forme, CSS3

Probleme mise en page div/cadre en css

Bonjour à tous, j'ai un petit souci au niveau de ma mise en page, j'ai créé une page html ainsi qu'une feuille de style mais je n'arrive pas à avoir la mise en page souhaité, est ce que ce schéma est réalisable?

http://farm8.staticflickr.com/7055/7098846463_41365b76ce.jpg

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<center>

<div id="cadre1">
<div id="top">top</div>
<div id="menu">menu</div>
</div>

<div id="cadre2">
	<div id="gauche">gauche</div>
	<div id="centre">centre</div>
	<div id="droite">droite</div>
	<div id="bas">bas</div>
</div>

</center>
</body>
</html>


et mon css :


/* ------------->CADRE 1<------------- */


#cadre1
{
	width: 880px;
	height: 150px;
}

#top
{
	display:inline-block;
	width:870px;
	height:100px;
	margin:5px;
	background-color: navy;
}


#menu
{
	display:inline-block;
	width:870px;
	height:30px;
	margin:5px;
	background-color:navy;
}

/* ------------->CADRE 2<------------- */

#cadre2
{
	width: 880px;
	height:650px;
}


#gauche
{
	display:inline-block;
	vertical-align:top;
	width:250px;
	height:400px;
	margin:5px;
	background-color:navy;
}


#centre
{
	display:inline-block;
	vertical-align:top;
	width:250px;
	height:400px;
	margin:5px;
	background-color:navy;
}


#droite
{
	
	display:inline-block;
	vertical-align:top;
	width:340px;
	height:600px;
	margin:5px;
	background-color:navy;
}

#bas
{
	display: inline-block;
	width: 500px;
	height: 180px;
	margin:5px;
	background-color:navy;
}


Est ce que le code est propre?
Merci, bonne journée.
essaie ça ! mais je suis pas un pro Smiley smile

<!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">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
#wraper
{
width: 880px;
margin:0 auto; /* centrer la page à l'écran */
}
#TOP
{
width: 870px;
height: 150px;
background-color: navy;
margin: 5px;
}
#MENU
{
width: 870px;
height: 100px;
margin: 5px;
background-color: navy;
}
#GAUCHE
{
width: 250px;
height: 400px;
margin: 5px;
float: left;
background-color: navy;
}
#CENTRE
{
width: 250px;
height: 400px;
float: left;
margin: 5px;
background-color: navy;
}
#DROITE
{
width: 350px;
height: 600px;
margin: 5px;
float: right;
background-color: navy;
}
#BAS
{
width: 510px;
height: 190px;
margin: 420px 5px 0 5px;
background-color: navy;
}
.clear
{
clear: both;
}
</style>
<title>Document sans nom</title>

</head>

<body>

<div id="wraper">

<div id="TOP"></div>
<div id="MENU"></div>
<div id="GAUCHE"></div>
<div id="CENTRE"></div>

<div id="DROITE"></div>

<div id="BAS"></div>

</div>


</body>
</html>
Sujet clos
Aller à