code-source d'un template responsive

<!DOCTYPE html>
<HEAD>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<TITLE>Saisissez le titre de la page</TITLE>
<link rel="stylesheet" href="essai.css">
<script src="modernizr-2.6.1-respond-1.1.0.min.js">
</head>
<BODY BGCOLOR="#FFFFFF">
<div id="head">
<div id="nav">
<ul>
<li><a href="">Home</a></li></ul>
<div class="clearfix"></div>
</div>
<div id="main">
<div id='article'>
<div class='content'>
<section>
<p align="left"><font size="2" color="green">bla bla...</p></font>
<p re bla bla>/p></section>
</div>
</div>
<div id="footer">
</div>
</BODY>
</HTML>

code-source du CSS le nommer essai.css

*{margin:0px;padding:0px}
body{font-family:arial}
ul{list-style:none;width:100%}
li{padding:4px;margin-bottom:5px; margin-top:5px; background-color:#ffffcc;text-align:center;color:#000; width:}
#head
{
min-height:30px;
background-color:#dedede;
border-bottom:2px solid #333;
padding:20px;
clear:both
}
#footer
{
min-height:10px;
background-color:#dedede;
border-top:2px solid #333;
padding:20px;
clear:both;
text-align:center
}
#nav{
border-bottom:2px solid #333;
} #main { padding:10px 10px 10px 10px; }
#article,#sidebar{background-color:#dedede; min-height:250px;margin-bottom:20px;overflow:auto}
.content{padding:20px}
.clearfix{
clear:both;
}
@media only screen and (min-width: 480px)
{
#header
{
background-color:#cc0000;
}
ul{float:left;}
li{float:left;width:16%;padding:4px;margin-right:8px}
#main
{
padding:10px 20px 10px 20px;
}
}
@media only screen and (min-width: 768px){
#header
{
background-color:#006699;
}
#article
{
float:left;
width:68%;
}

#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
width:100%;
}
ul{float:right}
li{float:left;width:18%;padding:4px;margin-right:8px}
#main
{
padding:20px 30px 20px 30px;
}

}





C2script


A chaque jour suffit sa peine, Supportons les maux d'aujourd'hui sans penser par avance à ceux que peut nous réserver l'avenir.
Anonyme