Je souhaiterai mettre en place un design fluide pour mon site.
Explication :
je crée un site en résolution 1024 x 768
j'augmente la résolution le site prend a nouveau toute la page.
exemple sur le design fluide : http://www.alsacreations.com/tuto/lire/ ... tions.html
Dans mon code html j'ai ceci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Le Cottage - restaurant - Talmont saint Hilaire</title>
<meta http-equiv="Content-Type" content="text/html";
charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css"
title="Design espace" href="css/index.css" />
</head>
<body>
<div id="conteneur">
<div id="entete">
<img src="photos/barrevertical.png" alt="barrevertical" class="barrevertical" />
<img src="photos/barrehorizontal.png" alt="barrehorizontal" class="barrehorizontal" />
</div>
<div id="corps">
<a href="restaurant.php"><img src="photos/le_cottage.png" alt="peinture" class="peinture" border="0"/></a>
</div>
<div id="footer">
<div id="titre">
Le Cottage - restaurant
</div>
<div id="adresse">
60 avenue de Luçon - 85440 Talmont saint hilaire - Tel : 02 51 95 39 21
</div>
</div>
</div>
</body>
</html>
Code : Tout sélectionner
html {
height : 100%;
}
body
{
height : 100%;
background-image:url("../contenu/fond.png");
background-attachment:fixed;
background-repeat:no-repeat;
background-color:#a6eafd;
background-position:30px 20px;
border:0px
}
#entete
{
color:#a2a89a;
font-size:15px;
font-family: arial;
}
.herbes
{
position: absolute;
top: 20px;
left:30px;
}
.logo
{
position: absolute;
top: 20px;
left:30px;
}
#connexionmembres
{
position: relative;
top: 12px;
left:790px;
font-weight: bold;
font-family: arial;
font-size:13px;
}
#entete a:link
{
color: #a2a89a;
text-decoration: underline;
}
#entete a:visited
{
color: #6c716b;
text-decoration: underline;
}
#corps
{
color:#a2a89a;
font-size:15px;
font-family: arial;
}
.fondmenu
{
position: absolute;
top: 121px;
left:30px;
}
.fondsousmenu
{
position: absolute;
top: 173px;
left:30px;
}
#menu
{
position: absolute;
top: 121px;
left:40px;
font-size:15px;
font-family: arial;
}
.vehicules
{
position: absolute;
left:161px;
}
#menu ul {
padding:0;
margin:0;
list-style-type:none;
}
#menu li {
float:left; /*pour IE*/
}
#menu ul li a {
display:block;
float:left;
width:161px;
line-height:52px; /*hauteur de l'image de fond*/
background:url(../contenu/fondnoir.png) repeat-x;
color:white;
text-decoration:none;
text-align:center;
}
#menu ul li a:hover {
background:url(../contenu/fondorange.png) repeat-x;
color:white;
}
#sousmenu
{
position: absolute;
top: 180px;
left:100px;
font-size:17px;
font-family: arial;
}
#sousmenu ul {
padding:0;
margin:0;
list-style-type:none;
}
#sousmenu li {
float:left; /*pour IE*/
}
#sousmenu ul li a {
display:block;
float:left;
color:white;
text-decoration:none;
text-align:center;
}
#sousmenu ul li a:hover {
color:grey;
}
#carte
{
position: absolute;
top:520px;
left:40px;
}
#titrecarte
{
position: relative;
top:30px;
left:60px;
font-size:16px;
font-family: arial;
color:#82b945;
}
#ville
{
position: relative;
top:100px;
left:240px;
font-size:15px;
font-family: arial;
color:grey;
}
#ville ul {
padding:0;
margin:0;
list-style-type:none;
}
#ville ul li a {
display:block;
color:grey;
text-decoration:none;
}
#ville ul li a:hover {
color:#82b945;
}
.fondcarte
{
width: 420px;
height: 300px;
position: absolute;
top:10px;
left:10px;
}
.vendee
{
position: absolute;
top:70px;
left:20px;
}
#texte
{
position: relative;
top:490px;
left:500px;
font-size:15px;
font-family: arial;
color:grey;
}
#texte b
{
font-size:18px;
font-family: arial;
color:#82b945;
}
.gratuit
{
font-size:16px;
font-family: arial;
color:#82b945;
}
a img {
border : 0;
}
div.wrap {
width : 993px;
margin : 0 auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width : 993px;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#SLIDE {
position: absolute;
top:220px;
left:50px;
color : #a4a4a4;
}
/*IMAGE DE FOND*/
div#SLIDE div.wrap {
height : 299px;
background : url(../galerie/header-bg.png) no-repeat 50% 0;
}
/*TAILLE DE LANIMATION*/
div#SLIDE div#slide-holder {
z-index : 40;
width : 993px;
height : 299px;
position : absolute;
}
div#SLIDE div#slide-holder div#slide-runner {
top : 9px;
left : 9px;
width : 973px;
height : 278px;
overflow : hidden;
position : absolute;
}
div#SLIDE div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#SLIDE div#slide-holder div#slide-controls {
left : 0;
bottom : 228px;
width : 973px;
height : 46px;
display : none;
position : absolute;
background : url(../galerie/slide-bg.png) 0 0;
}
div#SLIDE div#slide-holder div#slide-controls p.text {
float : left;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 15px 0 0 20px;
text-transform : uppercase;
}
div#SLIDE div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 24px;
display : inline;
margin : 11px 15px 0 0;
}
div#SLIDE div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#SLIDE div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#SLIDE div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(../galerie/silde-nav.png);
}
div#nav ul li a {
background : url(../galerie/nav.png) no-repeat;
}
merci pour votre aide
