Positionnement des calques...

Marsh Posté le 23-10-2004 à 13:48:34

Salut à tous !

Je cherche à créer cette feuille en CSS:

Voici où j'en suis:

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

Les codes:

CSS:

Code :

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

HTML:

Code :

<!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. Ut in lorem a pede viverra dapibus. In nec lorem sodales velit malesuada bibendum. Ut laoreet sem ac augue. Integer nec augue. Integer ac erat sed nulla ullamcorper fringilla. Vivamus et pede. Aliquam erat volutpat. Nunc interdum libero in metus. Quisque eleifend sapien eget turpis accumsan lobortis. Nunc at lacus. Fusce posuere elementum lectus. Aliquam erat volutpat. Suspendisse purus. Curabitur sodales nunc eu nulla. Donec lorem neque, laoreet ut, vehicula eu, luctus vitae, nisl. Nunc at tortor ac magna suscipit rutrum. Sed eu diam in est tristique consectetuer. </p>
</div>
<div id="principal">
<img src="elements/photo_bis.jpg">
<div id="centre">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p>Mauris scelerisque lectus at justo. Vestibulum elementum tempor eros. Aenean elementum elit interdum urna. Morbi vitae libero. Sed feugiat est at libero. </p>
<p><br />
</p>
</div>
<div id="droite">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam lobortis. Ut in lorem a pede viverra dapibus. In nec lorem sodales velit malesuada bibendum. </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...

Mais là, je bloque ...

Peut être quelqu'un peut il m'aider ?

Merci !

Message édité par huggy le 23-10-2004 à 14:01:39

Reply

Marsh Posté le 23-10-2004 à 13:48:34

Reply

Marsh Posté le 23-10-2004 à 14:13:40

En fait, c'est assez facile à faire si tu ne tiens pas compte de IE, autrement, c'est assez complexe voire impossible [:spamafote]

Reply

Marsh Posté le 23-10-2004 à 14:16:15

tu peux expliquer ?

Reply

Marsh Posté le 23-10-2004 à 14:18:53

Le positionnement tel que tu le veux peut très facilement s'obtenir en jouant sur le display:table-cell mais IE ne reconnait pas cet attribut CSS et tu devrait donc jouer avec des div suplémentaires et alterner avec des bloc flotants et sans doute absolus.

Reply

Marsh Posté le 23-10-2004 à 14:20:00

arf.......

j'suis calmé là

Reply

Positionnement des calques...

Sujets relatifs:

Leave a Replay