Un site web adaptable

Résolu

aeonus Messages postés 50 Date d'inscription Statut Membre Dernière intervention -
mpmp93 Messages postés 6648 Date d'inscription Statut Membre Dernière intervention - 14 oct. 2013 à 09:46

Bonjour,

salut , j'ai commençais un site web visible ici :

supprimé par la Modération

j'aimerais que ce site s'adapte à chaques résolutions , j'ai essayer xce que j'ai trouver sur google mais ça n'a rien donner .

@charset "iso-8859-1";
html {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9pt;
line-height : 13pt;
text-align : center;
color : #ffffff;
background : url("images/background.jpg") left top repeat-x;
background-color : #085289;
padding : 0;
margin : 0;
}
html, body {
text-align : center;
height : 100%;
padding : 0;
margin : 0;
}
#formulaire {
text-align : center;
padding : 0 0 0 260px;
}
#surmenu {
width : 100%;
height : 20px;
list-style : none;
padding : 0;
margin : 0;
background-color : #EFD807;
}
ul#menu1 {
width : 100%;
height : 40px;
list-style : none;
padding : 0;
margin : 0;
background-color : #000000;
text-align : center;
}
ul#menu1 li {
display : inline;
text-align : center;
}
ul#menu1 li a {
text-align : center;
width : 100%;
height : 50px;
line-height : 50px;
font-family : mael;
font-size : 22px;
font-weight : 700;
color : #00CCCB;
text-decoration : none;
outline : none;
padding : 20px 20px 0 20px;
}
ul#menu1 li a:hover, ul#menu1 li#current a {
color : #EFD807;
}
#logo {
width : 990px;
height : 360px;
background : url("images/logo.jpg") left top no-repeat;
margin : 0 auto;
}
* html #container {
height : 100%;
}
#gauche {
list-style : none;
position : absolute;
top : 210px;
right : 1560px;
width : 220px;
font-size : 10pt;
text-align : left;
float : left;
display : inline;
margin : 0 18px 0 0;
background : url("images/gauche_bg.jpg") left top repeat-y;
}
#gauche .col {
list-style : none;
width : 200px;
min-height : 180px;
height : auto !important ;
height : 180px;
float : left;
display : inline;
background : url("images/gauche.jpg") left top no-repeat;
padding : 15px 10px 0 10px;
}
* html #gauche .col {
width : 220px;
}
#gauche .foot {
list-style : none;
width : 220px;
height : 19px;
float : left;
background : url("images/gauche_foot.jpg") left top no-repeat;
}
#gauche h1 {
height : 20px;
font-family : Mael, Helvetica, sans-serif;
font-size : 11pt;
font-weight : bold;
text-align : center;
color : #EFD807;
background-color : transparent;
margin : 5px 0;
background : url("images/ico_h1_g.gif") left bottom no-repeat;
clear : both;
}
#centre {
list-style : none;
position : absolute;
top : 450px;
right : 435px;
width : 1000px;
font-size : 10pt;
text-align : left;
float : left;
display : inline;
margin : 0 18px 0 0;
background : url("images/droite_bg.jpg") left top repeat-y;
}
#centre .col {
width : 1000px;
min-height : 180px;
height : auto !important ;
height : 180px;
float : left;
background : url("images/droite.jpg") left top no-repeat;
padding : 1px 10px 0 10px;
}
* html #droite .col {
width : 1000px;
}
#centre .foot {
width : 1000px;
height : 19px;
float : left;
background : url("images/droite_foot.jpg") left top no-repeat;
}
#slideshow {
position : relative;
top : -280px;
right : -1520px;
width : 309px;
height : 260px;
float : left;
margin : 0 auto 2em;
border : #ddd solid 1px;
background : #FFF;
background : linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
border-radius : 2px 2px 2px 2px;
box-shadow : 0 0 3px rgba(0, 0, 0, 0.2);
}
#slideshow:before, #slideshow:after {
position : absolute;
bottom : 16px;
z-index : -10;
width : 50%;
height : 20px;
content : " ";
background : rgba(0, 0, 0, 0.1);
border-radius : 50%;
box-shadow : 0 0 3px rgba(0, 0, 0, 0.4), 0 20px 10px rgba(0, 0, 0, 0.7);
}
#slideshow:before {
left : 0;
transform : rotate(-4deg);
}
#slideshow:after {
right : 0;
transform : rotate(4deg);
}
#slideshow .container {
position : relative;
width : 309px;
height : 260px;
overflow : hidden;
}
#slideshow .container:after {
position : absolute;
bottom : 0;
left : 0;
content : " ";
width : 100%;
height : 1px;
background : #999;
}
#slideshow .slider {
position : absolute;
left : 0;
top : 0;
width : 400%;
height : 310px;
}
#slideshow figure {
position : relative;
display : inline-block;
padding : 0;
margin : 0;
}
#slideshow figcaption {
position : absolute;
left : 0;
right : 0;
bottom : 5px;
padding : 20px;
margin : 0;
border-top : 1px solid rgb(225, 225, 225);
text-align : center;
letter-spacing : 0.05em;
word-spacing : 0.05em;
font-family : Georgia, Times, serif;
background : #fff;
background : rgba(255, 255, 255, 0.7);
color : #555;
text-shadow : -1px -1px 0 rgba(255, 255, 255, 0.3);
}
@keyframes slider {
0%, 20%, 100% {
left : 0;
}
25%, 45% {
left : -100%;
}
50%, 70% {
left : -200%;
}
75%, 95% {
left : -300%;
}
}
#slideshow .slider {
animation : slider 32s infinite;
}
#footer {
width : 100%;
height : 163px;
font-size : 7pt;
background-color : black;
color : #DDD;
text-align : center;
background : url("images/footer_bg.jpg") left top repeat-x;
margin : -16px auto 0 auto;
}
#footer div {
width : 990px;
height : 163px;
margin : 0 auto;
background : url("images/footer.jpg") left top no-repeat;
}
.bloc_droite {
width : 250px;
border-left : 1px dotted #b2d6ed;
border-bottom : 1px dotted #b2d6ed;
background : url("../images/bloc_droite_bg.jpg") left bottom no-repeat;
float : right;
margin-left : 10px;
padding-left : 10px;
}
.bloc_droite {
width : 250px;
border-left : 1px dotted #b2d6ed;
border-bottom : 1px dotted #b2d6ed;
background : url("images/bloc_droite_bg.jpg") left bottom no-repeat;
float : right;
margin-left : 10px;
padding-left : 10px;
}
.site {
min-height : 110px;
height : auto !important ;
height : 110px;
border-bottom : 1px dotted white;
margin-bottom : 10px;
clear : both;
}
#centre h1 {
height : 20px;
font-family : Mael, Helvetica, sans-serif;
font-size : 16pt;
font-weight : bold;
text-align : center;
color : #EFD807;
background-color : transparent;
margin : 5px 0;
clear : both;
}
h2 {
font-size : 11pt;
text-align : center;
color : #00ff00;
background-color : transparent;
margin : 5px 0;
}
h3 {
font-family : Arial, Helvetica, sans-serif;
font-size : 12pt;
text-align : center;
color : white;
background-color : transparent;
margin : 5px 0;
}
a:link, a:visited {
color : #ffffff;
text-decoration : none;
background-color : transparent;
outline : none;
}
a:active, a:hover {
color : yellow;
background-color : transparent;
text-decoration : none;
outline : none;
}
.bord {
border : white solid 2px;
}
.left {
margin : 0 10px 0 0;
float : left;
}
.right {
margin : 0 0 5px 10px;
float : right;
}
.center {
text-align : center;
}
.end {
clear : both;
}
small {
font-size : 7pt;
}
ul {
padding : 0;
margin : 5px 0 15px 0;
}
li {
text-decoration : none;
list-style-position : inside;
list-style-type : circle;
}
p {
margin : 5px auto;
}
form {
margin : 0;
}
form p {
margin : 5px 0;
}
fieldset {
text-align : center;
width : 60%;
border : white solid 1px;
float : left;
margin : 5px 0;
}
legend {
font-weight : bold;
color : white;
background-color : #085289;
border : white solid 1px;
padding : 1px 5px;
}
table {
width : 350px;
color : white;
background-color : #085289;
border-collapse : collapse;
}
th {
width : 350px;
text-align : left;
text-indent : 5px;
font-size : 10pt;
color : inherit;
background-color : #050d24;
}
td {
width : 295px;
font-family : Arial;
font-size : 8pt;
text-align : left;
text-indent : 10px;
padding : 3px;
color : inherit;
background-color : #085289;
}
.prix {
width : 55px;
text-align : right;
padding-right : 3px;
}
#galerie {
text-align : center;
}
#galerie img {
border : white solid 3px;
margin : 10px;
vertical-align : middle;
}
#galerie a {
background-color : transparent;
}
#thumbBox {
position : absolute;
left : 0;
top : 0;
width : auto;
padding : 5px 10px 0 10px;
text-align : center;
color : black;
background-color : white;
border : black solid 1px;
visibility : hidden;
z-index : 10;
cursor : pointer;
}
#thumbBox #thumbImage {
font-weight : bold;
color : black;
background-color : transparent;
margin-bottom : 5px;
}
#thumbBox #thumbImage img {
border : black solid 1px;
}
#thumbLoading {
position : absolute;
visibility : hidden;
border : black solid 1px;
color : black;
background-color : #EFEFEF;
padding : 5px;
z-index : 5;
}

