[css] Petit problème de taille d'un div

Marsh Posté le 11-10-2004 à 21:35:25

Code :

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
margin: 0;
padding: 0;
background-image:url("design/fond.png" );
background-color: #cbd6ff;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-color: red;
}
#haut {
height: 150px;
background-color:white;
background-image:url("design/fond4.png" );
background-repeat: repeat-y;
background-position: right;
background-color: #cbd6ff;
padding-left:10px;
}
#menugauche {
position: absolute;
left:0;
width: 180px;
padding-left:10px;
padding-right:10px;
background-color: blue;
}
#centre {
background-color:#f6eed4;
margin-left: 200px;
margin-right: 0px;
padding-left:10px;
padding-right:10px;
text-align:justify;
background-color: yellow;
}
#pied {
height: 20px;
background-image:url("design/pied.png" );
background-repeat: repeat-y;
background-position: right;
background-color: #cbd6ff;
}

Je voudrais que le #menugauche en bleu aille jusqu'au #pied mais je veux pas indiquer une taille fixe de hauteur.

Merci d'avance, ce problème me bloque depuis plusieurs jours!

Message édité par satchie le 11-10-2004 à 21:36:41

---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.

Reply

Marsh Posté le 11-10-2004 à 21:35:25

Reply

Marsh Posté le 11-10-2004 à 22:21:58

Svp à l'aide

---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.

Reply

Marsh Posté le 11-10-2004 à 23:12:51

J'ai mis 100% en height, ca s'affiche différement entre Mozilla et IE mais surtout ca s'affiche pas correctement dans les deux cas.

http://satchie.free.fr/test/index.html

