Je me tourne vers vous car j'ai un problème ...
Avec plusieurs recherches je ne trouves toujours pas comment BIEN adapter mon site à toute les résolutions ....
Sur chaqu'une de mes recherche je suis tomber sur des sites ou ils me disaient d'ajouter des "width-min" ou "height-min".
Personnllement je trouve sa chiant ... car je dois tout modifier ce qui me prend un temps fou.
J'ai pis voir aussi qu'il y avait si je ne me trompe pas un "meta" je ne sais plus trop quoi à mettre dans le header mais je ne sais pas vraiment ce qu'il faut y mettre ....
Est ce que quelqu'un aurai un script ou un code css qui permetrait à mon site d'être extensible automatiquement sans avoir besoin de retoucher toutes les images qui est assez chian à la long ?
Voici mon code css:
html,body
{
font-family:Helvetica, sans-serif;
font-size:11px;
background-color:#5ec5ea;
width:100%;
margin:auto;
}
@font-face
{
font-family: 'big-bottom';
src: url('/site/Polices/Big_Bottom_Typeface_Normal.ttf');
src: local('?'),
url('/site/Polices/Big_Bottom_Typeface_Normal.ttf') format('truetype');
}
@font-face
{
font-family: 'JandaManateeSolid';
src: url('/site/Polices/JandaManateeSolid.ttf');
src: local('?'),
url('/site/Polices/JandaManateeSolid.ttf') format('truetype');
}
.img-degrade-haut-site
{
background-image:url("/site/Images/img-degrade-haut-site.png");
width:100%;
height:219px;
}
.img-deco-cote-site
{
position: absolute;
background-image:url("/site/Images/img-deco-cote-site.png");
width:338px;
height:634px;
float:left;
top:10%;
}
.img-deco-cote-site2
{
position: absolute;
background-image:url("/site/Images/img-deco-cote-site2.png");
width:338px;
height:634px;
right:0%;
top:10%;
}
#naviguation
{
position: absolute;
top:0%;
left:3%;
}
.cadre-naviguation
{
background-image:url("/site/Images/cadre-naviguation.png");
width:599px;
height:55px;
}
.logo
{
position: absolute;
background-image:url("/site/Images/logo.png");
width:298px;
height:121px;
right:30%;
top:6%;
}
.texte-naviguation
{
left:15%;
right:15%;
position: absolute;
top:-10%;
font-family:big-bottom;
font-size:14px;
}
.img-haut-site-gauche
{
position: absolute;
top:-5%;
right:0%;
background-image:url("/site/Images/img-haut-site-gauche.png");
width:693px;
height:285px;
}
.img-haut-site
{
position: absolute;
right:0%;
top:-10%;
background-image:url("/site/Images/img-haut-site.png");
width:375px;
height:306px;
}
.text-statistique-site
{
left:7%;
position: absolute;
top:28%;
font-family:big-bottom;
font-size:10px;
color:#513729;
text-shadow:#ffffff 1px 1px 1px, #ffffff -1px 1px 1px, #ffffff -1px -1px 1px, #ffffff 1px -1px 1px;
}
#dedicaces
{
position: absolute;
background-color:#dddbcc;
width:100%;
top:25%;
}
.img-dedicaces
{
background-image:url("/site/Images/img-dedicaces.png");
width:144px;
height:32px;
}
.texte-lien-faire-une-dedicace
{
top:8%;
position: absolute;
right:2%;
font-family:JandaManateeSolid;
font-size:18px;
color:#513729;
text-shadow:#ffffff 1px 1px 1px, #ffffff -1px 1px 1px, #ffffff -1px -1px 1px, #ffffff 1px -1px 1px;
}
#profil-accueil
{
position: absolute;
top:30%;
left:5%;
}
.cadre-mon-profil
{
background-image:url("/site/Images/cadre-mon-profil.png");
width:505px;
height:363px;
}
#cadre-info-profil-non-connecte
{
position: absolute;
top:20%;
left:15%;
background-color:#ff8c8c;
border-radius:8px;
width:400px;
height:70px;
}
.texte-info-profil-non-connecte
{
position: absolute;
top:10%;
left:3%;
font-size:13px;
font-family:Helvetica;
color:#c73b3b;
}
#boutique-accueil
{
position: absolute;
top:30%;
right:5%;
}
.cadre-dans-la-boutique
{
background-image:url("/site/Images/cadre-dans-la-boutique.png");
width:632px;
height:363px;
}
#cadre-info-boutique
{
position: absolute;
top:20%;
left:20%;
background-color:#ff8c8c;
border-radius:8px;
width:400px;
height:70px;
}
.texte-info-boutique
{
position: absolute;
top:10%;
left:3%;
font-size:13px;
font-family:Helvetica;
color:#c73b3b;
}
#info-activite-site
{
position: absolute;
top:75%;
left:5%;
}
.cadre-sa-bouge-sur-florkiz
{
background-image:url("/site/Images/cadre-sa-bouge-sur-florkiz.png");
width:632px;
height:286px;
}
#liste-topics-officiells
{
position: absolute;
top:20%;
left:15%;
}
.texte-titre-les-news-officiells
{
font-size:16px;
font-family:Cooper Black;
color:#353535;
}
.texte-lien-les-news-officiells
{
position: absolute;
font-size:14px;
font-family:Helvetica;
color:#353535;
top:27%;
left:7%;
}
#les-topics-les-plus-actifs
{
position: absolute;
top:20%;
right:5%;
}
.cadre-degrade-vert-1
{
background-image:url("/site/Images/cadre-degrade-vert-1.png");
width:296px;
height:179px;
}
.texte-titre-topics-les-plus-actifs
{
font-size:16px;
font-family:Cooper Black;
color:#353535;
}
#info-communaute
{
position: absolute;
top:75%;
right:18%;
}
.cadre-communaute
{
background-image:url("/site/Images/cadre-communaute.png");
width:432px;
height:420px;
}
.cadre-banderole-communaute-popularite-accueil
{
background-image:url("/site/Images/cadre-banderole-communaute-popularite-accueil.png");
width:350px;
height:24px;
position: absolute;
top:10%;
}
.texte-banderole-communaute-popularite-accueil
{
position: absolute;
top:17%;
left:20px;
font-size:14px;
font-family:Helvetica;
color:#ffb3b3;
}
.cadre-avatar-popularite-accueil1
{
background-image:url("/site/Images/cadre-avatar-popularite-accueil.png");
width:125px;
height:117px;
position: absolute;
top:20%;
left:20px;
}
.cadre-avatar-popularite-accueil2
{
background-image:url("/site/Images/cadre-avatar-popularite-accueil.png");
width:125px;
height:117px;
position: absolute;
top:20%;
right:50px;
}
#recherche-membre-accueil
{
position: absolute;
top:55%;
left:1%;
}
.cadre-recherche-membre-accueil
{
background-color:#CCC;
border-radius:8px;
width:180px;
height:173px;
}
.texte-recherche1
{
font-size:14px;
font-family:Helvetica;
color:#444343;
}
#liens-utiles-communaute
{
position: absolute;
top:55%;
right:6%;
}
.cadre-degrade-brun-1
{
background-image:url("/site/Images/cadre-degrade-brun-1.png");
width:219px;
height:173px;
}
.texte-liens-utiles
{
position: absolute;
top:5%;
font-size:14px;
font-family:Helvetica;
color:#429627;
}
#radio-accueil
{
position: absolute;
top:110%;
left:7%;
}
.cadre-radio
{
background-image:url("/site/Images/cadre-radio.png");
width:599px;
height:133px;
}
#info-radio
{
position: absolute;
top:10%;
left:40%;
}
.texte-info-radio
{
font-family:big-bottom;
font-size:14px;
color:#6d432c;
text-shadow:#ffffff 1px 1px 1px, #ffffff -1px 1px 1px, #ffffff -1px -1px 1px, #ffffff 1px -1px 1px;
}
Merci d'avance (ps: Joyeux fêtes de fin d'année :'p)