[RÉGLÉ] problème de résolution

[raph_egg]

Bonjour,

2 questions :

1. lorsque je baisse la résolution de l'écran, je remarque que le logo file à gauche (ex. en passant à 1024 x 768. Les autres éléments semblent rester à leur place. Comment éviter ce phénomène ?
2. je souhaite rendre la largeur de mon template fluide de sorte qu'il prennent toute la largeur de l'écran du visiteur.

le code css :

html {
height: 101%;
}

body {
/*border: 1px solid red;*/
color : black;
background : white;
font-family: "Helvetica Neue", sans-serif;
font-size : 14px;
padding : 0;
margin : 0;
}
body.template {
background : black;
}
img{
box-shadow: 4px 4px 12px black;
}
img:hover{
box-shadow: 4px 4px 12px 4px #AF3F3F;
}
a{
color : white;
}
a:hover {
text-decoration : none;
}
a:focus {
outline: none;
color : white;
}
a:active{

color : blue;
}
.clr {
clear : both;
}

li {
list-style : none;
}

p {
padding : 4px 0 4px 0;
color : black;
}

* {
margin : 0;
padding : 0;
}

h1, h2, h3, h4, h5 {
padding-top : 14px;
font-size : 18px;
font-weight : bold;
}
#wrapper {
/*border: 1px solid red;*/
margin: 0 auto ;
background : black;
width : 1000px ;
height : 400px ;
margin-top: 200px;
float: top;
}
#logo a {
width: 450px;
height: 70px;
display: block;
}

#news {
height: 100px;
width: 500px;
float: left;
}

#topmenu {
height: 50px;
}

#conteneur {
padding : 10px;
}

#slideshow {
height: 235px;
clear: both;
margin: 10px 0 10px 0;
}

#breadcrumbs {
height: 20px;
}

#gauche {
width: 210px;
float: left;
}

#centre.normal{
float: left;
width: 590px;
}


#centre.large {
float: left;
width: 790px;
}

#centre div.interne {
padding: 10px;
}


#droite {
width: 200px;
float: left;
}

#footer {
padding: 10px;
text-align: center;
}

/*** menu colonne ***/
h3 {
color: black;
font-size: 18px;
/*font-weight: bold;*/
padding-left: 20px;

}

ul.menu li {
background: none;
border-bottom: 30px solid none;
}

ul.menu li ul li{
margin-left: 10px;
background: #666;

}

ul.menu li a {
color: #fff;
text-decoration: none;
line-height: 25px;
padding-left: 10px;

}

ul.menu li a:hover {
color: #000;
color : grey;
}
ul.menu li li a:hover {
color: #000;
color : #D5D8D8;
}


/*** module gris ***/
div.moduletable_gris h3 {
height: 36px;
background: url(../images/titre_modulegris.png) left top repeat-x;
line-height: 30px;
color: #fff;
font-weight: normal;

}

div.moduletable_gris {
background: #9e9e9e url(../images/bas_modulegris.png) left bottom repeat-x;
padding-bottom: 35px;
color: #fff;
margin-top: 10px;
}

div.moduletable_gris a {
color: red;
padding-left : 10px;
line-height: 20px;
}

/*** formulaires ***/
input#modlgn-username, input#modlgn-passwd {
width: 153px;
height: 28px;
line-height: 25px;
background: url(../images/login_form.png) left top no-repeat;
border: none;
margin: 0;
padding: 0px 0 5px 10px;
}

#login-form fieldset{
border: none;
}

#login-form li{
line-height: 20px;
}

input.button {
background: #333;
color: #fff;
border: none;
padding: 7px;
cursor: pointer;
}
#pied{
background : blue;
width : 500px ;
margin-top: 100px;
/*float: bottom ;*/
}

#picture {
/*border: 1px solid red;*/
z-index: 4;
position:absolute;
width:200px;
height:720px;
background:url(../images/picture_1.jpg) no-repeat black;

}
#picture ul {
margin-left:100px;
}
#picture ul li li {
text-indent:0px;
text-align: left;
color:white;
background:#E9982E;
z-index:8;
}
#contenu_principal {
/*border-radius: 5px; */
padding-left: 200px;
padding-right: 20px;
padding-top: 100px;
padding-bottom: 20px;
background : #C68400 ;
/*background : white;*/
width : 750px ;
min-height : 600px;

