Mise en page suivant résolution

mela -  
fxtaa Messages postés 1050 Date d'inscription   Statut Membre Dernière intervention   -
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

  1. Utilisateur anonyme
     
    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
  2. mela
     
    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
    1. Utilisateur anonyme
       
      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
  3. fxtaa Messages postés 1050 Date d'inscription   Statut Membre Dernière intervention   74
     
    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