Positionnement des calques...

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Positionnement des calques...

huggy

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

Publicité

gizmo

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

huggy

tu peux expliquer ?

gizmo

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.

huggy

arf.......

j'suis calmé là

FORUM HardWare.fr

Programmation

HTML/CSS

Positionnement des calques...

Sujets relatifs
[HTML/CSS] chevauchement de calques à contenu dynamique	[CSS] Problème de positionnement
Afficher calques par dessous animation flash !	Petit probleme de positionnement
[CSS] Positionnement bloc	[CSS] pb de chevauchement de calques
[GTK+] Positionnement des Widgets ...	[CSS]Positionnement image.
Positionnement de calques dans menu généré automatiquement	Positionnement de calques
Plus de sujets relatifs à : Positionnement des calques...

Page générée en 0.053 secondes