margin-top: 0px;
margin-left: 210px ;
/*border: 1px solid red;*/
position : absolute;
z-index: 1;
}
#menu_principal {
background : none;
width : 5% ;
position : relative ;
float: center;
border: 1px solid #fff;
}
#logo {
width : 500px ;
height : 80px ;
margin-top: -80px;
margin-left : 1140px;
position: absolute;
float : left;
/*border: 1px solid #fff;*/

background: url(../images/logo_2011.png) right top no-repeat;
z-index: 60;
}

#juste_un_conteneur {
background : black ;
width : 98% ;
height : 0% ;
margin-top: 0px;
margin-right : 1px ;
position : relative;
/*border: 1px solid red;*/
}

#youtube{
width:100px;
height:50px;
margin-top: 750px;
margin-right : 100px ;
background : none ;
float: left ;
position:relative;
/*border: 1px solid red;*/
z-index: 100;
background:url(../images/youtube_logo.png) no-repeat black;
}
#facebook{
width:100px;
height:52px;
margin-top: 750px;
margin-left : -100px ;
background : none ;
float: left;
background:url(../images/facebook_logo.png) no-repeat black;
position:relative;
/*border: 1px solid red;*/
z-index: 100;

}
#menu_musee{
z-index: 10;
position:absolute;
width:300px;
height:55%;
margin-left:150px;
margin-top:20px;
background:none;
line-height:2px;


}
#menu_musee ul li a{
/*border-radius: 5px; */
font-size : 26px;
background:black;
padding-left: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
box-shadow: 4px 4px 12px black;
line-height: 1px;
}

#menu_musee ul li li a{
font-size : 16px;
background:none;
box-shadow: none;
color: white;
padding-top : 5px;
padding-bottom: 0px;
line-height:2px;

}
#menu_musee ul li {

text-align: left;
color:white;
background:none;
font-size : 22px;
margin-top:50px;

}
#menu_musee ul li li {
width:300px;
text-indent:40px;
padding-top:15px;
text-align: left;
color:black;
margin-top:15px;
margin-bottom:15px;
line-height: 15px;
z-index:2;
font-size : 16px;

line-height:2px;
}
#compagnons {
width:383px;
height:53px;
margin-top:340px;
margin-right:400px;
z-index:60;
/*border: 1px solid red;*/
position:relative;
float:right;
background:url(../images/bandeau_reduit_compagnons.jpg) no-repeat black;
box-shadow: 4px 4px 12px #C68400 ;
}

Merci d'avance

[kursus]

Re : problème de résolution

Salut,

Pas de lien = pas possible de t'aider.

[raph_egg]

Re : problème de résolution

Salut,

Pas de lien = pas possible de t'aider.

Logique :-)

www.lemusee.ch/site1

[raph_egg]

Re : problème de résolution

Help.

Qqn a-t-il une solution ?

[kursus]

Re : problème de résolution

Tu as un margin-left incohérent sur ton logo (+ de 1000px).

De manière générale ton site à été mal conçu. Développé visiblement sur une résolution >1500px tu as rajouté des compensations un peu partout sous forme de margins et paddings sans prendre en compte les autres résolutions. Difficile de prendre le temps de t'aider correctement.

En théorie pour faire bien il te suffit d'un wrapper de 960px qui englobe tout ton site sur lequel tu vas passer un margin:0 auto;
Donc suit ce conseil, vire toutes les marges que tu as rajouté à l'arrache et ça devrait aller mieux.

[raph_egg]

Re : problème de résolution

Tu as un margin-left incohérent sur ton logo (+ de 1000px).

De manière générale ton site à été mal conçu. Développé visiblement sur une résolution >1500px tu as rajouté des compensations un peu partout sous forme de margins et paddings sans prendre en compte les autres résolutions. Difficile de prendre le temps de t'aider correctement.

Tu as vu juste, je suis sur un écran à résolution élevée. De plus, c'est mon premier template développé depuis zéro.

En théorie pour faire bien il te suffit d'un wrapper de 960px qui englobe tout ton site sur lequel tu vas passer un margin:0 auto;
Donc suit ce conseil, vire toutes les marges que tu as rajouté à l'arrache et ça devrait aller mieux.

Donc si je te comprends bien, mon wrapper doit avoir 960px de large et contenir tous mes autres div. Mais comment je suis bien obligé de définir des marges (ex. pour l'image de gauche, pour la partie du contenu,...). Peux-tu m'en dire un peu plus stp ?

Merci d'avance.

[kursus]

Re : problème de résolution

A l'intérieur du wrapper tu peux mettre les marges que tu veux.

Donc

<body>
<div id="wrapper">

contenu du site

</div>
</body>

#wrapper {
width: 960px;
margin:0 auto;
}