Problème avec la résolution de mon site !

Bonjour,
J'ai un problème avec mon site :

Ma résolution d'écran est 1600x900. J'ai créé mon site avec du html et du css (site web statique). Mais quand je le regarde avec une résolution supérieure ou inférieure, tout se détraque ! Pourtant, tous mes <div> etc.. ont un CSS derrière avec des pourcentages ...

Voila le lien vers le site : www.agence-celliers.com

Merci d'avance,

5 réponses

  1. Commence par remplacer ta 1ere ligne de code par ceci. Ça ne risque pas de régler le problème, mais ça va empêcher d'en avoir d'autres!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    
    0
    1. Merci, j'envoie le code CSS et HTML par la suite.
      0
      1. Modérateur
        Voici le css :

        /* Layout Stylesheet */

        body {
        background-color:#000000;
        color: #333333;
        text-align:center;
        background-image: url(../images/fondPourLeSite.jpg);
        padding:0;
        }

        #flashcontent {
        /*margin-left: 334px;
        margin-top: 40px;*/
        }
        #miyeu {
        overflow:hidden;
        /*background-image: url(../images/fondPourLeSite.jpg);*/
        } /* celui là est fait pour contenir
        le menu de gauche et le contenu de page
        tout en permettant de laisser le footer en bas
        même si le contenu de page est vide */

        #flashversion {
        /*margin-left: 334px;*/
        padding-top: 8px;
        }
        #global {
        /* permet de centrer le site entier */
        /* Bug sur IE inferieur à 6 */
        margin-left: auto;
        margin-right: auto;
        background-image: url(../images/fondPourLeSite.jpg);
        width: 1000px;
        ;
        }
        #header {
        height: 124px;
        background-image: url(../images/fondHeader.jpg);
        /* menu alternatif en cas de non-affichage du .swf */

        }

        #footer {
        /* pied de page */
        margin-top:0px;
        background-image: url(../images/fond_footer.jpg);
        background-repeat: no-repeat;
        margin-left: 54px;
        padding-bottom: -10px;
        }

        /* _______POUR LE MENU___________________*/

        ul.menu
        {
        height: 43px ;
        margin: 0 ;
        padding: 5 ;
        padding-top:5;
        background: url(bg_menu.gif) repeat-x 0 -25px ;
        list-style-type: none ;
        }
        /* On donne une hauteur au menu, correspondant a
        la taille de l'image utilisée en fond, on met ensuite l'image de fond
        avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */

        ul.menu li
        {
        float: left ;
        text-align: center ;
        }/* On rend les li en flottant pour pouvoir les
        afficher horizontalement, on cache les puces, et on centre le texte */

        ul.menu li a
        {
        width: 80px;
        line-height: 30px;
        font-size: 1em;
        color: #666;
        display: block;
        text-decoration: none;
        border-right: 1px solid #666;
        margin-top: 5px;
        }/* C'est sur les liens que le gros du travail est
        effectué, largeur, hauteur de ligne, taille de police, graisse de police,
        espacement des lettres, couleur, bordure et decoration du texte.
        Nous pouvons dimensionner les a grâce à la propriété display: block ; */

        ul.menu li a:hover
        {
        background: url(bg_menu.gif) repeat-x 0 0 ;
        }/* Et pour finir on décale l'image de fond au passage
        de la souris pour laisser aparaître l'état survolé de l'image,
        voir le tutoriel sur les roll over pour plus de détails */

        /* _________________________________________________________*/

        *.fondSombre {
        color: #cccccc;
        }

        *.prix {
        color: #850708;
        font-weight:bold;
        position: absolute;
        bottom: 10%;
        }

        select {
        font-size: 0.7em;
        color: #444444;
        padding-left: 0px;
        margin-left: 0px;
        }

        /* _________ seulement pour les pages ventes et location ____________________*/

        #header_annonces {
        height: 42px;
        background-image: url(../images/headerventeloc.jpg);
        padding-bottom: -15px;
        }

        #leftbar2 {
        /* bloc de recherche à gauche de la page */
        color: white;
        font-weight: bold;
        font-style: normal;
        overflow:hidden;
        float:left;
        width:198px;
        background-image: url(../images/fondRecherche2.jpg);
        background-repeat:no-repeat;
        padding-top: 15px;
        margin-left: 54px;
        text-align:left;
        }

        div.block_recherche_locEtVente {
        margin-right: 3px;
        margin-left: 1px;
        padding-top: 5px;
        padding-bottom: 10px;
        padding-left: 15px;
        }

        div.recherche_footer2{
        background-image: url(../images/fondRecherche_footer2.jpg);
        height:63px;
        background-repeat:no-repeat;
        margin-top: 19px;
        padding-top: 19px;
        padding-left: 10px;
        margin-left: 2px;
        }

        #contenu2 {
        /* le contenu à droite du leftbar */
        padding-left: 5px;
        margin-left:252px;
        }

        #annonce{
        height:161px;
        background-image: url(../images/fondVignette.jpg);
        width: 689px;
        /*margin-bottom: -10px;*/
        text-align: left;
        position: relative;
        margin-top: -10px;

        }

        #annonce p, h2, h3{
        font-weight:normal;
        font-style: normal;
        font-size: 1.2em;
        padding-left: 205px;
        padding-right: 3px;
        margin-bottom:-4px;
        }
        #annonce img{
        position:absolute;
        width:186px;
        height:140px;
        padding-top:8px;
        padding-left:8px;
        }
        #annonce h3{
        padding-top:7px;
        }
        #annonce p{
        font-size: 0.9em;
        height:100px;
        overflow:hidden;
        }

        /* _______seulement pour la page d'accueil______ */

        #header_nouveautes {
        height: 39px;
        background-image: url(../images/headernouveaute.jpg);
        background-repeat:no-repeat;
        padding-bottom: -18px;
        }
        #autopromo {
        height:346px;
        /*background-image: url(../images/fond_autopromo.jpg);*/
        width: 645px;
        }
        #footer_nouveautes {
        height: 12px;
        width:644px;
        background-image: url(../images/footernouveaute.jpg);
        background-repeat:no-repeat;
        margin-left:1px;
        clear:left;
        }
        div.annonce_new img{
        width:186px;
        height:140px;
        margin-left: -6px;
        margin-top: -5px;
        }
        div.annonce_new{
        float:left;
        width:211px;
        height:193px;
        background-image: url(../images/fondNouveautes.jpg);
        background-repeat:no-repeat;
        overflow:visible;
        }
        div.annonce_new p{
        font-size: 0.8em;
        color: #FFFFFF;
        margin-left: -10px;
        }
        #leftbar {
        /* bloc de recherche à gauche de la page */
        color: white;
        font-weight: bold;
        font-style: normal;
        overflow:hidden;
        float:left;
        width:244px;
        background-image: url(../images/fondRecherche.jpg);
        background-repeat:no-repeat;
        padding-top: 85px;
        margin-left: 54px;
        text-align:left;
        }
        div.block_recherche {
        background-image: url(../images/separation_recherche.gif);
        background-repeat:repeat-x;
        margin-right: 3px;
        margin-left: 1px;
        padding-top: 5px;
        padding-bottom: 10px;
        padding-left: 15px;

        }
        #leftbar label{
        padding-right:10px;
        padding-left:10px;
        }
        div.recherche_footer{
        background-image: url(../images/fondRecherche_footer.jpg);
        height:97px;
        background-repeat:no-repeat;
        margin-top: 0px;
        padding-top: 18px;
        padding-left: 32px;
        }

        #contenu {
        /* le contenu à droite du leftbar */
        padding-left: 5px;
        margin-left:298px;
        }

        /* _______seulement pour la Fiche______ */

        #fotofiche_big{
        float:left;
        height:238px;
        width:314px;
        background-image:url(../images/fond_fotofiche_big.jpg);
        background-repeat:no-repeat;
        margin-left: 18px;
        margin-top: 15px;
        padding-left: 3px;
        padding-top: 3px;
        margin-bottom: 5px;
        }
        #colonneGauche{
        float: left;
        margin-top: -15px;

        }
        #vignettes{
        padding-top:15px;
        float: left;
        margin-left: 2px;
        margin-right: 35px;
        }
        #fotofiche_small{
        height:52px;
        width:68px;
        background-image:url(../images/fond_fotofiche_small.jpg);
        background-repeat:no-repeat;
        padding-left: 2px;
        padding-top: 2px;
        }
        #fiche{
        margin-left: 55px;
        width:896px;
        background-image:url(../images/fondFiche.jpg);
        background-repeat:repeat-y;
        text-align: left;
        margin-bottom: -10px;
        }

        #fiche h1{
        font-size: 1.5em;
        font-weight:lighter;
        line-height: 0.1;
        padding-left: 15px;
        text-align: left;
        }

        #header_fiche{
        height:41px;
        width:896px;
        background-image:url(../images/header_fiche.jpg);
        background-repeat:no-repeat;
        padding-top: 3px;
        }
        #footer_fiche{
        height:31px;
        width:896px;
        background-image:url(../images/footer_fiche.jpg);
        background-repeat:no-repeat;
        margin-top: 0px;
        margin-left: 55px;
        }
        #fiche_tech{
        margin-top: 15px;
        margin-bottom: 0px;
        margin-left: 450px;

        }
        #bouton_mail{
        background-image:url(../images/bouton_barre.jpg);
        background-repeat:no-repeat;
        width:362px;
        height:35px;
        text-align: center;
        margin-left: 5px;
        margin-top: 0px;
        padding-top: 5px;
        font-size: 1.2em;
        font-weight: bold;
        cursor: pointer;
        display: block;
        }
        #bouton_retour{
        background-image:url(../images/bouton_barre_petit.jpg);
        background-repeat:no-repeat;
        width:154px;
        height:38px;
        text-align: center;
        margin-top: 2px;
        padding-top: 5px;
        font-size: 1.2em;
        font-weight: bold;
        left: 1431px;
        top: 16px;
        float: right;
        margin-right: 7px;
        cursor: pointer;
        }
        table {
        color:#FFFFFF;
        border:hidden;
        border-collapse: collapse;
        background-image:url(../images/fond_fichetech.jpg);
        width: 413px;
        font-size: 1.2em;
        }
        tr.head{
        background-image:url(../images/fiche_tech_header.jpg);
        height: 36px;
        text-align:center;
        }
        tr.foot{
        text-align:center;
        background-image:url(../images/fiche_tech_footer.jpg);
        color: #850708;
        font-weight:bold;
        height: 36px;
        font-size: 1.4em;
        }
        td.droite{
        text-align:right;
        padding-right: 10px;
        font-weight: normal;
        }
        td, th {
        border: hidden;
        width: 50%;
        font-weight: bold;
        padding-left: 10px;
        }
        ul#lesTroisPlus
        {
        margin: 10;
        color: #850708;
        font-weight:lighter;
        bottom: 10%;
        font-size: 1.5em;
        background-image: url(../images/barrerouge.gif);
        background-repeat: repeat-y;
        padding-left: 25px;
        margin-left: 25px;
        float: left;
        width: 350px;
        }
        p.annonce{
        margin-left:400px;
        padding-left: 25px;
        padding-right: 40px;
        text-align: justify;
        color: #cccccc;
        background-image: url(../images/barreblanche.gif);
        background-repeat: repeat-y;
        }
        div.infosDuBas{
        margin-top:0px;
        margin-bottom: 0px;
        width: 896px;
        clear: left;
        height: 150px;
        }
        div#lesDeuxBoutons{
        margin-top: 0px;
        clear: left;
        margin-left: 20px;
        }
        #interlocuteurLink{
        color: #990000;
        text-align: right;
        text-decoration: underline;
        display: block;
        height: 30px;
        margin-right: 30px;
        font-size: 1.5em;
        margin-top: 15px;
        }
        /* _______seulement pour la page contact______ */

        #main_contact{
        margin-left: 55px;
        width:894px;
        text-align: left;
        background-image: url(../images/contact_body.jpg);
        background-repeat: repeat-y;
        }
        #deux_colonnes{
        background-image:url(../images/contact_header.jpg);
        background-repeat:no-repeat;
        width:894px;
        padding-top: 20px;
        padding-bottom: 20px;
        }
        #colonne_gauche{
        float: left;
        padding-left: 25px;
        padding-right: 28px;
        width: 410px;
        text-align: center;
        }
        #colonne_gauche h4{
        text-decoration: underline;
        }
        #colonne_gauche p{
        margin-top: 25px;
        }
        #colonne_gauche a{
        color:#660000;
        text-decoration: underline;
        }
        #colonne_gauche h1{
        line-height: 1;
        margin-bottom: 5px;

        }
        #colonne_droite{
        margin-left: 464px;
        margin-top: 0px;
        text-align: center;
        }
        #alerte_titre h1{
        text-align: center;
        margin-top: 3px;
        margin-bottom: 3px;
        font-size: 1.75em;
        font-weight: normal;
        color: #EEEEEE;

        }
        #footer_contact{
        height:19px;
        width:894px;
        background-image:url(../images/contact_footer.jpg);
        background-repeat:no-repeat;
        margin-top: -5px;
        margin-left: 0px;
        clear: left;
        }
        #block_alerte {
        margin-right: 3px;
        margin-left: 1px;
        padding-top: 13px;
        padding-bottom: 13px;
        padding-left: 8px;
        font-weight: bold;

        }
        #block_alerte p{
        display:inline;
        margin-right: 25px;
        text-align: left;
        width: 150px;
        }
        #postit{
        background-image: url(../images/postit.jpg);
        background-repeat: no-repeat;
        width: 97px;
        height: 109px;
        float: left;
        margin-top: -65px;
        margin-left: 5px;

        }
        #alerte_titre{
        /*margin-left: 115px;*/
        background-image: url(../images/postit.jpg);
        background-repeat: no-repeat;
        width: 100%;
        height: 150px;
        margin-left: 15px;
        margin-right: 15px;
        padding-top: 20px;
        }
        div.valide_alerte{
        background-image: url(../images/alerte_validation_fond.jpg);
        background-repeat: no-repeat;
        height: 86px;
        background-position: center;
        margin-top: 0px;
        padding-top: 35px;

        }

        /* _______seulement pour la page infos______ */

        #infos_main{
        margin-left: 55px;
        width:894px;
        text-align: left;
        background-image: url(../images/infos_main.jpg);
        background-repeat: repeat-y;
        }
        #infos_footer{
        height:22px;
        width:894px;
        background-image:url(../images/infos_footer.jpg);
        background-repeat:no-repeat;
        margin-top: -5px;
        margin-left: 0px;
        clear: left;
        }
        #deux_colonnes_infos{
        background-image:url(../images/infos_header.jpg);
        background-repeat:no-repeat;
        width:894px;
        padding-bottom: 20px;
        }
        #colonne_gauche_infos{
        float: left;
        padding-left: 15px;
        padding-right: 15px;
        width: 550px;
        text-align: left;
        margin-top: -15px;

        }
        #colonne_gauche_infos span{
        float: left;
        padding-top: 25px;
        padding-left: 15px;

        }
        #colonne_droite_infos{
        margin-left: 604px;
        text-align: left;
        margin-top: 0px;

        }
        #colonne_droite_infos h1{
        padding-top: 6px;

        }
        #news{
        margin-top: 10px;
        background-image: url(../images/separation_news.gif);
        background-repeat: repeat-x;
        background-position: bottom;

        }
        #newsLink{
        color: #990000;
        text-align: right;
        text-decoration: underline;
        display: block;
        height: 30px;

        }
        #date{
        float: left;

        }
        #news p{
        margin-left: 80px;
        background-image: url(../images/barrerouge.gif);
        background-repeat: repeat-y;
        text-align: justify;
        padding-left: 10px;

        }
        #news img{
        margin-left: 0px;
        margin-top: 0px;

        }
        ul#legende_news
        {
        height: 43px;
        padding: 5;
        padding-top:15px;
        background: url(bg_menu.gif) repeat-x 0 -25px;
        list-style-type: none;
        display: inline-block;
        }
        ul#legende_news li
        {
        float: left;
        text-align: center;
        margin-left: 4px;
        }

        ul#links{
        margin-top: 40px;
        font-weight: bold;

        }
        ul#links li{
        margin-top: 10px;

        }

        ul#links li a{
        margin-top: 10px;
        color: #990000;
        text-decoration: underline;
        }
        0
      2. Ok mais je copie colle ce css dans mon fichier css ?
        0
      3. Modérateur
        Non, c'est le css de ton site qui n'est pas modifié, je l'ai mis pour que ceux qui s'y connaissent t'aident.
        0
      4. En fait c'est pas mon CSS ça ...
        0
      5. Modérateur
        c'est celui qui s'affiche dans le code source.
        0
    2. Voila un lien pour telecharger un fichier ZIP avec les codes à l'interieur.

      http://www.agence-celliers.com/Telechargements/HTML%20et%20CSS.zip

      Merci d'avance,
      0
      1. Modérateur
        Pas la peine, pour obtenir cela, suffit de faire un affichage du code source dans un navigateur.
        0
      2. mais pour le css on peut le voir aussi ?
        0
    3. Mon CSS est le suivant :

      #header {background-color: #E0E0E0;position:absolute; left: 0%; top: 0%;right: 0%;bottom: 85%;width: 100%;}
      #logo {position: relative; left: 20%; top: 20%;}
      #container {font-family: Arial;background-color: #b9b9b9;position:absolute; left: 0%; top: 15%;right: 0%;bottom: 10%;width: 100%;overflow: auto;}
      #footer {background-color: #bfbf5a;position:absolute; left: 0%; top: 90%;right: 0%;bottom: 0%;width: 100%;height: 30%;overflow: auto;}
      #HOME{display: inline;position: absolute;left: 54%;top: 50%;list-style: none;}
      #HOME {text-decoration: none;color: #8D8D8D;list-style: none;}
      #HOME:hover {color:3284A8}
      #ABOUTME{display: inline;position: absolute;left: 60%;top: 50%;list-style: none;}
      #ABOUTME {text-decoration: none;color: #8D8D8D;list-style: none;}
      #ABOUTME:hover {color:3284A8}
      #CV{display: inline;position: absolute;left: 68%;top: 50%;list-style:none;}
      #CV {text-decoration: none;color: #8D8D8D;list-style:none;}
      #CV:hover {color:3284A8}
      #EXPERTISE-SERVICES {display: inline;position: absolute;left: 72%;top: 50%;list-style:none;}
      #EXPERTISE-SERVICES {text-decoration: none;color: #8D8D8D;list-style:none;}
      #EXPERTISE-SERVICES:hover {color:3284A8}
      #SDL {position:absolute; left: 87%; top: 34%;right: 0%;bottom: 0%;}
      #ID {position:absolute; left: 20%; top: 10%;right: 0%;bottom: 0%;}
      #email {position:absolute; left: 38%; top: 10%;right: 0%;bottom: 0%;}
      #phone {position:absolute; left: 55%; top: 10%;right: 0%;bottom: 0%;}
      #rss {position:absolute; left: 71%; top: 10%;right: 0%;bottom: 0%;}
      #Bottom_Info1 {position:absolute; left: 24%; top: 10%;right: 0%;bottom: 0%;color: #E0E0E0;}
      #Bottom_Info2 {position:absolute; left: 42%; top: 10%;right: 0%;bottom: 0%;color: #E0E0E0;}
      #Bottom_Info3 {position:absolute; left: 59%; top: 10%;right: 0%;bottom: 0%;color: #E0E0E0;}
      #Bottom_Info4 {position:absolute; left: 75%; top: 10%;right: 0%;bottom: 0%;color: #E0E0E0;}
      #Bottom_Info11 {position:absolute; left: 23%; top: 33%;right: 0%;bottom: 0%;color: #E0E0E0;}
      #Bottom_Info22 {position:absolute; left: 41.5%; top: 34%;right: 0%;bottom: 0%;color: #E0E0E0;}
      #Bottom_Info33 {position:absolute; left: 58%; top: 34%;right: 0%;bottom: 0%;color: #E0E0E0;}
      #Bottom_Info44 {position:absolute; left: 74%; top: 32%;right: 0%;bottom: 0%;color: #E0E0E0;}
      #Bottom_Info444-1 {position:absolute; left: 20%; top: 10%;right: 0%;bottom: 0%;}
      #Bottom_Info444-2 {position:absolute; left: 5%; top: 10%;right: 0%;bottom: 0%;}
      #Bottom_Info444-3 {position:absolute; left: -10%; top: 10%;right: 0%;bottom: 0%;}
      #Bottom_Info222 {position:absolute; left: 38.5%; top: 40%;right: 0%;bottom: 0%;color: #E0E0E0;}
      #Bottom_Info222-2 {position:absolute; left: 38.5%; top: 57%;right: 0%;bottom: 0%;color: #E0E0E0;}
      #Bottom_Info222-3 {position:absolute; left: 38.5%; top: 74%;right: 0%;bottom: 0%;color: #E0E0E0;}
      #WebMaster {color: #E0E0E0;position:absolute; left: 1%; top: 80%;right: 0%;bottom: 0%;}
      #TEXT {font-family: Times New Roman;font-size: 24px;font-weight: normal}
      #photo {position: absolute; left: 20%;top: 15%;right: 0%;bottom: 0%;}
      #Bulle1 {position: absolute; left: 51%; top: 40%;right: 0%; bottom: 0%;}
      #Bulle2 {position: absolute; left: 61%; top: 40%;right: 0%; bottom: 0%;}
      #Bulle3 {position: absolute; left: 71%; top: 40%;right: 0%; bottom: 0%;}
      #Intro {margin-left: 51%;margin-top: 10%;font-family: Times New Roman;font-size: 30px;font-weight: normal;}
      #Intro_Down {margin-left: 51%;margin-top: 12%;font-family: Times New Roman;font-size: 18px;font-weight: normal;}
      
      
      
      0