| 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>
|
.
.
______________________________________
creation site internet - Hébergement web - Agence Web |
|
|
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.
.
______________________________________
creation site internet - Hébergement web - Agence Web |
|
|
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
|
|
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....
.
______________________________________
creation site internet - Hébergement web - Agence Web |
|
|
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  |
|
|
|
S'enregistrer
Profil
Se connecter pour vérifier ses messages privés
Rechercher
Membres
FAQ
Connexion
