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

Fermé
Orestis_Man - Modifié par irongege le 21/01/2013 à 16:42
 Orestis_Man - 22 janv. 2013 à 19:11
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,
A voir également:

5 réponses

GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
21 janv. 2013 à 16:46
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
Merci, j'envoie le code CSS et HTML par la suite.
0
irongege Messages postés 40847 Date d'inscription jeudi 1 novembre 2007 Statut Modérateur Dernière intervention 29 juin 2023 5 074
Modifié par irongege le 21/01/2013 à 17:15
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
Ok mais je copie colle ce css dans mon fichier css ?
0
irongege Messages postés 40847 Date d'inscription jeudi 1 novembre 2007 Statut Modérateur Dernière intervention 29 juin 2023 5 074
21 janv. 2013 à 17:12
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
En fait c'est pas mon CSS ça ...
0
irongege Messages postés 40847 Date d'inscription jeudi 1 novembre 2007 Statut Modérateur Dernière intervention 29 juin 2023 5 074
21 janv. 2013 à 17:14
c'est celui qui s'affiche dans le code source.
0
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
irongege Messages postés 40847 Date d'inscription jeudi 1 novembre 2007 Statut Modérateur Dernière intervention 29 juin 2023 5 074
21 janv. 2013 à 17:09
Pas la peine, pour obtenir cela, suffit de faire un affichage du code source dans un navigateur.
0
mais pour le css on peut le voir aussi ?
0
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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Uuup SVP
0