Je n'arrive pas à centre mon design
Raoul
-
Gihef Messages postés 5165 Statut Contributeur -
Gihef Messages postés 5165 Statut Contributeur -
Bonjour,
Voila je n'arrive pas à centre mon design, et l'aperçu n'est pas le même sur firfox que sur IE
Mon code css:
body {
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
line-height: 20px;
color: #000;
background-color: #EEE;
}
h1 {
font-size: 14px;
font-weight: bold;
color: #006600;
}
h2 {
font-size: 10px;
font-weight: bold;
color: #D0AD67;
}
h3 {
font-size: 10px;
font-weight: bold;
color: #069;
}
.title {
font-size: 20px;
font-weight: bold;
color: #006600;
border-left: 5px solid #F90;
padding-left: 5px;
}
.subtitle {
font-size: 11px;
font-weight: bold;
color: #333;
border-left: 5px solid #FFF;
padding-left: 5px;
}
#lpanel .heading {
background-color: #006600;
font-size: 10px;
font-weight: bold;
color: #FFFF00;
text-align: center;
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
}
#lpanel a {
color: #333;
text-decoration: none;
font-weight: bold;
padding-left: 15px;
background: url(../images/b-1.gif) no-repeat center left;
}
#lpanel a:hover {
color: #006600;
background: url(../images/b-2.gif) no-repeat center left;
}
a {
color: #006600;
text-decoration: none;
padding: 1px;
}
a:hover {
color: #666;
background-color: #EEE;
}
img {
float: right;
padding-left: 10px;
padding-right: 10px;
}
/***************************************************
Site Layout Containers
***************************************************/
#header {
width: 748px;
height: 150px;
margin: 5px;
padding: 10px;
background-color: #FFF;
border: 1px solid #DDD;
background: url(../images/banner.jpg) no-repeat top left;
}
#title {
position: absolute;
top: 20px;
left: 20px;
padding: 10px;
background-color: #FFF;
}
#lpanel {
position: absolute;
top: 149px;
left: 0px;
margin: 5px;
padding: 10px;
background-color: #FFF;
border: 1px solid #DDD;
width: 150px;
}
#content {
width: 570px;
margin: 0px 200px 5px 182px;
padding: 10px;
background-color: #FFF;
border: 1px solid #DDD;
}
#footer {
width: 587px;
margin: 5px 200px 5px 182px;
padding: 1px;
background-color: #006600;
border: 1px solid #006600;
text-align: right;
}
J'ai tester en mettant margin;auto dans body mais sans succès.
Merci de bien vouloirs m'aider
Voila je n'arrive pas à centre mon design, et l'aperçu n'est pas le même sur firfox que sur IE
Mon code css:
body {
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
line-height: 20px;
color: #000;
background-color: #EEE;
}
h1 {
font-size: 14px;
font-weight: bold;
color: #006600;
}
h2 {
font-size: 10px;
font-weight: bold;
color: #D0AD67;
}
h3 {
font-size: 10px;
font-weight: bold;
color: #069;
}
.title {
font-size: 20px;
font-weight: bold;
color: #006600;
border-left: 5px solid #F90;
padding-left: 5px;
}
.subtitle {
font-size: 11px;
font-weight: bold;
color: #333;
border-left: 5px solid #FFF;
padding-left: 5px;
}
#lpanel .heading {
background-color: #006600;
font-size: 10px;
font-weight: bold;
color: #FFFF00;
text-align: center;
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
}
#lpanel a {
color: #333;
text-decoration: none;
font-weight: bold;
padding-left: 15px;
background: url(../images/b-1.gif) no-repeat center left;
}
#lpanel a:hover {
color: #006600;
background: url(../images/b-2.gif) no-repeat center left;
}
a {
color: #006600;
text-decoration: none;
padding: 1px;
}
a:hover {
color: #666;
background-color: #EEE;
}
img {
float: right;
padding-left: 10px;
padding-right: 10px;
}
/***************************************************
Site Layout Containers
***************************************************/
#header {
width: 748px;
height: 150px;
margin: 5px;
padding: 10px;
background-color: #FFF;
border: 1px solid #DDD;
background: url(../images/banner.jpg) no-repeat top left;
}
#title {
position: absolute;
top: 20px;
left: 20px;
padding: 10px;
background-color: #FFF;
}
#lpanel {
position: absolute;
top: 149px;
left: 0px;
margin: 5px;
padding: 10px;
background-color: #FFF;
border: 1px solid #DDD;
width: 150px;
}
#content {
width: 570px;
margin: 0px 200px 5px 182px;
padding: 10px;
background-color: #FFF;
border: 1px solid #DDD;
}
#footer {
width: 587px;
margin: 5px 200px 5px 182px;
padding: 1px;
background-color: #006600;
border: 1px solid #006600;
text-align: right;
}
J'ai tester en mettant margin;auto dans body mais sans succès.
Merci de bien vouloirs m'aider
A voir également:
- Je n'arrive pas à centre mon design
- Centre de messagerie - Guide
- Centre d'aide facebook compte bloqué - Guide
- Comment mettre le centre de controle sur l'écran - Guide
- Peut on récupérer un colis au centre de tri chronopost - Forum Mobile
- Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ? ✓ - Forum Javascript
4 réponses
Bonjour,
Vite lu, mais une solution qui a fait ses preuves.
Place tout ça dans un autre élément qui englobera tous les autres.
C'est à cet élément global que tu appliqueras “margin : 0 auto;” après avoir précisé “text-align : center;” dans le body pour compatibilité avec un ancien navigateur heureusement en voie de disparition (-;
++
Vois http://forum.alsacreations.com/faq/faq-74-Comment-centrer-horizontalement-un-element-.html
--
Vite lu, mais une solution qui a fait ses preuves.
Place tout ça dans un autre élément qui englobera tous les autres.
C'est à cet élément global que tu appliqueras “margin : 0 auto;” après avoir précisé “text-align : center;” dans le body pour compatibilité avec un ancien navigateur heureusement en voie de disparition (-;
++
Vois http://forum.alsacreations.com/faq/faq-74-Comment-centrer-horizontalement-un-element-.html
--