3 colonnes : étendre les propriétés jusqu'en bas !

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : 3 colonnes : étendre les propriétés jusqu'en bas !

Profil supprimé

Bonjour,
voilà j'ai un problèmes avec ma présentation :
j'ai cette presentation :

--------------
header
--------------
| | | |
| | | |
| | | |
| | | |
--------------

Seulement j'ai un problème : je ne peux pas étendre une propriété d'une sidebar ou de la colonne centrale (par exemple background-color) jusqu'en bas de la page si cette DIV n'est pas la plus longue : dans ce cas, la propriété s'étend jusqu'à la fin du texte.

Exemple : (background-color: red; sur la sidebar de gauche)

http://lucasavoie.com/files/div.jpg

Voici mon code :

HTML :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" href="style.css" media="all" />
</head>
 
<body>
<div id="main">
 
<div id="header">
Lucasavoie.com
</div>
 
<div id="colonne1">
<ul id="menu">
    <li><a href="#">HOME</a></li>
    <li><a href="#">BLOG</a></li>
    <li><a href="#">FORUM</a></li>
    <li><a href="#">GALERY 1</a></li>
    <li><a href="#">GALERY 2</a></li>
    <li><a href="#">GALERY 3</a></li>
    <li><a href="#">ABOUT</a></li>
</ul>
</div>
 
<div id="colonne2">
<ul id="menu">
    <li><a href="#">HOME</a></li>
    <li><a href="#">BLOG</a></li>
    <li><a href="#">FORUM</a></li>
    <li><a href="#">GALERY 1</a></li>
    <li><a href="#">GALERY 2</a></li>
    <li><a href="#">GALERY 3</a></li>
    <li><a href="#">ABOUT</a></li>
</ul>
</div>
 
<div id="centre">
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. 
</p>
 
<p align="center">
<img src="tour.jpg" width="500" title="Tour" align="Tour" />
</p>
 
<p align="justify">
Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
        <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
 
<div id="footer">
</div>
</div>
</body>
</html>

Code :

body {
    background-color:#e6e5c8;
    background-color:#E9E5E2 ;
    font-family: Verdana, Arial, Helvetica, Geneva;
    line-height:22px;
    margin:0;
    padding:0;
}
 
a {
    text-decoration:none;
}
 
div#header {
    width: 907px;
    background: url(header.jpg) no-repeat;
    padding:5px;
    font-size:24px;
    border-bottom:1px solid #C4CFD1  ;
    height:180px;
}
 
div#main {
    margin-left:auto;
    margin-right:auto;
    width:916px;
    background: #628c94;
    border:1px solid #C4CFD1;
    background-color:#A4B0BE;
    height:100%;
}
 
div#colonne1 {
    float: left;
    width: 149px;
    padding:2px;
}
div#colonne2 {
    float: right;
    width: 149px;
    padding:2px;
}
div#centre {
    overflow: hidden;
    border-left:1px solid #C4CFD1  ;
    border-right:1px solid #C4CFD1  ;
    width: 598px;
    padding-left:4px;
    padding-bottom:4px;
    padding-right:4px;
}
 
ul#menu {
    margin:0px;
    text-align: left;
    padding:4px;
    list-style-type:none;
    line-height:25px;
}

Merci d'avance pour votre aide :jap:

Publicité

Profil supprimé

Dans le bas de cette page :
http://css.alsacreations.com/Faire [...] t-flottant

On dit qu'il n'y a qu'une seule solution : répéter une image de fond... Je vais tester et je vous tiens au courant.

EDIT : çà ne fonctionne toujours pas, même problème

Message édité par Profil supprimé le 30-11-2008 à 19:26:51

David Boring

Tu dois faire une image de fond pour un div qui n'existe pas encore, normal que cela ne fonctionne pas.
Englobe tes div du centre d'un div (class wrapper par exemple) et tu donnes à div l'image de fond.
Donc une image de la largeur de tes colonnes qui se répète que l'axe y
En fait, dans ton cas, c'est uniquement une image qui représente le motif de la colonne de gauche, aligné à gauche.

Ou encore, en pure css, mais avec plus de html
http://matthewjamestaylor.com/blog [...] s-no-hacks

Profil supprimé

ok merci, je vais me pencher sur la méthode de ton lien je pense.

FORUM HardWare.fr

Programmation

HTML/CSS

3 colonnes : étendre les propriétés jusqu'en bas !

Sujets relatifs
Etendre une classe pour en faire un singleton	[NHibernate] Question sur le type des propriétés/colonnes
[VBA] Zone de liste... question alignement colonnes !	Comment cacher 2 colonnes de ma table?
Plusieurs JVM pour étendre la mémoire disponible?	Changer des propriétés d'un graphique Access en VBA
copier coller colonnes d'1 classeur excel vers autre	copier coller colonnes classeur excel vers autre classeur
copier coller colonnes d'un classeur excel vers autre
Plus de sujets relatifs à : 3 colonnes : étendre les propriétés jusqu'en bas !

Page générée en 0.131 secondes