Je veux que mon site s'adapte a tous les resolution d'ecran

merci pour la reponse mais je veux que mon site soit flexible et prend toute la llargeur de l'ecran dispo

Bonjour, d'après ce que je comprends tu aimerais avoir un Responsive Webdesign
Personnellement pourquoi ne pas prendre bootstrap, bootstrap-responsive afin de pouvoir l'améliorer?:)

Cordialement.
<?php

Bonjour,

Un lien intéressant :
https://www.alsacreations.com/tuto/lire/547-Faire-un-site-pour-toutes-les-resolutions.html

merci a tous pour vos réponses je suis entrain de lire tous les sujets qui même au liens proposés .Et je crois que je vais y trouver mon bonheur

Bonjour,
Ce que vous demandez s'appelle le Responsive Webdesign! Il s'agit donc de retravailler le site afin qu'il s'adapte parfaitement aux différentes tailles d'écrans, que ce soit ordinateurs, tablettes ou bien smartphones. L'utilisateur aura donc un confort de lecture accru ainsi qu'un meilleur esthétique visuel.

Bien cordialement,

Loïc

Bonsoir,

Votre solution s'appelle "responsive design" et tripoter les CSS via les media-queries en CSS3.

Un exemple ici:
http://www.camping-car.org/index.php?page=articles/arnaques/accueil

Sur un écran de plus de 1200 pixels, le contenu est sur 4 colonnes, resserez l'écran il passe à 3 puis 2 puis 1 colonne et sur tel mobile finit sur une colonne en enchaînant tout le contenu.

Tout est réalisé en CSS3 via des media-queries. Exemple:

.threeCols {   /* gère l'affichage bloc de texte sur deux colonnes */
    -webkit-column-count: 3;
    -webkit-column-rule: 1px dotted #b0b0b0;
    -webkit-column-gap: 16px;
    -moz-column-count: 3;
    -moz-column-rule: 1px dotted #b0b0b0;
    -moz-column-gap: 16px;
    column-count: 3;
    column-rule: 1px dotted #b0b0b0;
    column-gap: 16px;
    padding-bottom: 6px;
    border-bottom: 1px dotted #7f7f7f;
    margin-bottom: 12px;
    margin-top: 6px;
}

@media only screen and (max-width: 1920px) {
    .threeCols {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (max-width: 1280px) {
    .threeCols {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (max-width: 800px) {
    .threeCols {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (max-width: 600px) {
    .threeCols {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

.twoCols section, .threeCols section {
    display: inline-block;
} 

Ce code CSS appliqué à un div, exemple:

<div class="theeCols">
 ............
</div>

affiche normalement sur 3 colonnes pour des écrans de 1200 pixels, mais passe à 4 colonnes sur des écrans plus lardes et 2 ou 1 colonnes sur des écrans moins larges ou tel mobiles.

A+

A+