28172 sujets

CSS et mise en forme, CSS3

Code optimisé? plus problème sous ie7 et peut etre supérieur.

Bonjour à toutes et tous!

je tente de mettre en page mon interface mais j'ai du mal à le faire fonctionner sur ie7 etc.
De plus j'aimerai savoir si ce code est optimisé ou pas.

Aussi merci par avance de votre aide

Code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon test CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="bloc_page">
<header>
<h1>MON HEADER</h1>
</header>


<div id="nav1">

<h1>MENU 1</h1>
<p>test
</p>
</div>
<div id="nav2">
<h1>MENU 2</h1>
<p>test </p>
</div>

<center>
<p>1</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABLA</p><p>BLABL100A</p>
</center>

<footer>
<p>Copyright - Tous droits réservés<br />
<a href="#">Me contacter !</a></p>
</footer>
</div>
</body>
</html>


Ma feuille CSS principal
*{margin: 0;}

#bloc_page{
width: 100%;
}

header{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 5%;
background-color: orange;
}

#nav1{
position: fixed;
left: 0px;
top: 5%;
width: 150px;
border: 1px solid black;
height: 45.5%;
}

#nav2{
position: fixed;
bottom: 4%;
left: 0px;
width: 150px;
height: 45.5%;
border: 1px solid black;
}

center{
padding-top: 4%;
padding-bottom: 4%;
margin-left: 150px;
padding-left: 15px;
background-color: red;
text-align: left;
}

footer{
position: fixed ;
left: 0px;
bottom: 0px;
width: 100%;
background-color: yellow;
height: 4%;
overflow:hidden;
}


premier pont: est ce une structure optimisée?
Deuxiement: Afin d'avoir un code adapté pour les autres IE j'ai découvert ce code javascript qui fait tout fonctionner à merveille :
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Mon soucis c'est au cas ou les utilisateurs auraient désactiver le javascript j'ai tenté d'adapter les feuilles pour ie6 etc.

je me retrouve donc avec pour ie6 cela semble fonctionner)
html{
height: 100%;
overflow: hidden;

}


header{
position: absolute;

}

#nav1{
position: absolute;
min-width: 10%;
}


#nav2{
position: absolute;
bottom: 6%;
}


center{
position: absolute;
top: 5%;
padding-top: 5px;
width: 87%;
height: 630px;
overflow: auto;

}

footer{
position: absolute;
width: 100%;
}


et pour ie7: mais la ca part en vrille et je me demande par ailleurs ce qui se passera sur les versions supérieures auxquelles je n'ai pas accès.

#bloc_page{
height: 100%;

}

header{
width: 100%;

}

#nav1{
position: absolute;
min-width: 10%;
top: 5%;
height: 150px;
background-color: pink;

}


#nav2{
position: absolute;
bottom: 6%;
background-color: pink;
}


center{
display: inline-block;
padding-top: 5px;
width: 87%;
height: 745px;
padding-bottom:0px;
background-color: yellow;
overflow: auto;

}

footer{
display: inherit;
width: 100%;
bottom: 0px;
background-color: blue;
}


Merci d'avance pour votre aide et votre retour!!!
Sujet clos
Aller à