Avis, conseils, astuces pour faire un design extensible

Par jessyjames05, il y a 13 ans

Les bases HTML/CSS

Bonjour,

Je suis entrain de réaliser un site de résolution 1920x1200 que je voudrais bien adapter le site selon la résolution moins importantes des visiteurs donc faire design extensible et pas fixe.

J'ai fait pas mal de recherches et j'ai trouvé plusieurs pistes qui tournent toutes autour de la même chose avec les histoires de html et body avec des marges à 0, des pourcentages... Après avoir visualisé l'ensemble de ces solutions, aucune ne m'est très claire et même si tout tourne autour de la même chose, selon les exemples, ce n'est pas tout à fait pareil alors je suis un peu perdu...

Que me conseillez-vous comme code à rentrer exactement pour réaliser tout cela ?

Merci pour vos réponses !

3 réponses

William_LF, il y a 13 ans

Salut,

Pour que ton site s'adapte à l'écran de l'utilisateur, il faut que l'ensemble de tes blocs possèdent des tailles (width) en pourcentage.

Tu peux te baser sur cet exemple :

<header style="width: 80%"></header>
<section class="body" style="width: 80%">
    <div class="content" style="width: 70%"></div>
    <div class="sidebar" style="width: 30%"></div>
</section>
<footer style="width: 80%"></footer>

Ciao

jessyjames05, il y a 13 ans

ok merci pour l'astuce, je vais essayer ca ;-)

Lotfi Berrahal, il y a 13 ans

Très bonne solution cependant méfie toi de bien gérer tout tes width pareil ainsi que les font-size il ne faut pas leur mettre des pixel sinon le design du site va bouger mais pas l'écriture et ça risque de ne plus faire l'effet voulu!
Si la personne voit ton site avec un smartphone le rendu sera peut etre pas optimisé!