Sujet Précédent Sujet Suivant

Un site web adaptable

Résolu/Fermé
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014 - Modifié par Chris 94 le 13/10/2013 à 01:33
mpmp93 Messages postés 6648 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 - 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
A voir également:

6 réponses

Réponse 1 / 6
mpmp93 Messages postés 6648 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
14 oct. 2013 à 09:46
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+



1
Réponse 2 / 6
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
13 oct. 2013 à 01:42
Bonsoir,

super la modération qui supprime le poste, comme ca pas d'accès au post et pas d'aide possible...
0
Réponse 3 / 6
Ysabe_l Messages postés 12584 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 26 novembre 2024 276
13 oct. 2013 à 03:30
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.
0
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
13 oct. 2013 à 03:48
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.
0
Réponse 4 / 6
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014
13 oct. 2013 à 18:36
comment faire atropa ?
0
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
13 oct. 2013 à 18:38
ça dépend du graphisme que tu veux. envois moi le liens de ton site en message privé je te posterai un exemple ici
0

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

Posez votre question
Réponse 5 / 6
Utilisateur anonyme
13 oct. 2013 à 18:50
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
0
Réponse 6 / 6
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014
13 oct. 2013 à 19:34
merci
0

Discussions similaires

[SUJET GROUPÉ] Le site COCO.GG est définitivement fermé.
Utilisateur anonyme -
Panth33ra -

20 réponses
C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses