Mise en page suivant résolution

Fermé
mela - 22 mars 2010 à 10:00
fxtaa Messages postés 1050 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 2 avril 2015 - 22 mars 2010 à 10:49
Bonjour,

J'ai un gros problème. Mon site est fait à partir de div, mais suivant la résolution, ils bougent. Sur ma feuille css, ils sont en position absolute et les dimensions des marges sont en %.

Comment je peux faire pour qu'ils ne bougent plus.

voici l'adresse de mon site. Je veux qu'ils soient tout le temps placé au milieu.

http://ffsport-tambourin.fr/index.php

Merci pour votre aide

3 réponses

meudah Messages postés 922 Date d'inscription mercredi 24 juin 2009 Statut Contributeur Dernière intervention 11 mars 2020 126
Modifié par meudah le 22/03/2010 à 10:48
Bonjour,

N'utilise tout simplement pas les unités relatives comme les "%" pour fixer la taille de ton site.

Rajoute une div "container" qui va fixer la taille globale de ton site et dans laquelle tu mettras tout ton contenu.

Exemple :

<style>
#container{ width:980px; margin:0 auto }
</style>

<body>
<div id="container">
<div id="menu"></div>
<div id="content"></div>
</div>
</body>
0
Comment ça? Je dois mettre les marges en pixels?

Mais les pixels seront toujours différents suivant la taille de l'écran.

Excuses moi mais je débute, j'ai donc un peu de mal à comprendre
0
meudah Messages postés 922 Date d'inscription mercredi 24 juin 2009 Statut Contributeur Dernière intervention 11 mars 2020 126
22 mars 2010 à 10:44
En gros tu as 2 façon de faire :
- soit tu réalises un site avec une taille fixe qui sera adapté à la résolution d'écran la plus utilisé aujourd'hui (1024x768) et tu utiliseras donc des unités de valeurs fixe comme le ".px"
- soit tu réalises un site qui s'adapte à toutes les résolutions d'écrans et alors tu utiliseras des unités des valeurs relative comme les "%"
0
fxtaa Messages postés 1050 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 2 avril 2015 73
Modifié par fxtaa le 22/03/2010 à 10:50
salut,

Fais comme ca :
<html> 
<head></head> 
<body> 
<div id="conteneur"> 

LE CONTENU DE TOUT TON SITE 

</div> 
</body> 
</html> 

puis le css :
#conteneur{  
position:absolute;  
 left: 50%;   
 width: 1240px;  
 margin-left: -620px; /* moitié de la largeur */  
}
0