Problème avec la résolution de mon site !
Orestis_Man
-
Orestis_Man -
Orestis_Man -
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,
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:
- Problème avec la résolution de mon site !
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site de partage de photos - Guide
- Meilleur site de vente entre particulier - Guide
5 réponses
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" >
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;
}
/* 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;
}
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,
http://www.agence-celliers.com/Telechargements/HTML%20et%20CSS.zip
Merci d'avance,
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;}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question