|
|
|
|
Bonjour,
Lorsque l'on réduit la taille de l'écran sous IE (50% au lieu de 100%) et bien le texte n'est plus au milieu et le menu se décale, je n'ai pas se souci sous mozilla ! comment faire pour éviter cela s'il vous plait ?
Voici une image pour vous montrer le pb (voir les flèches rouges) : http://img5.imageshack.us/my.php?image=csswebaz.png
Le code si besoin :
body {
margin : auto;
padding : 0;
font-size: 12px;
color : #000000;
font-family: Arial, Helvetica, sans-serif;
background: #f5bcd5 ;
}
img {
border: 0;
}
form {
margin: 0;
padding:0;
}
input, textarea , select {
font-family : Verdana, Arial, Helvetica, sans-serif;
padding : 2px;
color : #000000;
font-size : 11px;
background : #ae6e80;
border : 1px solid #501520;
font-weight: normal;
margin: 1px;
}
/******************** LIENS ********************/
a {
color : #000000;
font-weight: bold;
text-decoration: none;
}
a:hover {
color : #000000;
font-weight: bold;
text-decoration: underline;
}
#header_bas ul {
list-style-type : none;
padding: 0;
margin: 0;
padding-right: 130px;
}
#header_bas li {
float : right;
padding: 0;
margin: 0;
}
#header_bas li a {
background : url('images/header_lien.png') no-repeat;
width: 134px;
font-size: 12px;
padding: 6px 0px 7px 0px;
display : block;
text-align: center ;
color : #FFFFFF;
text-decoration: none;
font-weight:bold;
margin: 0 8px 0 8px;
}
#header_bas li a:hover {
color : #F8C2CB;
text-decoration: none;
}
#menu_gauche a {
color: #666666;
text-decoration: none;
font-weight: normal;
}
#menu_gauche a:hover {
color: #666666;
text-decoration: underline;
}
#footer a {
color : #FFFFFF;
text-decoration: none;
}
#footer a:hover {
color : #FFFFFF;
text-decoration: underline;
}
/******************** LIENS ********************/
/******************** DESIGN GLOBAL ********************/
#fond_global {
background: url('images/fond.png') repeat-x top;
min-height: 651px;
}
#global {
margin : auto;
width: 1013px;
padding-top: 18px;
}
#header {
height: 171px;
}
#header_bas {
background: url('images/header_bas.png') no-repeat;
height: 33px;
}
#stats_1 {
float: left;
background: url('images/stats_1.png') no-repeat;
width: 244px;
height: 96px;
}
#stats_1 p {
margin: 0;
color: #FFFFFF;
font-weight: bold;
padding: 42px 42px 0 80px;
text-align: center;
}
#stats_2 {
float: left;
background: url('images/stats_2.png') no-repeat;
width: 223px;
height: 96px;
}
#stats_2 p {
margin: 0;
color: #FFFFFF;
font-weight: bold;
padding: 42px 42px 0 60px;
text-align: center;
}
#stats_3 {
float: left;
background: url('images/stats_3.png') no-repeat;
width: 223px;
height: 96px;
}
#stats_3 p {
margin: 0;
color: #FFFFFF;
font-weight: bold;
padding: 42px 42px 0 52px;
text-align: center;
}
#stats_4 {
float: left;
background: url('images/stats_4.png') no-repeat;
width: 323px;
height: 96px;
}
#stats_4 p {
margin: 0;
color: #FFFFFF;
font-weight: bold;
padding: 36px 142px 0 52px;
text-align: center;
}
#container_header {
clear: both;
background: url('images/container_header.png') no-repeat;
height: 30px;
}
#container_fond {
background: url('images/container_fond.png') repeat-y;
}
#menu_gauche {
float: left;
width: 161px;
padding-top: 15px;
position: relative;
left: 43px;
}
#menu_gauche p {
padding: 0 14px 0 14px;
}
.menu_separ {
height: 2px;
background: url('images/menu_separ.png') no-repeat;
margin: 18px 0 18px 0;
}
#contenu_centre {
float: left;
width: 648px;
padding-top: 10px;
position: relative;
left: 63px;
}
#news {
height: 73px;
background: url('images/news.png') no-repeat;
margin-bottom: 14px;
}
#news p {
margin: 0;
color: #FFFFFF;
font-weight: bold;
padding: 28px 30px 0 126px;
}
.bloc_1_fond {
background: url('images/bloc_1_fond.png') repeat-y;
}
.bloc_1_fond p {
margin: 0;
padding: 2px 35px 0 35px;
text-align:justify;
font-size: 11px;
}
.bloc_1_bas {
background: url('images/bloc_1_bas.png') no-repeat;
height: 31px;
margin-bottom: 14px;
}
.bloc_2_fond {
background: url('images/bloc_2_fond.png') repeat-y;
}
.bloc_2_fond p {
margin: 0;
padding: 2px 35px 0 35px;
text-align:justify;
font-size: 11px;
}
.bloc_2_bas {
background: url('images/bloc_2_bas.png') no-repeat;
height: 29px;
margin-bottom: 14px;
}
#pub_droite {
float: right;
width: 141px;
padding-top: 40px;
}
.pub_haut {
background: url('images/pub_haut.png') no-repeat;
height: 44px;
}
.pub_fond {
background: url('images/pub_fond.png') repeat-y;
text-align: center;
padding-right: 2px;
}
.pub_bas {
background: url('images/pub_bas.png') no-repeat;
height: 22px;
margin-bottom: 14px;
}
#container_footer {
background: url('images/container_footer.png') no-repeat;
height: 30px;
}
#pub {
background: url('images/pub.png') no-repeat;
width: 472px;
height: 64px;
margin: 20px 0 20px 0;
position: relative;
left: 230px;
}
#pub p {
margin: 0;
padding-top: 2px;
text-align:center;
}
#footer {
background: url('images/footer.png') no-repeat;
height: 42px;
margin-bottom: 16px;
}
#footer p {
font-weight: bold;
color: #FFFFFF;
padding: 5px 140px 0 40px;
text-align: center;
font-size: 11px;
line-height: 16px;
}
/******************** DESIGN GLOBAL ********************/Configuration: Windows Vista Internet Explorer 7.0
Je crois que la solution est de tout codé en em et non en px. C'est une histoire de taille absolue et relative. Je ne pourrais pas t'en dire beaucoup plus...
|
Bonjour,
@charset "utf-8";
body {
font-family: Arial, Tahoma;
width: 1063px; /* total size */
margin-left: auto;
margin-right: auto;
background-image: url(images/global/background.png);
background-repeat: repeat-x;
background-color: #f5bcd4;
}
#header0 { background-image: url(images/global/header0-top.png); width: 899px; height: 229px; }
#header0 p { display: block; margin: 0; padding-top: 185px; padding-right: 80px; text-align: right; }
#header0 a { color: white; font-size: 13px; text-decoration: none; padding-left: 82px; }
#header1-stats { background-image: url(images/global/header1-stats.png); width: 899px; height: 70px; }
#header1-stats p { width: 140px; display: block; float: left; color: white; font-size: 13px; margin-top: 0; margin-left: 80px; padding-top: 26px; }
.header2-bar { background-image: url(images/global/header2-bar.png); width: 899px; height: 30px; }
.separate { background-image: url(images/separate.png); width: 142px; height: 6px; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; }
IMG.imgcenter { display: block; margin-left: auto; margin-right: auto; border: none; }
form {width: 152px; /*-20px*/ padding: 10px; }
form label { font-size: 12px; }
form input.input { background-color: #ae6e80; border: 1px solid black; }
ul { padding-left: 0; margin-left: 0; list-style: none; }
ul li a { font-size: 12px; color: #666666; }
ul li a:hover { text-decoration: none; }
.ulalign-left { margin-left: 20px; }
.ulalign-center { width: 100%; margin-left: 0; } .ulalign-center li { text-align: center; width: 100%; margin-left: auto; margin-right: auto; }
#TABLE2 { width: 832px; margin-left: auto; margin-right: auto; }
#TDLEFT { vertical-align: top; width: 172px; background-image: url(images/global/menu-bkg.png); }
#TDRIGHT { vertical-align: top; width: 660px; background-image: url(images/global/content-bkg.png); }
#footer { background-image: url(images/global/footer.png); width: 899px; height: 43px; margin-top: 20px; }
#footer p { color: white; font-size: 13px; text-align: center; margin: 0; padding-top: 5px; }
#footer a { color: white; font-size: 13px; text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer-pub { display: block; text-align: center; margin-top: 20px; }
.BOX-bkgRight { background-image: url(images/content-bkgRight.png); background-repeat: repeat-y; width: 622px; /*-20px*/ margin-left: auto; margin-right: auto; }
.BOX-btmRight { background-image: url(images/content-btmRight.png); width: 642px; height: 28px; margin-left: auto; margin-right: auto; margin-bottom: 20px; }
.BOX-bkgLeft { background-image: url(images/content-bkgLeft.png); background-repeat: repeat-y; width: 622px; /*-20px*/ margin-left: auto; margin-right: auto; }
.BOX-btmLeft { background-image: url(images/content-btmLeft.png); width: 642px; height: 28px; margin-left: auto; margin-right: auto; margin-bottom: 20px; }
.BOX-text { padding: 10px; }
.BOX-text p { margin: 0; padding: 0; }
/* specials styles */
#lesnews {
background-image: url(../static/images/content-lesnews.png);
width: 642px;
height: 70px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#lesnews p {
color: white;
font-size: 13px;
font-weight: bold;
margin: 0;
padding-top: 25px;
padding-left: 120px;
}
#pub-top { margin-top: 400px; background-image: url(images/global/pub-top.png); width: 164px; height: 44px; }
#pub-bkg { background-image: url(images/global/pub-bkg.png); background-repeat: repeat-y; width: 164px; text-align: center; padding-top: 10px; }
#pub-btm { background-image: url(images/global/pub-btm.png); width: 164px; height: 20px; }
J'ai fait faire ces css en payant, je ne suis pas assez calez. J'ai vraiment besoin d'aide svp, j'ai beau chercher sur google, etc, mais je n'y arrive pas, cela fait plusieurs jours que je suis deçue, je suis entrain de péter une pile, lol ! |