28221 sujets

CSS et mise en forme, CSS3

Positionnement des calques...

Salut à tous !

Voilà, je pense que je vais souvent faire appel à vous étant donné que je débute dans les CSS et que j'ai encore un peu (beaucoup) de mal :p

Voici ma question du jour (qui ne sera peut être pas la seule):

Je cherche à créer cette feuille en CSS:

http://www.gen4net.com/temp/css/div.jpg

Mais je cherche aussi à ce que la hauteur du calque 4 s'adapte à la hauteur du calque 3 et à celle du calque 5 et vise-versa...

J'ai essayé d'adapter une feuille d'Alsacréations sans succès Smiley bawling

Vous n'auriez pas une piste ?

Merci pour votre aide Smiley smile
Modifié le 23 Oct 2004 - 11:07
Pour être plus précis, voici où j'en suis:

http://www.gen4net.com/temp/css/

Le code CSS:


body
{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
   margin: 0;
   padding: 0;
}
#header
{
   height:74px;
}
#conteneur
{
   position: absolute;
   width: 760px;
   left: 50%;
   margin-left: -375px;
}
#principal
{
   margin-left:171px;
}
#centre
{
   background-color:#9999CC;
   width:422px;
   position:absolute;
   margin-top:2px;
}
#gauche
{
   position: absolute;
   width: 169px;
   background-color:#A51502;
}
#droite
{
   width: 164px;
   background-color:#F9C845;
   float:right;
   margin-top:2px;
}
#pied
{
   height: 18px;
   background-color: #696969;
   margin-top:2px;
}
p
{
   margin: 0 0 10px 0;
}


Le code HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel=stylesheet type="text/css" href="styles.css">
</head>

<body>
   <div id="conteneur">
      <div id="header">
         <img src="elements/logo_bis.jpg">
      </div>

      <div id="gauche">
         <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam lobortis.</p>
      </div>
      <div id="principal">
         <img src="elements/photo_bis.jpg">
         <div id="centre">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam lobortis.</p>

            <p>Mauris scelerisque lectus at justo. Vestibulum elementum tempor eros.</p>
            <p><br />
              </p>
         </div>
         <div id="droite">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam lobortis.</p>
         </div>

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


ce qu'il me reste à faire:

1) arriver à ajuster la hauteur des calques 4 et 5 en fonction de la hauteur du calque 3

2) réussir à positionner le footer en bas de tout ça...

Merci pour votre aide Smiley cligne

[edit moderateur="ElMoustiko"]J'ai supprimer un peu de ton texte lorem ipsum pour éviter d'étendre la largeur de la page inutilement[/edit]
Pour ajuster la hauteur des colones, c'est pas vraiment possible, tu as cet essai plutot réussi, mais pas parfait (impossible uniquement via CSS) sous IE :
http://blog-and-blues.org/weblog/2004/09/24/304-des-colonnes-de-meme-hauteurs-en-css

Pour le footer, applique la propriété clear: both; dessus pour qu'il passe en dessous du reste.

Sinon pour leurrer des colonnes de même hauteurs, tu peux jouer sur une image de background appliquée sur le conteneur. On arrive généralement à quelque chose, mais ta structure étant "complexe", je ne le garantit pas à 100%
Encore merci pour ton aide et bravo pour cette solution aussi simple qu'efficace !

Bye !

Oggy
Sujet clos
Aller à