Bonjour, j'essais tant bien que mal à centrer un site sous IE. Beaucoup de sujets là dessus mais je n' y arrive pas quand même. J' ai entre autre essayé cette solution :
En rajoutant une div (<div id="conteneur"></div>
Mon css:
Merci pour votre aide
Modifié par gwenm (14 Nov 2012 - 14:34)
En rajoutant une div (<div id="conteneur"></div>
#conteneur
{
width: 900px;
margin: auto;
background-color: #3a311e;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
}Mon css:
/* Handcoded by http://psdcssxhtml.com */
/* reset */
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,th,td {
margin:0;
padding:0;
font-family:verdana, Helvetica, sans-serif;
}
fieldset,img {
border:0;
}
html {
height:100%;
margin-bottom:1px;
}
body {
position:relative;
}
:focus {
outline:hidden;
}
/* links */
a {
color:#0bcbf6;
text-decoration:none;
}
a:hover {
color:#FFF;
text-decoration:underline;
}
/* header elements */
h1, h2, h3, h4, h5, h6 {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
h1 {
font-size:300%;
color:#000;
}
h2 {
font-size:250%;
color:#b4b4b4;
}
h3 {
font-size:200%;
color:#000;
}
h4 {
font-size:175%;
color:#000;
}
h5 {
font-size:150%;
color:#787878;
}
h6 {
font-size:125%;
color:#000;
}
big {
font-size:200%;
color:#fff;
}
/* page setup */
body {
background:url(../images/page_bg.png) 0 0 repeat;
font-family:Arial, Helvetica, sans-serif;
line-height:170%;
color:#646464;
font-size:12px;
}
div#pagebg {
background:url(..) 0 0 repeat-x;
}
/* wrapper setup */
div.rapidxwpr {
margin:auto;
width:980px;
}
/* header */
div#header {
position:relative;
height:160px;
margin:0px 0px 0px 0px;
}
/* logo */
span#logo, img#logo {
position:absolute;
top:53px;
left:0;
width:427px;
height:64px;
border:0;
}
/* rss */
img#rss {
border:0;
float:right;
margin:0 10px 0 0;
}
div#tagline {
float:right;
margin:60px 35px 0 0;
background:url(../images/tagleft_bg.png) 0 0 no-repeat;
padding:5px 30px 9px 30px}
#tagline span {
font-size:13px;
font-weight:bold;
color:#000;
}
/* main body setup */
div#middle {
width:auto;
margin:0px 0px 0px 0px;
clear:both;
}
/* footer */
div#footer {
width:auto;
padding:70px 0px 20px 0px;
clear:both;
color:#fff;
background:url(...) 0 0 repeat-x;
overflow:hidden;
}
/* clearing & floating */
.clearingfix:after {
content:".";
display:block;
line-height:0px;
clear:both;
visibility:hidden;
}
.clearingfix {
display:block;
}
.floatbox {
overflow:hidden;
}
/* topmenu */
div#topmenu {
position:absolute;
top:20px;
right:0px;
height:20px;
}
div#topmenu ul {
padding:0px;
margin:0px;
list-style:none;
float:left;
}
div#topmenu li {
float:left;
display:block;
}
div#topmenu a {
float:left;
display:block;
position:relative;
height:20px;
padding:0px 10px 0px 10px;
line-height:17px;
overflow:hidden;
color:#fff;
}
div#topmenu a:hover {
color:#ccc;
text-decoration:underline;
}
/* today news */
#today_news h2, #website h2, #latest h2, #favorites h2, #flickr h2, #galleries h2, #site_sponsors h2 {
margin:0 0 5px 0;
color:#e7edf0;
font-size:22px;
font-style:italic;
font-weight:normal;
}
#today_news ul, #website ul {
list-style:none;
margin:14px 0 0 0;
float:left;
}
#today_news ul li, #website ul li {
margin:0 10px 5px 0;
font-family:"Verdana";
font-size:13px;
width:315px;
height:22px;
float:left;
}
/*\*/* html #website ul li {
margin:0 5px 5px 0;
}/*end*/
#today_news ul li a, #website ul li a {
background:url(../images/li_bg.png) 100% 0 no-repeat;
display:block;
color:#0bcbf6;
text-decoration:none;
padding:0 0 0 10px;
height:22px;
}
#today_news ul li a:hover, #website ul li a:hover {
background:url(../images/lihover_bg.png) 100% 0 no-repeat;
color:#FFF;
}
/* website block */
#website {
margin:35px 0;
}
#website .website-col {
width:315px;
float:left;
margin:0 10px 0 0;
}
/*\*/* html #website .website-col {
width:300px;
margin:0;
}/*end*/
#latest .news-bg {
background:url(../images/fliker_bg.png) 0 0 repeat-x;
padding:0;
}
/*\*/html*#latest .news-bg {
padding:0 0 20px 0;
}/*end*/
/* latest news block */
#latest h2 {
margin:0 0 10px 0;
}
#latest ul {
list-style:none;
}
#latest ul li {
text-decoration:none;
float:left;
}
#latest ul li a {
text-decoration:none;
}
#latest ul li a img {
float:left;
border:solid 1px #FFF;
margin:20px 0 20px 18px;
}
/* favorites block */
#favorites {
margin:40px 0 0 0;
}
#favorites .favorites-col {
float:left;
margin:0 15px 0 0;
}
#favorites .favorites-col ul {
list-style:none;
margin:10px 0 0 0;
}
#favorites .favorites-col ul li {
background:url(../images/twocol_bg.png) 0 0 repeat-x;
width:460px;
margin:0 0 5px 0;
font-family:"Verdana";
font-size:12px;
color:#FFF;
font-weight:bold;
padding:5px 0 5px 15px;
}
#favorites .favorites-col ul li a {
display:block;
font-weight:normal;
font-size:13px;
}
/* flickr images block */
#flickr {
margin:30px 0 0 0;
}
#flickr .flickr_img {
background:url(../images/fliker_bg.png) 0 0 repeat-x;
padding:14px 0 40px 8px;
margin:15px 0 0 0;
}
#flickr ul {
list-style:none;
}
#flickr ul li {
float:left;
margin:5px 9px;
}
/*\*/* html #flickr ul li {
float:left;
margin:5px 8px;
}/*end*/
#flickr ul li a img {
border:solid 1px #FFF;
}
#flickr a.brought_by {
background:url(../images/flickr.jpg) 100% 0 no-repeat;
float:right;
text-align:right;
padding:0 70px 0 0px;
font-size:12px;
color:#b2b2b2;
margin:5px 20px 0 0;
}
/* galleries block */
#galleries {
margin:30px 0 0 0;
}
#galleries .galleries_img {
background:url(../images/fliker_bg.png) 0 0 repeat-x;
padding:17px 0 8px 8px;
margin:15px 0 0 0;
}
#galleries ul.gallery {
list-style:none;
width:710px;
float:left;
margin:10px 0 0 0;
}
#galleries ul.gallery li {
float:left;
margin:0 0 5px 13px;
}
#galleries ul.gallery li a img {
}
#galleries ul.advert {
list-style:none;
width:250px;
margin:0 10px 0 0;
float:right;
}
#galleries ul.advert li {
float:left;
margin:0 0 5px 10px;
}
/*\*/* html #galleries ul.advert li {
float:left;
margin:0 0 5px 8px;
}/*end*/
#galleries ul.advert a img {
border:solid 2px #000;
}
/* site sponsors */
#site_sponsors {
margin:35px 0 0 0;
}
#site_sponsors ul {
list-style:none;
margin:14px 0 0 0;
float:left;
}
#site_sponsors ul li {
margin:0 10px 5px 0;
font-family:"verdana";
font-size:13px;
height:22px;
float:left;
width:315px;
}
#site_sponsors ul li a {
background:url(../images/li_bg.png) 100% 0 no-repeat;
display:block;
color:#0bcbf6;
text-decoration:none;
padding:0 0 0 10px;
height:22px;
}
#site_sponsors ul li a:hover {
background:url(../images/lihover_bg.png) 100% 0 no-repeat;
color:#FFF;
}
/* footer copyright */
#footer .copyright {
width:490px;
float:left;
}
#footer .copyright .credits {
width:190px;
float:left;
padding:140px 0 0 0;
}
#footer .copyright .advertise {
width:275px;
float:right;
color:#000;
padding:40px 0 0 0;
font-size:13px;
font-weight:bold;
}
#footer .copyright .advertise h3 {
margin:0;
font-size:24px;
}
/* footer contact form */
.footer-contact {
padding:23px 0 0 0;
float:right;
width:460px;
}
.footer-contact h3 {
color:#5496b4;
font-size:16px;
margin:0 0 0 10px;
font-style:italic;
font-weight:normal;
background:url(../images/footer-contact.png) 0 0 repeat-x;
padding:2px 10px 3px 10px;
float:left;
}
.footer-contact form {
clear:both;
padding:10px 0 0 0;
}
/*\*/* html .footer-contact form {
clear:both;
padding:5px 0 0 0;
}/*end*/
.footer-contact form div {
width:200px;
float:left;
padding:0 15px;
}
/*\*/* html .footer-contact form div {
width:200px;
float:left;
padding:0 10px;
}/*end*/
.footer-contact label {
display:block;
color:#000;
font-size:12px;
font-weight:bold;
margin:6px 0 0 0;
}
.footer-contact input.contact-field, .footer-contact textarea {
border:#e9e3ce 2px solid;
padding:4px 2px;
width:100%;
font-size:12px;
font-weight:bold;
color:#5b5b5b;
}
.footer-contact textarea.contact-message {
height:77px;
}
.footer-contact input.contact-submit {
border:0;
padding:0;
width:98px;
height:40px;
text-indent:-9999px;
cursor:pointer;
background:url(../images/contact-submit.png) 0 0 no-repeat;
margin:10px -10px 0 0;
float:right;
}Merci pour votre aide
Modifié par gwenm (14 Nov 2012 - 14:34)