merci

Afficher la suite

A voir également:

Un site web adaptable
Site comme coco - Accueil - Réseaux sociaux
Site de telechargement - Accueil - Outils
Création site web - Guide
Web office - Guide
Quel site remplace coco - Accueil - Réseaux sociaux

6 réponses

Réponse 1 / 6

mpmp93 Messages postés 6648 Date d'inscription Statut Membre Dernière intervention 1 340

Bonjour,

Il existe une solution: RESPONSIVE DESIGN

Le RESPONISIVE DESIGN (ou design Adaptatif) s'appuye essentiellement sur ce qu'on appelle les media queries.

Un exemple. J'ai un texte en 3 colonnes:

.threeCols {   /* gère l'affichage bloc de texte sur trois colonnes */
    column-count: 3;
    column-rule: 1px dotted #b0b0b0;
    column-gap: 16px;
    padding-bottom: 6px;
    border-bottom: 1px dotted #7f7f7f;
    margin-bottom: 12px;
    margin-top: 6px;
}

maintenant, le visiteur utilise une tablette numérique à faible résolution. On va rajouter ceci:

@media only screen and (max-width: 740px) {
    /* Style appliqué uniquement sur les écrans de moins de 740px de largeur */
    .threeCols {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

et maintenant un autre visiteur arrive avec un smartphone:

@media only screen and (max-width: 370px) {
    /* Style appliqué uniquement sur les écrans de moins de 740px de largeur */
    .threeCols {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

Ces 3 codes CSS sont à enchaîner dans un seul et même style.css.

Le media query va adapter automatiquement les éléments concernés en fonction de la largeur écran réelle, sans javascript ni rechargement de page. Par exemple, dans le cas de la tablette numérique, si on change l'orientation, CSS détectera la nouvelle définition horizontale et agira en conséquence.

Ca marche également sur un site web sur PC. Il suffit d'agir sur la largeur de visu du navigateur pour que le site s'adapte automatiquement.

Avec les media queries en CSS, vous n'êtes plus obligé de faire une version mobile et une version web. Un seul et même serveur pour toues les médias.

Top, non?

A+

Réponse 2 / 6

Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention 274

Bonsoir,

super la modération qui supprime le poste, comme ca pas d'accès au post et pas d'aide possible...

Réponse 3 / 6

Ysabe_l Messages postés 12714 Date d'inscription Statut Contributeur Dernière intervention 277

Bonjour

Faire un site qui s'adapte à toutes les résolutions n'est pas chose facile, il n'y a pas un code miracle pour ça. Et c'est long et pénible.

Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention 274

pas forcément avec quelques principes de bases...
c'est pas compliqué, faut juste savoir mettre des limites et ce qu'on veut qui s'adapte.

Réponse 4 / 6

aeonus Messages postés 50 Date d'inscription Statut Membre Dernière intervention

comment faire atropa ?

Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention 274

ça dépend du graphisme que tu veux. envois moi le liens de ton site en message privé je te posterai un exemple ici

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

Posez votre question

Réponse 5 / 6

Utilisateur anonyme

Tu peux faire ça avec un media query.
Un tuto sur OpenClassrooms (anciennement Le Site du Zéro):
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries

Réponse 6 / 6

aeonus Messages postés 50 Date d'inscription Statut Membre Dernière intervention

merci

Discussions similaires

C'est quoi le site qui remplace coco chat

Votre réponse

Discussions similaires