CSS selon résolution (décalage graphisme)

Bonjour,

C'est après moulte réflexions et lectures que je me décide à vous écrire
En effet je n'aime pas déranger les gens inutilement, surtout en informatique, mais là je coince :S

Je suis en train de mettre à jour un site et d'integrer un nouveau graphisme, et je me retrouve avec une mise en page qui ressemble à peu près à ça : (je suis pas graphiste hein, on ne se moque pas ^^)



En résolution 1280 et plus, pas de problème, c'est ce qu'on voit.
En résolution 1024 et 800*600, le bas blesse.
En effet j'aimerais que l'alignement en haut à gauche se fasse sur la div "#content" et non sur la div "#container" qui contient du graphisme superflu.
Car ayant mis un margin:0 auto; sur le container, le centrage se fait par rapport à celui-ci et non le content ...

J'ai donc réfléchis à plusieurs solutions.

J'ai pensé à utiliser des feuilles de styles différentes en utilisant ce code :
<link media="only screen and (max-device-width: 1024px)"
href="style2.css" type="text/css" rel="stylesheet">

mais l'idée de faire une feuille de style en plus juste pour ça ne me séduit pas ..

J'ai aussi constaté qu'en rajoutant 2 lignes dans le CSS je résolvait mon problème pour les résolutions 800*600 et 1024 comme ceci :

#Container{ /* contains ALL elements */
margin:0 auto;
position:relative;
left:-50px;
}

En effet le graphisme 'inutile' pour les basses résolutions fait 50px de large..

Le problème en rajoutant ces 2 lignes, c'est que ça me fait un joli décalage de 50px à gauche sur mon centrage pour les résolutions supérieures à 1024 ...
Que faire ?

N'est-il pas possible (de la même manière qu'il existe les balises conditionnelles html pour ie "IF IE ...") d'intégrer directement dans le code CSS une sorte de "condition" qui explique que ces lignes là sont pour les résolutions inférieures ou égales à width=1024px ?

Je vous remercie d'avance pour vos suggestions, sans quoi je rajouterai une feuille CSS supplémentaire (mais c pas top :S)

A très bientôt j'espère !

Salut Carostory,

Je suis pas sûr d'avoir bien compris ton problème (alignement en haut à gauche ?).

Tu n'as pas mis ton code CSS, pas évident de bien comprendre comment est faite ta page.

Pourquoi ne pas utiliser une image de fond que tu appliques à ton BODY en la centrant (background-position:center;)? Ton image de fond (1600px de large par exemple, sur 20px de haut, contient un fond bleu marine, puis un bleu moyen et enfin ton fond boisé...le tout centré bien évidemment au milieu).Ainsi, quelque soit ta résolution, tu auras toujours ton graphisme centré au milieux. Tu centre ta div #content (width : 750px; margin:0 auto;) qui contient tes textes, et hop le tour est joué. Ton site est toujours centré, visible en 800x600, et s'adapte aux grandes résolutions puisque l'image de fond de 1600px de large remplira le "vide".

La div #container devient du coup accessoire...
Modifié par volonia75 (13 Jan 2009 - 18:04)

merci pour ta réponse

alors j'ai essayé ton astuce (pas bête) mais je me suis rappelée pourquoi je n'avais pas fait ça, c'est parceque l'align center ne voulait pas fonctionner ni sous firefox, ni sous ie :S

je copie donc mon code :

*{
margin:0px;
}

body{
margin:0 auto;
text-align:center;
background-color:#002456;

background-image:url(images/texture.jpg);
background-repeat:repeat-y;
width:1115px;
height:auto;

font-family : Arial, Helvetica, Verdana, Univers, sans-serif;
color : white;
font-size : 9pt;
text-decoration : none;
}

/* MAIN ELEMENTS */

#Content{
text-align:left;
margin:0 auto;
width:1003px;
height:auto;
} 

J'ai essayé d'enlever le "text-align:left;" de #Center pour voir, ça n'y change rien :S

une idée ?

Ton code CSS me parait bizarre...
Pour faire plus simple, voilà comment je l'aurai refait pour commencer :

Pour ton CSS
-------------

body {
margin:0;
padding:0;
background-color:#002456;
background-image:url(images/texture.jpg);
background-position:top center;
background-repeat:repeat-y;
font-family : Arial, Helvetica, Verdana, Univers, sans-serif;
color : white;
font-size : 9pt;
}

#Content{
margin:0 auto;
width:1003px;
} 

Pour ton HTML
--------------
<html>
<body>

<div id="content">
La fenêtre sera toujours centrée au milieu de la page, et l'image de fond, centrée elle aussi s'adaptera aux écrans larges.
</div>

</body>
</html>

Déjà comme ça, tu obtiens ta div automatiquement centrée sur ta page. L'image de fond dans le BODY est centrée. Si tu comptais utiliser la propriété align:center pour ta div #content, c'est normal que ça ne marche pas. Une div, ce n'est pas comme du texte (à moins de lui donner des propriétés spéciales qui vont dans ce sens, mais je m'éloigne du sujet...)

Quelques petites remarques sur ton code CSS.
- Pourquoi donner une largeur au BODY ? (width=1115px;) Je ne vois pas l'intérêt.
- La propriété text-align:left dans #content, c'est pour aligner le contenu de cette div sur la gauche.
- Mettre une largeur de 1003px à ta div #content alors que tu souhaites que ton site soit visible pour un écran en 800x600, c'est un peu contradictoire (sauf si les ascenceurs horizontaux te plaisent).

Mmm ça marche, mais du coup j'ai un problème avec mon footer.
car celui-ci a une largeur de 1115 que je ne peux réduire, car il fait le lien entre le motif 'bois' et le motif 'bleu' qui l'entoure, je vais en parler à mon supérieur pour voir si on peut pas réduire la largeur ou changer son motif.

En tout cas merci beaucoup pour tes suggestions !

Pour répondre à tes questions, si j'avais mis une largeur au body c'était pour que l'image s'affiche en entier en largeur, je pensais que c'était indispensable alors que non.

Pour la question du 1003px de largeur du content alors qu'on cherche à ce que ça s'affiche un minimum en 800*600, je suis tout à fait d'accord avec toi, on va dire que le graphisme est imposé et que l'on essaye de réduire au max les dégâts

A bientot et merci encore pour ton aide !

du coup j'ai une autre question pour toi.
j'ai pensé à faire une feuille alternative pour les résolutions de 800 à 1024px de largeur, en utilisant le code trouvé ici :

http://www.journaldunet.com/developpeur/client-web/tutoriel-pratique/08/0206-optimiser-site-web-iphone-2/2.shtml

je recopie :

ici l'exemple est pour l'iphone, width=480px, moi j'ai remplacé par 800

<link media="only screen and (max-device-width: 480px)" 
href="iphone.css" type="text/css" rel="stylesheet">

<link media="screen and (min-device-width: 481px)" 
href="standard.css" type="text/css" rel="stylesheet">

.. mais ça ne marche pas, as-tu une idée pourquoi ?
j'ai placé ce code dans le head de ma page bien entendu, et fais un lien vers les bonnes feuilles.