28173 sujets

CSS et mise en forme, CSS3

Design à hauteur variable (CSS-XHTML)

Bonjour

Je fais mes premiers pas sur CSS-XHTML et je suis confronté à un problème que je ne parviens pas à réssoudre malgré les différentes lectures conseillées sur ce site. Je travailel sur le design de mon site. En dessous de l'entête, il y a deux blocks :

le corps : pour insérer le contenu de la page et à sa droite
une colonne (image) pour accueillir des images.

J'aimerai que la hauteur de ces deux blocks s'adapte au contenu.
Dans mon fichier CSS, J'ai insérer dans la balise html "height: 100%;" et dans les propriétés CSS des deux blocks, j'ai mis "height: 100%;".

Mon problème est que ça fonctionne parfaitement pour le corps mais que pour la colonne image, la hauteur ne s'étire pas.

Quelqu'un pourait-il m'aider? Ce serait vraiment super car je suis bloqué!

Voici les codes :

CSS
html
{
height: 100%;
}

body
{
   width: 760px;
   margin: auto; /* Pour centrer notre page */
   background-image: url("images/fond.gif"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc [langue] */
   border: 1px solid black;
  
}

/* LIENS DU MENU*/

a /* Modifier l'apparence des liens*/
{
   text-decoration: none; /* Les liens ne seront plus soulignés */
   color:white; /* Les liens seront en rouge au lieu de bleu */
   
}

a:hover /* Quand le visiteur pointe sur le lien */
{
   text-decoration: none; /* Le lien deviendra souligné quand on pointera dessus */
   color: #e90f5a; /* Le lien sera écrit en rose quand on pointera dessus */
}

a:active /* Quand le visiteur clique sur le lien */
{
   text-decoration: none; /* Le lien deviendra souligné quand on pointera dessus */
   color: #e90f5a; /* Le lien sera écrit enrose quand on pointera dessus */
}



#haut_gauche_menu
{
float: left;
   width: 522px; /* Très important : donner une taille au menu */
   height: 70px;
   overflow: hidden;
   background-color: #6f634f;
   margin: center; 
   
   
   }
   
#haut_droite
{
float: right;
width: 238px;
height: 70px;
background-color: #cccc66;



}

#banniere
{
   width: 760px;
   height: 213px;
   background-image: url("images/banniere.jpg");
   background-repeat: no-repeat;
   }
   
#bas_gauche_menu
{
float: left;
   width: 522px; /* Très important : donner une taille au menu */
   height: 50px;
   overflow: hidden;
   background-color: #6f634f;
   
   }

#bas_droite
{
float : right;
width: 238px;
height: 50px;
background-color: #cccc66;
margin-left: none;
}
#corps
{
float: left;
width: 482px;
min-height: 100%;
height: 100%; 
overflow: visible;
background-color: white;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
}

#image
{
float: right;
width: 238px;
height: 100%; 
overflow: visible;
background-color: white;
background-image: url("images/fondimage.gif");
}

#pied_de_page
{
	width: 760px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	color: #FFFFFF;
	background-color: #000000;
    border: 0px;
}
.element_menu
{
   float: left;
   margin-top: 53px;
   margin-left : 34px;
      }
.element_menu h3 /* Tous les titres de menus */
{    
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: 90%;
}   

.element_menu2
{
   float: left;
   margin-left: 33px; /* Pour éviter que les éléments du menu ne soient trop collés */
   margin-top: 33px;
      }

.element_menu2 h3 /* Tous les titres de menus */
{    
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: 90%;
   }
.imagestyle
{
padding-left: 10px;
padding-right: 10px;
padding-top: 25px; 
padding-bottom: 5px;
}


XHTML : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Les Acacias - Maison de Repos</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="CSS" href="index.css" />

   </head>
   <body>

<div id="entete">


<div id="haut_gauche_menu">


<div class="element_menu">
<h3><a href="index.html"> BIENVENUE </a></h3>
</div>

<div class="element_menu">
<h3><a href="visiter.html"> VISITER </a></h3>
</div>

<div class="element_menu">
<h3><a href="activites.html"> ACTIVITES </a></h3>
</div>

<div class="element_menu">
<h3><a href="services.html"> SERVICES </a></h3>
</div>

</div>


<div id="haut_droite">

</div>

<div id="banniere">

</div>

<div id="bas_gauche_menu">

<div class="element_menu2">
<h3><a href="prix.html"> PRIX </a></h3>
</div>

<div class="element_menu2">
<h3><a href="plan.html"> PLAN </a></h3>
</div>

<div class="element_menu2">
<h3><a href="liens.html"> LIENS </a></h3>
</div>

</div>

<div id="bas_droite">

</div>


<div id="corps">

<p> La maison de repos « Les Acacias » de capacité actuelle de 60 lits a été construite en 1988.</p>
<p>Les Acacias se situe en périphérie de la commune de Flémalle, plus exactement à  Mons-Lez-Liège, à 1 km 
de l’autoroute Liège/Namur, cette situation privilégiée dans une zone boisée et facilement accessible, 
permet l’accueil de résidents de différentes communes avoisinantes.</p>
<p>C’est ainsi que nos résidents proviennent de Flémalle mais aussi de Jemeppe, 
Grâce-Hollogne, Awans-Bierset  Montegnée .etc.</p><p> Aucun problème de parking n’existe,
car face à la maison de repos se trouve une zone verte inconstructible appartenant
à une ASBL qui nous offrent un large accotement pour le stationnement de nos visiteurs 
et personnels.</p>

<div align="center">
<img src="images/pic1.jpg"/>
</div>
</div>

<div id="image">

<div align="center">
<img src="images/pic2.jpg" class="imagestyle"/>
<img src="images/pic3.jpg"class="imagestyle"/>
<img src="images/pic4.jpg"class="imagestyle"/>
</div>
</div>

<div id="pied_de_page">
<p> Les Acacias - Maison de repos - 2006 </p>

</div> 
   
   </body>
</html>


Voici le lien de la page : http://www.talkshopmusic.com/les%20accacias/index.html

Meri beaucoup!

Remy
Modifié par remekke (09 Jun 2006 - 09:04)
Bonjour,

Je t'invite à jeter un coup d'oeil vers ce lien (ainsi que les liens de la rubrique), peut être que ca répondra à ta question.
Merci pour le lien! J'ai tout essayé mais rien ne fonctionne. Est-ce que quelqu'un aurait la gentillesse de jeter un coup d'oeil à mes fichiers, je ne comprend vraiment pas!

Merci

Remy Lebbos
Bonjour remekke et bienvenue,

Peut-être cela résoudra t-il ton problème, en partie (en sus des lectures données par Mikachu :


#pied_de_page
{
	.......
        clear : both;
}
Hello

Merci pour ta réponse. J'ai essayé ce code mais ça n'a pas fonctionné. Je ne comprends vraiment pas pourquoi ça ne marche pas. Ce que je veux faire est tellement simple pourtant...

Merci quand même. SI quelqu'un d'autre sait... faites moi signe Smiley cligne

Remy
Sujet clos
Aller à