créer un site


CSS / mise en page

Poster un nouveau sujet sur css   Répondre au sujet à css:CSS / mise en page    Accueil Forum -> css
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
salemioche
salemioche
salemioche
MessageCSS / 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
dreamweaver mioche
MessageCSS / mise en page , Posté le: 03-10-2003 16:34

arf arf arf
moi aussi j'aimerai bien savoir comment faire... Sad

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 Smile
SIBELIUS
html mioche
html mioche
MessageCSS / 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
salemioche
MessageCSS / 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
dreamweaver mioche
MessageCSS / 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

Smile
salemioche
salemioche
salemioche
MessageCSS / 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 Sad
SIBELIUS
html mioche
html mioche
MessageCSS / 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
salemioche
MessageCSS / 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
html mioche
MessageCSS / 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 Confused
Montrer les messages depuis:   
Poster un nouveau sujet sur css   Répondre au sujet à css:CSS / mise en page    Accueil Forum -> css Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales