css design fluide

par **jojolapine** » 29 juin 2011, 22:34

Bonsoir,

mais cela ne marche pas

A priori on s'en doute, sinon tu ne serais sûrement pas là

Mais il est plus difficile de deviner ce qui ne marche...
Qu'est-ce que tu entends par là? quel est les but recherché (précisément), quel le comportement actuel?
Un lien vers une page de test en ligne serait également la bienvenue!

par **spidercrash** » 28 juin 2011, 22:55

bonjour a tous,
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>

puis dans mon code css j'ai cela

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;
}

j'ai placé un conteneur qui comprend la résolution en pourcentage, mais cela ne marche pas pourriez vous m'aider s'il vous plait.

merci pour votre aide

css design fluide

Répondre

Étendre la vue Revue du sujet : css design fluide

Re: css design fluide

css design fluide