Sujet Précédent Sujet Suivant

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.



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;
0

Discussions similaires

tests du greta
yass -
yassir -

9 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
le test d'entrée pour le cesi en alternance
sab08600 -
sab08600 -

2 réponses