Voir le sujet précédent :: Voir le sujet suivant |
Auteur |
Message |
salemioche salemioche
|
CSS / mise en page , Posté le: 03-10-2003 11:53 |
|
|
dans l'exemple ci dessous, le menu (la couleur de fond) ne va pas jusqu'en bas du cadre, comment faire pour que ce soit le cas ?
(le probleme sera le meme pour le corps de la page si le menu etait plus long que le texte => je ne veux pas mettre de background-color sur global)
Code: |
<html>
<head>
...
<style>
body { text-align: center; }
#global {
text-align: left;
width: 750px;
margin-right:auto;
margin-left:auto;
border: black 1px solid;
}
#entete{
width: 750px;
background: #FFFFD0;
border-bottom: black 1px solid;
}
#corps{
width: 600px;
margin-left:150px;
background: #FFD0D0;
border-left: black 1px solid;
}
#menu{
width: 150px;
background: #D0D0FF;
position: absolute;
}
</style>
</head>
<body>
<div id="global">
<div id="entete"><h1 style="margin: 0px;">Title</h1></div>
<div id="menu">m<br>e<br>n<br>u<br></div>
<div id="corps">blablablabalbal<br>e<br>n<br>u<br><br>n<br></div>
</div>
</body>
</html>
|
|
|
|
rorschach dreamweaver mioche
|
CSS / mise en page , Posté le: 03-10-2003 16:34 |
|
|
arf arf arf
moi aussi j'aimerai bien savoir comment faire...
j'ai essayer avec height:100%; mais ça ne fonctionne pas si les contenants n'ont pas des valeurs en % enfin dans mes tests du moins !
si je trouve une solution je post |
|
|
SIBELIUS html mioche
|
CSS / mise en page , Posté le: 03-10-2003 17:06 |
|
|
C'est un problème classique et assez chiant à régler.
En fait la solution dépend de quelle zone est sensée être la plus longue.
Il faut en général placer les deux zones (menu+contenu) dans un conteneur global qui lui devra avoir une hauteur définie. C'est également ce conteneur qui aura la couleur de fond par défaut.
(désolé, c'est pas très clair, mais voici un lien qui pourrait t'aider : http://www.positioniseverything.net/thr.col.stretch.html)
Sinon, voici ce que je te propose :
Code: |
<html>
<head>
...
<style>
body { text-align: center; }
#global {
text-align: left;
width: 750px;
margin-right:auto;
margin-left:auto;
border: black 1px solid;
}
#entete{
background: #FFFFD0;
border-bottom: black 1px solid;
}
#centre {
height: 300px;
background: #D0D0FF;
}
#corps{
margin-left: 150px;
height: 100%;
background: #FFD0D0;
border-left: black 1px solid;
}
#menu{
float: left;
width: 150px;
height: 100%;
background: #D0D0FF;
}
</style>
</head>
<body>
<div id="global">
<div id="entete"><h1 style="margin: 0px;">Title</h1></div>
<div id="centre">
<div id="menu">
<p>menu</p>
<p>menu</p>
<p>menu</p>
</div>
<div id="corps">
<p>lablabalbal</p>
<p>lablabalbal</p>
<p>lablabalbal</p>
<p>lablabalbal</p>
</div>
</div>
</div>
</body>
</html>
|
|
|
|
salemioche salemioche
|
CSS / mise en page , Posté le: 03-10-2003 17:16 |
|
|
en fait on peut mettre ce que l'on veut comme height sur centre ca marche toujours meme avec height: 1px
par contre le rendu est pas top sous mozilla |
|
|
rorschach dreamweaver mioche
|
CSS / mise en page , Posté le: 03-10-2003 17:22 |
|
|
ah bah oui ça fonctionne, quand je disais qu'on en apprend tous les jours
pour les différences entre mozilla et ie c'est un simple problème de marge sur balise <p> si je ne me trompe pas
|
|
|
salemioche salemioche
|
CSS / mise en page , Posté le: 03-10-2003 17:25 |
|
|
j'ai essayé de modifié les margin et padding de entete et centre sans succés |
|
|
SIBELIUS html mioche
|
CSS / mise en page , Posté le: 03-10-2003 17:28 |
|
|
salemioche a écrit: |
en fait on peut mettre ce que l'on veut comme height sur centre ca marche toujours meme avec height: 1px
par contre le rendu est pas top sous mozilla |
Je ne suis pas sûr que ce soit si simple avec un height de 1px... car le contenu voudra toujours prendre 100% de 1px et on ne peut pas savoir comment les différents navigateurs vont interprêter cette astuce
Pour le rendu sous moz, il y'a en effet un espace que tu peux virer avec un petit p {margin:0;} |
|
|
salemioche salemioche
|
CSS / mise en page , Posté le: 04-10-2003 6:51 |
|
|
le probleme avec 1px est le meme avec 300 non ?
si il y a beaucoup de contenu.
en somme il vaut mieux penser son design autrement pour le moment... |
|
|
SIBELIUS html mioche
|
CSS / mise en page , Posté le: 04-10-2003 7:14 |
|
|
salemioche a écrit: |
le probleme avec 1px est le meme avec 300 non ?
si il y a beaucoup de contenu.
en somme il vaut mieux penser son design autrement pour le moment... |
oui, le problème est le même |
|
|
|