Bonjour,
Depuis environ 3 semaines que je travail sur un site que j'essais de rendre web responsive. Mais voilà tout que dans IE 7 et 8, l'affichage est complètement bousillé. J'ai également placé un slider (NivoSlider) qui me cause problème également. Mon footer est par dessus le header en haut(pourtant ils ont un z-index), mon slider est aligné à gauche, quand pourtant il est bien centré (du moins le code du nivslider je n'y ai pas toucher). Mes boxgrid(carrés d'images) sont portant bien centrés selon le % de disponible, mais il m'affiche seulement une boîte par ligne, quand pourtant, il est sensé en mettre autant qu'il a de l'espace(généralement 3 ou 4). J'ai l'impression que mes width en % sont mal interprété par IE. J'ai également placé des média screen ainsi que le viewport, peut-être qu'explorer n'aime pas cela?
Bref, mon premier test en responsive continue à être un désastre.
Je vous met le lien et le code css
http://audeladudeuil.org
Si je récapitule
•le footer apparaît en haut quand il est supposé être coller en bas grâce à bottom:0;
•le slider affiche à gauche, pourtant il est sensé être centré.
•J'ai un problème avec mes boîtes carrés d'images qui affichent une par ligne, quand elle doit en mettre autant qu'il a d'espace
•On dirait que le site en entier a de difficulté à interpréter les %.
Faites pas le saut, je sais que c'est le bordel
. Mais voilà qu'il n'a personne pour m'aider où je travail et le projet est quand même pour bientôt.
Merci beaucoup de votre aide!
P.S. Pour coller mon footer, j'utilise toujours cette technique http://www.snoupix.com/coller-le-pied-de-page-en-bas_tutorial_9.html
Modifié par sydgie (17 Sep 2013 - 17:31)
Depuis environ 3 semaines que je travail sur un site que j'essais de rendre web responsive. Mais voilà tout que dans IE 7 et 8, l'affichage est complètement bousillé. J'ai également placé un slider (NivoSlider) qui me cause problème également. Mon footer est par dessus le header en haut(pourtant ils ont un z-index), mon slider est aligné à gauche, quand pourtant il est bien centré (du moins le code du nivslider je n'y ai pas toucher). Mes boxgrid(carrés d'images) sont portant bien centrés selon le % de disponible, mais il m'affiche seulement une boîte par ligne, quand pourtant, il est sensé en mettre autant qu'il a de l'espace(généralement 3 ou 4). J'ai l'impression que mes width en % sont mal interprété par IE. J'ai également placé des média screen ainsi que le viewport, peut-être qu'explorer n'aime pas cela?
Bref, mon premier test en responsive continue à être un désastre.
Je vous met le lien et le code css
http://audeladudeuil.org
*{ padding:0px; margin:0px; }
html{
height: 100%; width:100%;
}
body{
height:100%;
width:100%;
background:url(../img/bg.jpg) fixed repeat;
font-family:Arial, Helvetica, sans-serif;
border:none; }
.nonflottant {clear:both;}
@font-face {
font-family: 'typewriterscribbledregular';
src: url('../font/typewriterscribbled-webfont.eot');
src: url('../font/typewriterscribbled-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/typewriterscribbled-webfont.woff') format('woff'),
url('../font/typewriterscribbled-webfont.ttf') format('truetype'),
url('../font/typewriterscribbled-webfont.svg#typewriterscribbledregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*--------supermain-----*/
#supermain{
position : relative;
min-height: 100%;
min-width:100%;
}
/*------main------*/
#main{
position: relative;
min-height:95%;
margin: 0 auto;
padding-bottom: 70px;
min-width: 100%;
}
/*---menu---*/
#menu {
width:100%;
height:auto; min-height:145px;
background:url(../img/bg.jpg) repeat;
position:relative; z-index:100;
overflow: hidden;
top:0px;
left:0px;
margin:0px auto;
text-align:center;
}
#menu img {
width:auto; margin:10px auto;
vertical-align:middle;
display:inline-block;
overflow: hidden;
position: relative;
text-align:left;}
#menu ul {
width:75%;
list-style-type:none;
margin:10px auto;
vertical-align:middle;
display:inline-block;
overflow: hidden;
position: relative;
text-align:left;
}
#menu ul li {
width:auto;
float:left;
display:block;
padding:5px;
margin:10px 8px 10px 8px;
border-left:2px dashed #000;
}
#menu img {
-webkit-transition: -webkit-transform 0.2s ease-in-out;/* Utilisé pour la transition sur chrome et safari */
-moz-transition: -moz-transform 0.2s ease-in-out;/* Utilisé pour la transition sur Firefox */
transition: transform 0.2s ease-in-out;}
#menu img:hover {
-webkit-transform: scale(1.1) rotate(-10deg);/* Agrandissement de la photo à l'échelle 1.4 et rotation de -10 degrés */
-moz-transform: scale(1.1) rotate(-10deg);
-o-transform: scale(1.1) rotate(-10deg);
transform: scale(1.1) rotate(-10deg);
}
#menu ul li a {
display:block;
float:left;
width:100%;
text-align:left;
text-transform:uppercase;
font:bold 1em Arial, Helvetica, sans-serif;
color:#000;
}
#menu ul li:hover a, #menu ul li:hover p {color:#2b92b0; }
#menu ul li p {font-family:Arial, Helvetica, sans-serif; font-size:0.7em;}
#header{
width:100%; margin:0px auto; position: relative; z-index:90;
padding-top:5px;
background:url(../img/head.png) repeat-x;
}
#wrapper {position:relative; z-index:100;}
#contenu {
width:100%;
margin:0px auto 20% auto ;
position: relative;
z-index:90;
}
#listemenu {
height:auto;
overflow: hidden;
top:0px;
left:0px;
width: 80%; margin:0px auto;
position: relative;
text-align:center;
}
#listemenu h1 {
width:88%;
text-align:left;
vertical-align:middle;
font:bold 1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
margin:10px auto;
display:inline-block;
overflow: hidden;
position: relative;}
#listemenu input[type="button"] {
background:#000;
padding:5px;
border:none;
color:#fff;
-webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.75);}
#listemenu input[type="button"]:hover {background:#515151; }
#superfooter{
position: absolute;
z-index:100;
bottom: 0px;
height:auto;
width: 100%;
background: url(../img/footer.jpg) repeat-x;
}
#footer{
height:auto;
overflow: hidden;
top:0px;
left:0px;
width: 100%; margin:0px auto;
position: relative;
z-index:100;
text-align:center;
height:auto;
text-transform:uppercase;
font:bold 1em Arial, Helvetica, sans-serif;
line-height:25px;
}
#footer a {color:#0c2d36;}
#footer a:hover {color:#fff;}
#footgauche {
width: 30%;
height: auto;
margin:10px auto;
vertical-align:middle;
display:inline-block;
overflow: hidden;
position: relative;
text-align:left;}
#footdroite {
width: 30%;
height: auto;
margin:10px auto;
vertical-align:middle;
display:inline-block;
overflow: hidden;
position: relative;
text-align:right;}
#footcentre {
width: 30%;
height: auto;
margin:10px auto;
vertical-align:middle;
display:inline-block;
overflow: hidden;
position: relative;
text-align:center; }
a.fb {background:url(/img/facebook_noir.png) no-repeat; width:75px; height:75px;}
a.fb:hover {background:url(/img/facebook.png) no-repeat;}
/*----------rehcerche----*/
.searchform {
display: inline-block;
/*zoom: 1;*/ /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
position:absolute;
top:0px; left:70%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height:auto; width:auto;
margin-bottom:auto;
padding-bottom:auto;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background:#000;
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
color:#9b9999;
background:#000;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: auto;
border:none;
outline: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background:#000;
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
/*------------------------------------------------
-----------Carré des images liste vidéo------------
--------------------------------------------------
------------------------------------------------*/
.boxgrid a{ color:#40b2d6; }
.boxgrid h3{
margin: 15px 10px 0 10px;
color:#FFF;
font:1.2em Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-1px;
font-weight: bold;
color:#40b2d6; }
.boxgrid{
width: 325px;
height: 260px;
margin:10px 4px;
vertical-align:middle;
display:inline-block;
background:#161613;
border: solid 2px #113f4c;
overflow: hidden;
position: relative;
text-align:left;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.boxgrid img:hover{
position: absolute;
top: 0;
left: 0;
border: 0;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
.boxgrid img:hover {width:90%;}
.boxgrid img:hover {width:100%;}
.boxgrid p{
padding: 0 5px;
color:#afafaf;
font-weight:bold;
font:10pt Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}
.cover p {color:#fff; margin-left:10px;}
/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/
/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
body {
line-height:1;
}
table {
border-collapse:separate;
border-spacing:0;
}
caption, th, td {
text-align:left;
font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}
/*===================*/
/*=== Main Styles ===*/
/*===================*/
a, a:visited {
color:blue;
text-decoration:none;
}
a:hover, a:active {
color:#000;
text-decoration:none;
}
#dev7link {
position:absolute;
top:0;
left:50px;
background:url(images/dev7logo.png) no-repeat;
width:60px;
height:67px;
border:0;
display:block;
text-indent:-9999px;
}
.slider-wrapper {
width: 75%;
margin: 50px auto 0px auto; padding-left:20px;
}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
}
@media screen and (max-width: 1024px)
{
#contenu {padding-bottom:20%;}
#menu li {font-size:2em;}
#menu img {width:35%; height:auto;}
.searchform {width:80%;height:auto;
overflow: hidden;
top:0px;
left:0px;
margin:0px auto;
position: relative;
text-align:center;
font-size:1em;}
.searchform input[type="text"] {padding-top:20px;}
.searchform input {font-size:1.3em; float:left;}
.searchform .searchbutton {height: 60px;
width: 60px; float:right; font-size:1em; }
#contenu {padding-bottom:20%;}
#footer {font-size:1em;}
}
@media screen and (max-width: 768px)
{
#menu {width:100%;height:auto;
overflow: hidden;
top:0px;
left:0px;
margin:0px auto;
position: relative;
text-align:center;}
#menu li {
margin:10px 0px;
vertical-align:middle;
display:inline-block;
overflow: hidden;
position: relative;
text-align:left;}
#menu li {font-size:1em;}
#contenu {padding-bottom:40%;}
.line {display:none;}
.searchform {width:80%;height:auto;
overflow: hidden;
top:0px;
left:0px;
margin:0px auto;
position: relative;
text-align:center;
font-size:1em;}
.searchform input[type="text"] {padding-top:20px;}
.searchform input {font-size:1.3em; float:left;}
.searchform .searchbutton {height: 60px;
width: 60px; float:right; font-size:1em; }
#footer {font-size:1em;}
}Si je récapitule
•le footer apparaît en haut quand il est supposé être coller en bas grâce à bottom:0;
•le slider affiche à gauche, pourtant il est sensé être centré.
•J'ai un problème avec mes boîtes carrés d'images qui affichent une par ligne, quand elle doit en mettre autant qu'il a d'espace
•On dirait que le site en entier a de difficulté à interpréter les %.
Faites pas le saut, je sais que c'est le bordel
. Mais voilà qu'il n'a personne pour m'aider où je travail et le projet est quand même pour bientôt.Merci beaucoup de votre aide!
P.S. Pour coller mon footer, j'utilise toujours cette technique http://www.snoupix.com/coller-le-pied-de-page-en-bas_tutorial_9.html
Modifié par sydgie (17 Sep 2013 - 17:31)
