Probleme positionnement DIV et CSS
Pierre
-
martine et chantal Messages postés 485 Date d'inscription Statut Membre Dernière intervention -
martine et chantal Messages postés 485 Date d'inscription Statut Membre Dernière intervention -
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?
Voici mon code :
et mon css :
Est ce que le code est propre?
Merci, bonne journée.
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
- Enlever le soulignement d'un lien css - Astuces et Solutions
- Css exposant ✓ - Forum CSS
- Exemple test de positionnement greta - Forum Études / Formation High-Tech
1 réponse
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;
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;
