Bonjour tous
Je suis parti de
Et je reste avec les décalages comme on voit sur l'image.
En fait la colonne de gauche et le contenu, je peux stabiliser mais la colonne de droite impossible, elle reste sous le contenu.
J'ai virer un maximum de texte et fais aussi le ménage dans la feuille de style pour ne garder que ce qui interesse.
l'image :
http://griggione.free.fr/tutos/pics/474.jpg
le fichier html :
le fichier css :
Je suis parti de
http://www.alsacreations.com/static/gabarits/modele09.htmlEt je reste avec les décalages comme on voit sur l'image.
En fait la colonne de gauche et le contenu, je peux stabiliser mais la colonne de droite impossible, elle reste sous le contenu.
J'ai virer un maximum de texte et fais aussi le ménage dans la feuille de style pour ne garder que ce qui interesse.
l'image :
http://griggione.free.fr/tutos/pics/474.jpg
le fichier html :
<!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>
#INCLURE "template/meta.html"
</head>
<body>
<div id="wrapper">
<div id="subwrapper">
#INCLURE "template/entete.html"
<div id="chemin">::navigation:: : <a href="#URLSOMMAIRE">accueil</a></div>
#INCLURE "template/menu.html"
<div id="contenu">
</div>
#INCLURE "template/colonneD.html"
#INCLURE "template/pied.html"
</div>
</div>
</body>
</html>le fichier css :
/* Eléments HTML en général
-------------------------------------------------------- */
@import url(style_editeur.css);
body {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background-position: center 0;
background-image: url('_gfx/lo3.jpg');
color: #397567;
font-size: 12px;
}
img {
border: 0
}
/* Page
-------------------------------------------------------- */
#wrapper {
width: 990px;
text-align: left;
overflow: visible;
position: relative;
margin: 0 auto 0 auto;
padding: 0;
}
#subwrapper {
overflow: hidden;
position: relative;
padding: 0;
width: 990px;
border-left: solid 1px #4E9C8A;
border-right: solid 1px #4E9C8A;
border-bottom: solid 1px #4E9C8A;
}
/* Entête
-------------------------------------------------------- */
#entete {
width: 990px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
}
#flash1 {
margin-left: 5px;
}
/* Chemin
-------------------------------------------------------- */
#chemin {
float: left;
width: 980px;
color: #397567;
font-size: 11px;
font-weight: bold;
margin: 5px 0 0 0;
padding: 5px 0 5px 10px;
background-color: #E4f1Ef;
border-top: solid 2px #4E9C8A;
}
/* Colonne Gauche
-------------------------------------------------------- */
#moteurEtCatalogue {
width: 160px;
padding: 0;
margin: 10px 0 0 0;
}
#accueil ul, #menuCatalogue ul {
padding: 0;
margin: 0;
list-style: none;
color: #ffffff;
}
#accueil ul li a, #menuCatalogue ul li a {
text-decoration: none;
color: #ffffff;
border-left: solid 3px #93CABD;
display: block;
background-color: #3D7C6f;
padding: 5px 0 5px 10px;
}
/* Contenu
-------------------------------------------------------- */
#contenu {
width: 630px;
padding: 10px 5px;
margin: 0 0 0 170px;
border: #2E5C53 solid 1px;
background: #F8F9F2;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
behavior: url(template/border-radius.htc);
}
/* colonne Droite
---------------------------------------------------------*/
#colD {
margin: 0 0 0 820px;
width: 160px;
padding: 0 0 5px 0;
color: #ffffff;
z-index: 1000;
}
/* Panier
-------------------------------------------------------- */
#monPanier {
float: left;
width: 160px;
background-color: #397567;
margin: 0 0 5px 0;
border-left: 3px solid #93CABD;
padding: 0 0 0 10px;
height: 80px;
}
#monPanier h3 {
color: #ffffff;
}
/* Pied de page
-------------------------------------------------------- */
#footer {
float: left;
width: 990px;
color: #468E7E;
font-size: 11px;
font-weight: normal;
padding: 5px 0 10px 0;
background-color: #E4f1Ef;
border-top: solid 1px #4B9E8D;
border-bottom: solid 1px #4B9E8D;
}
/* Correction des bug Internet Explorer
-------------------------------------------------------- */
* html button {width:1%; overflow:visible;}
*:first-child+html button {overflow:visible;}
