Probleme positionnement DIV et CSS

Fermé

Pierre - 22 avril 2012 à 17:45
martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 - 22 avril 2012 à 18:21

Bonjour à tous, j'ai un petit souci au niveau de ma mise en page, j'ai créé une page 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.

A voir également:

Probleme positionnement DIV et CSS
Logiciel positionnement gratuit - Guide
Div c++ - Télécharger - Langages
Test de positionnement cesi - Forum Études / Formation High-Tech
Enlever le soulignement d'un lien css - Astuces et Solutions
Css exposant ✓ - Forum CSS

1 réponse

Réponse 1 / 1

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
22 avril 2012 à 18:21

bonjour, perso je commence toujours par
une div "conteneur" qui contient l'ensemble de la page.
pour ta structure je choisirai ce schéma :

#conteneur (contient ensemble de la page)
#top
#menu
#gauche (contient tes 3 blocs de gauche (changer le nom de ton "gauche")
#droite

#gauche et #droite en float: left;

Discussions similaires

tests du greta

Xiaomi/Redmi - problème de réseau et SMS de positionnement

test greta

Formation secrétaire comptable niveau IV

comment remplacer un #div/0! par une cellule vide