Code :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title> :: Satchie :: News :: </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<div id="haut">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h4><a href="index.html"> N e w s </a> | <a href="custo.html"> C u s t o m </a> |<a href="mao.html"> M a o </a> </h4>
</div>
<div id="menugauche">
<br>
<h2>| I n f o s |</h2>
<p>Pseudo: Satchie
<p>Nationalité: Française
<p>Ville: Lyon
<p>Age: 26
<br>
<br>
<h2>| C o n t a c t |</h2>
<p><a href="mailto:satchie@free.fr">Satchie@free.fr </a>
<p>Msn: satchie78@hotmail.com</p>
<p>&nbsp</p>
<br>
<br>
<h2>| A f f i l i a t i o n |</h2>
<p>&nbsp</p>
<br>
<br>
<h2>| L i e n s |</h2>
<p><a href="http://forum.hardware.fr/hardwarefr/Discussions/sujet-10270-1.htm" target="blank">Topic Hardware.fr</a><br>
<p><a href="http://forum.clubic.com/forum2.php3?config=&post=28145&cat=19&cache=cache&sondage=&owntopic=0&p=2&trash=&subcat="target="blank">Topic Clubic.com</a><br>
<p><a href="http://customxp.net/"target="blank">> CustomXP</a><br>
<p><a href="http://www.trucsenvrac.com/"target="blank">> Trucsenvrac</a><br>
<p><a href="http://www.gfxoasis.com/" target="blank">> GfxOasis</a><br>
<p><a href="http://www.studiotwentyeight.net/"target="blank">> Studio28</a><br>
<p><a href="http://www.deviantart.com/"target="blank">> Deviantart.com</a><br>
<p><a href="http://www.rad-e8.com/"target="blank">> RadE8</a><br>
<p><a href="http://www.foood.net/"target="blank">> FoodIcons</a><br>
<p><a href="http://www.iconfactory.com/"target="blank">> TheIconFactory</a><br>
</div>
<div id="centre">
<a name="hautdelapage"></a>
<br>
<h2>| 1 0  s e p t e m b r e  2 0 0 4 |</h2>
<p>Voici la cinquième version de mon site. Quelques nouveautés à savoir :
<p>&nbsp</p>
<h2>| 1 2  s e p t e m b r e  2 0 0 4 |</h2>
<p> <a href="http://nico.aerial-music.com/perso/index.html" target="_blank">Fletchernic</a> et <a href="http://www.ultradesks.fr.fm/" target="_blank">Ultraman</a> deux membres de la Frenchtouch ont récemment refais leur site, à voir absolument.
<p>&nbsp</p>
<h2>| 31  a o û t  2 0 0 4 |</h2>
<p>Le forum <a href="http://www.trucsenvrac.com/" target="_blank">TrucsenVrac</a> organise sur une idée de <a href="http://www.bioscoop.fr.st/" target="_blank">BioScoop</a> un concours de desks sur le thème suivant: autour du monde en 30 jours: évasion dans les pays lointains... <a href="http://www.trucsenvrac.com/forum/viewthread.php?tid=4133" target="_blank">Accès direct au topic</a>. Le concours se termine le 24 septembre.</BLOCKQUOTE>
<p>&nbsp</p>
<h2>| 30  a o û t  2 0 0 4 |</h2>
<p>J'ai testé un logiciel porté de linux sous windows qui offre une expérience originale de customisation, à savoir <a href="http://bb4win.sourceforge.net/bblean/" target="_blank">BbLean</a> qui est une variante du logiciel <a href="http://www.bb4win.org/news.php" target="_blank">Bb4Win</a> qui lui même est un portage de BBox sous linux. En quelques mots l'installation est aisée, la configuration du programme est facile mais il faut souvent passer par l'édition de fichiers *ini (en fait *.rc). Pour le reste il est facilement customisable, de nombreux plug in sont disponibles et une communauté conséquente (voir le forum <a href="http://forums.loose-screws.com/index.php?sid=c2b492afed8cbadcef80b8b2547b86d0" target="_blank">loose-screws.com</a> ) permet d'avoir pas mal d'activité autour de ce logiciel. <br>
Pour information, la customisation des différents programmes à savoir bsplayer et winamp sur mes deux derniers screenshots n'est pas encore terminée.
Maintenant, il reste à savoir si BbLean représente une alternative viable à long terme de l'explorer. Suivant mes disponibilités je ferai peut être un petit article sur ce logiciel.
<p>&nbsp</p>
<h2>| 19  a o û t  2 0 0 4 |</h2>
<p>Une petite news pour vous informer que deux membres de la Frenchtouch à savoir <a href="http://perso.wanadoo.fr/ultr4man/" target="_blank">Ultraman</a> et <a href="http://www.bioscoop.fr.st/" target="_blank">Bioscoop</a> ont refait leur site.
Le même Ultraman a créé son <a href="http://www.ultrablog.fr.st/" target="_blank">blog</a>, alors si vous voulez tout savoir sur la vie trépidente d'un membre de la Frenchtouch, vous savez où aller!
<p>&nbsp</p>
<h2>| 19  j u i l l e t  2 0 0 4 |</h2>
<p>Un nouveau desk basé sur la suite <a href="http://whistl3r.deviantart.com/" target="_blank">Nano</a> par les membres du groupe <a href="http://www.4imp.de/" target="_blank">FOURIMPRESSION</a>. La suite est complète, elle comprend le thème et un shell, une suite d'icones avec des modèles pour en créer d'autres, un skin winamp, des curseurs... C'est une suite que j'apprécie particulièrement car originale et minimaliste.
<p>&nbsp</p>
<h2>| 1 4   j u i l l e t  2 0 0 4 |</h2>
<p>Ce site a été référencé par <a href="http://www.gfxoasis.com/" target="_blank">GfxOasis</a> (ex: design Technika /DT2) comme le site de la semaine.</h3>
<p>&nbsp</p>
<h2>|1 8  j u i n  2 0 0 4 |</h2>
<p>Spéciale dédicace à DocVespine!J'ai corrigé la faute :o <br>
Ajout d'un nouveau desk et de deux walls.</h3>
<p>&nbsp</p>
<h2>| 1 7  j u i n   2 0 0 4 |</h2>
<p>Ajout d'un nouveau desk pour la réouverture, vous remarquerez que j'utilise un nouveau skin pour winamp 5, <a href="http://www.customize.org/details/33750" target="_blank">Hal's Eye</a> que je vous recommande chaudement d'essayer.
<p>&nbsp</p>
<h2>| 1 6  j u i n  2 0 0 4 |</h2>
<p>Nouvelle version du site, c'est la troisième ;-) dans un style plus reposant.
<p>&nbsp</p>
<h2> | 1 5  j u i n  2 0 0 4 |</h2>
<p>Ajout du lien vers le ring de laFrenchTouch, ring qui rassemble les sites de custo française, bonjour à toute la team!
Vous avez pu remarquer que le site n'est pas souvent mise à jour, ceci par manque de temps, j'en suis désolé. <br>
Je tiens aussi à remercier ceux qui m'envoient des mails pour le site, comme toujours n'hésitez pas à me contacter si vous chercher des walls, des icones... je met juste un peu de temps pour répondre ;-) .
<p>&nbsp</p>
<h2> | 1 7  a v r i l  2 0 0 4 |</h2>
<p>2 nouveaux desktops et 5 archives. Ajout des sites de Fletchernic et Alxboss à l'initiative de Ultraman pour créer un ring sur la custo.
<p>&nbsp</p>
<h2> | 1er  m a r s  2 0 0 4 |</h2>
<p>Quelques petites modifications sur le site (rubrique liens) et un nouveau desk.
<p>&nbsp</p>
<h2> | 2 5  f é v r i e r  2 0 0 4 |</h2>
<p>Salut à toutes et à tous, ouverture du site.
<p>&nbsp</p>
<a href="#hautdelapage"><p>^ H a u t  d e  l a  p a g e ^</a> <br><br>
</div>
<div id="pied">
<h4>Satchie © - 2004</h4>
</div>
</div>
</body>
</html>

