Bonjour,
J'ai fais une grille responsive en css qui part d'abord du petit écran au plus grand.
J'ai un problème pour l'affichage sur le plus grand écran.
Je pense que le problème viens des "col center" j'ai essayer de bidouillé mais sans succès.
Css:
*{
margin: 0;
padding: 0;
min-height: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body{
background: #471b0d; /* Old browsers */
background: -moz-linear-gradient(top, #471b0d 12%, #f0e867 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(12%,#471b0d), color-stop(99%,#f0e867)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #471b0d 12%,#f0e867 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #471b0d 12%,#f0e867 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #471b0d 12%,#f0e867 99%); /* IE10+ */
background: linear-gradient(to bottom, #471b0d 12%,#f0e867 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#471b0d', endColorstr='#f0e867',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
}
.row:before, .row:after{
content:"";
display: table;
}
.row:after{
clear: both;
}
.row{
zoom: 1;
}
.row{
margin:0 -10px;
}
.col-s-1,
.col-s-2,
.col-s-3,
.col-s-4,
.col-s-5,
.col-s-6,
.col-s-7,
.col-s-8,
.col-s-9,
.col-s-10,
.col-s-11,
.col-s-12{
float: left;
position: relative;
min-height: 1px;
padding: 0 10px;
/*background-color: rgba(0,0,0, 0.2);
border: 1px solid rgba(0,0,0, 0.5);*/
}
.col-s-1{width: 8.33333%;}
.col-s-2{width: 16.66667%;}
.col-s-3{width: 25%;}
.col-s-4{width: 33.33333%;}
.col-s-5{width: 41.66667%;}
.col-s-6{width: 50%;}
.col-s-7{width: 58.33333%;}
.col-s-8{width: 66.66667%;}
.col-s-9{width: 75%;}
.col-s-10{width: 83.33333%;}
.col-s-11{width: 91.66667%;}
.col-s-12{width: 100%;}
.col-s-push-1{left: 8.33333%;}
.col-s-push-2{left: 16.66667%;}
.col-s-push-3{left: 25%;}
.col-s-push-4{left: 33.33333%;}
.col-s-push-5{left: 41.66667%;}
.col-s-push-6{left: 50%;}
.col-s-push-7{left: 58.33333%;}
.col-s-push-8{left: 66.66667%;}
.col-s-push-9{left: 75%;}
.col-s-push-10{left: 83.33333%;}
.col-s-push-11{left: 91.66667%;}
.col-s-push-12{left: 100%;}
.col-s-center{margin: 0 auto; float:none;}
.s-hide{display: none;}
.m-show{display: none;}
.l-show{display: none;}
@media only screen and (min-width: 640px){
.col-s-center{margin: 0 0; float:left;}
.col-m-center{margin: 0 auto; float: none;}
.col-m-1{width: 8.33333%;}
.col-m-2{width: 16.66667%;}
.col-m-3{width: 25%;}
.col-m-4{width: 33.33333%;}
.col-m-5{width: 41.66667%;}
.col-m-6{width: 50%;}
.col-m-7{width: 58.33333%;}
.col-m-8{width: 66.66667%;}
.col-m-9{width: 75%;}
.col-m-10{width: 83.33333%;}
.col-m-11{width: 91.66667%;}
.col-m-12{width: 100%;}
.col-m-push-0{left: 0%;}
.col-m-push-1{left: 8.33333%;}
.col-m-push-2{left: 16.66667%;}
.col-m-push-3{left: 25%;}
.col-m-push-4{left: 33.33333%;}
.col-m-push-5{left: 41.66667%;}
.col-m-push-6{left: 50%;}
.col-m-push-7{left: 58.33333%;}
.col-m-push-8{left: 66.66667%;}
.col-m-push-9{left: 75%;}
.col-m-push-10{left: 83.33333%;}
.col-m-push-11{left: 91.66667%;}
.col-m-push-12{left: 100%;}
.m-hide{display: none;}
.m-show{display: block;}
.s-show{display: none;}
}
@media only screen and (min-width: 1050px){
.col-m-center{margin: 0 0; float:left;}
.col-l-center{margin: 0 auto; float: none;}
.col-l-1{width: 8.33333%;}
.col-l-2{width: 16.66667%;}
.col-l-3{width: 25%;}
.col-l-4{width: 33.33333%;}
.col-l-5{width: 41.66667%;}
.col-l-6{width: 50%;}
.col-l-7{width: 58.33333%;}
.col-l-8{width: 66.66667%;}
.col-l-9{width: 75%;}
.col-l-10{width: 83.33333%;}
.col-l-11{width: 91.66667%;}
.col-l-12{width: 100%;}
.col-l-push-0{left: 0%;}
.col-l-push-1{left: 8.33333%;}
.col-l-push-2{left: 16.66667%;}
.col-l-push-3{left: 25%;}
.col-l-push-4{left: 33.33333%;}
.col-l-push-5{left: 41.66667%;}
.col-l-push-6{left: 50%;}
.col-l-push-7{left: 58.33333%;}
.col-l-push-8{left: 66.66667%;}
.col-l-push-9{left: 75%;}
.col-l-push-10{left: 83.33333%;}
.col-l-push-11{left: 91.66667%;}
.col-l-push-12{left: 100%;}
.l-hide{display: none;}
.l-show{display: block;}
.m-show{display: none;}
}
#boite_gauche {
background-image: url('boite_gauche.png');
background-size: 100% 100%;
min-height: 379px;
max-width: 335px;
}
#boite_central {
background-image: url('boite_central.png');
background-size: 100% 100%;
min-height: 365px;
max-width: 549px;
}
#boite_droite {
background-image: url('boite_gauche.png');
background-size: 100% 100%;
min-height: 379px;
max-width: 335px;
}
#test{
/*background: #fff;*/
position: relative;
top: 28px;
left: 6%;
height: auto;
max-height: 300px;
width: 87%;
overflow: hidden;
}
.titre{
background-size: 100% 100%;
min-height: 62px;
margin-left: auto;
margin-top: -10px;
}
.séparation{
background-image: url('separation.png');
background-size: 100% 100%;
background-repeat: no-repeat;
margin-top: -10px;
margin-left: auto;
min-height: 9px;
}
.contenue{
margin-left: 15px;
margin-top: 8px;
font-size: 13px;
font-family: Segoe Print;
color: #d2c469;
text-shadow:
0px 0px 3px #4a2310,
-2px -2px 5px #4a2310,
2px 2px 5px #000,
-2px 2px 10px #000,
2px -2px 10px #4a2310;
font-weight: bold;
}
@media only screen and (max-width: 340px){
#test{
left: 5%;
width: 88%;
}
}
<div style="max-width: 1219px;">
<div style="max-width: 670px;" class="col-s-12 col-m-12 col-m-center">
<div id="boite_gauche" class="col-s-12 col-s-center col-m-6 col-l-3">
<div id="test">
<div class="titre" style="background-image: url('profil.png');"></div>
<div class="séparation" style="background-size: 97% 100%;margin-left: 4.7%;"></div>
<div class="contenue">
<div style="margin: 30% auto; width: 170px;">
<input type="text" style="background:#60481a;size: 20;color: #d2c469;border:1px solid #4a2310;border-radius: 5px 5px;box-shadow:4px 3px 2px #000 inset;padding: 2px 5px 0px 5px;"/><br>
<input type="text" style="background:#60481a;size: 20;color: #d2c469;border:1px solid #4a2310;border-radius: 5px 5px;box-shadow:4px 3px 2px #000 inset;padding: 2px 5px 0px 5px;"/><br>
<input type="submit" value="Connexion" style="background:#60481a;color: #d2c469;border:1px solid #4a2310;border-radius: 5px 5px;box-shadow:-2px -2px 2px #000 inset;padding: 0px 0px 2px 0px;margin: 15px auto;width: 155px;"/>
</div>
</div>
</div>
</div>
<div id="boite_droite"class="col-s-12 col-s-center col-m-6 col-l-3">
<div id="test">
<div class="titre" style="background-image: url('jeux.png');"></div>
<div class="séparation" style="background-size: 94.3% 100%;margin-left: 5.7%;"></div>
</div>
</div>
</div>
<div style="max-width: 549px;" class="col-s-12 col-m-12 col-m-center">
<div id="boite_central"class="col-s-12 col-s-center col-m-12 col-l-6">
<div id="test">
<div class="titre" style="background-image: url('classements.png');"></div>
<div class="séparation"></div>
</div>
</div>
</div>
</div>
Ecran moyen
Grand ecran
Merci pour votre aide.
Afficher la suite
