2 réponses à ce sujet

[Austin]

Bonjour tout le monde
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)

[Monsieur Spi]

Bonjour,

Citation

Personnllement je trouve sa chiant ... car je dois tout modifier ce qui me prend un temps fou.

C'est pour cela que c'est un vrai travail (Webdesigner et Intégrateur) de construire un site pleinement responsive...

Pour faire du responsive sur un site que tu construit toi même, il te faut utiliser les Media Queries : http://www.alsacreat...ia-queries.html

Sinon tu peux aussi confier ça à un CMS tel que Wordpress, Joomla, Spip, Drupal, ... qui proposent des thèmes responsives que tu n'a plus qu'à adapter légèrement.

Tu peux aussi utiliser un Framework comme Bootstrap : https://openclassroo...-main-bootstrap

Ou dernière solution, utiliser un détecteur de device qui va t'indiquer sur quel appareil le site est ouvert et charger une feuille de style dédiée à la résolution courante (Wordpress à un plugin pour faire ça) : http://docanski.free...uc/astupl19.htm

Dans tous les cas il n'existe pas de solution miracle, au même titre qu'il n'existe pas de solution propre pour faire un jeu vidéo en trois clics, ou construire une voiture dans son garage.

Soit tu fais un site simple qui marchera pour presque toutes les tailles avec juste quelques ajustements, soit tu veux des choses complexes et tu devras mettre les mains dans le cambouis pour faire exactement ce que tu veux à toutes les résolutions.

Citation

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 ....

A lire : http://www.alsacreat...lises-meta.html

Citation

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 ?

Non, à part sans doute Bootstrap.
De toute façon utiliser les CSS pour retoucher les dimensions des images est rarement une bonne idée, quand tu demande à une image de s'afficher à 1/4 de sa taille normale elle est simplement déformée par le CSS, en aucun cas elle ne sera recompressée à la bonne taille pour que la navigation soit fluide (car tes pages sont légères) sur les mobiles ne disposant que d'une connexion 2G ou 3G (et encore quand elle marche). La plupart des CMS passent par une duplication de l'image à un autre format (thumbnails ou "petit", "moyen", "grand", "original") dont les tailles sont fixées, puis selon la taille de l'écran où est lu le site c'est l'un ou l'autre des formats qui est chargé. Quand à leur "taille" en CSS elle est souvent exprimée en pourcentages et non en taille fixe pour une image.

[Myrbet]

Citation

A lire : http://www.alsacreat...lises-meta.html

Effectivement, tu vas trouver de précieuses infos sur ce site. Il faut tester si tu n'es pas pro. Ca prends énormément de temps.