et le css

Code :

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
margin: 0;
padding: 0;
background-image:url("design/fond.png" );
background-color: black;
height:100%;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-image:url("design/fond2.png" );
background-repeat: repeat-y;
background-position: right;
background-color: red;
}
#haut {
height: 150px;
background-color:white;
background-image:url("design/fond4.png" );
background-repeat: repeat-y;
background-position: right;
background-color: #cbd6ff;
padding-left:10px;
}
#menugauche {
position: absolute;
left:0;
height:100%;
width: 180px;
padding-left:10px;
padding-right:10px;
/*background-image:url("design/menu.png" );
background-repeat: repeat-y;
background-position: left;*/
background-color: blue;
}
#centre {
background-color:yellow;
margin-left: 200px;
margin-right: 0px;
padding-left:10px;
padding-right:10px;
text-align:justify;
/*background-image:url("design/menu2.png" );
background-repeat: repeat-y;
background-position: right;*/
}
#pied {
height: 20px;
background-image:url("design/pied.png" );
background-repeat: repeat-y;
background-position: right;
background-color: #cbd6ff;
}
/* titre */
h1 {
font-size : 14px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #6c9cc8;
text-align: left;
}
/* titre des dates*/
h2 {
font-size : 9px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #6c9cc8;
text-align: left;
}
/*Texte des news*/
h3 {
font-size : 9px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #666666;
text-align: justify;
margin-left: 20px;
}
/*le menu */
h4 {
font-size : 9px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : white;
text-align: center;
word-spacing: 10px;
}
a:link {color: white; text-decoration:none; font-size : 9px; font-family : Verdana, Arial, Helvetica, sans-serif; }
a:visited {color: white; text-decoration:none; font-size : 9px; font-family : Verdana, Arial, Helvetica, sans-serif;}
a:hover {color: #5385eb; text-decoration:none; font-size : 9px; font-family : Verdana, Arial, Helvetica, sans-serif;}
p {margin: 0px 0px 10px 0;}

---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.

Reply

Marsh Posté le 12-10-2004 à 09:38:28

Tu ne pourras pas! :sweat: la seule solution mettre la même couleur que le menu à l'ID conteneur [:airforceone]

Il y a bien une astuce pour fixer une hauteur minimale, mais si le bloc centre dépasse cette hauteur mini, on retourne à la case départ

teste si tu veux :

#menugauche {
position: absolute;
left:0;
width: 180px;
padding-left:10px;
padding-right:10px;
background-color: blue;
height: auto !important;
height: 450px; /* because ie suxxe */
min-height: 450px;
}

Reply

Marsh Posté le 12-10-2004 à 11:04:16

Merci pour ta réponse je testerai ce soir .
En fait si tu pouvais regarder ce site http://www.maniacalrage.net/films/
la colonne grise s'ajuste automatiquement à la taille de l'ensemble :??:

---------------
.::Le Topic du Plus Beau Bureau.::. Mes Desks ::.

Reply

Marsh Posté le 12-10-2004 à 11:43:31

et qu'est-ce qui t'empeche de regarder leur source pour essayer de comprendre comment ils ont fait ?

---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World

Reply

Marsh Posté le 13-10-2004 à 14:29:13

http://www.alsacreations.com/artic [...] g_fixe.htm

---------------
Site Photo

Reply

Marsh Posté le 13-10-2004 à 18:29:54

cybercap a écrit :

http://www.alsacreations.com/artic [...] g_fixe.htm

Oui et ???? y a toujours le même problème cadre du menu ne s'agrandi pas, c'est juste que la couleur de fond est la même ! ce que j'ai dit à la première réponse :whistle: