IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Div vertical lié au footer


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de razorlok
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    211
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 211
    Par défaut Div vertical lié au footer
    Bonjour à tous,

    Est-il possible de lier un div vertical, faisant office de barre de menu gauche, au footer ?

    Voici mon code CSS pour ces 2 éléments :

    #barre {
    width: 150px;
    float:left;
    height:auto;
    position:relative;
    margin-left:0px;
    background-color:#9ece61;
    margin-top:0px;
    }

    #pied{
    clear:both;
    height:35px;
    text-align:center;
    position:relative;
    bottom:0;
    font-size:13px;
    font-weight:normal;
    text-decoration:none;
    font-family:Verdana;
    color:#999999;
    white-space:nowrap;
    width:100%;
    background-color:#000000;
    }

  2. #2
    Membre confirmé Avatar de razorlok
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    211
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 211
    Par défaut
    J'entend par la, que le height du div vertical prenne toute la page, jusqu'au footer.
    J'ai tenté le heigh:auto; mais ça n'est pas adapté.

  3. #3
    Membre éprouvé
    Profil pro
    Inscrit en
    Mars 2003
    Messages
    154
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2003
    Messages : 154
    Par défaut
    Bonjour,

    ca ne sera pas possible en employant uniquement les CSS. Il faudrait fureter du côté du javascript pour réaliser ce que tu veux. La fonction devrait, en gros, vérifier la hauteur de ta page et, en effectuant les soustractions nécessaires, modifier la hauteur de ton menu pour qu'il s'adapte.

    Toutefois, je suppose (peut-être à tort mais c'est récurrent) que tu cherches une solution au fait que ta couleur de background du menu s'arrete après le dernier lien et qu'il existe un espace blanc entre ton footer et ton menu.

    Si c'est le cas, et vu que ton menu est définit à 150px (si je ne me trompe pas, tu as un template liquid), tu peux peut-être utiliser cette méthode :

    Tout d'abord, structurer ta page de cette manière :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <div id="container">
       <div id="top">...</div>
       <div id="left">...</div>
       <div id="content">...</div>
       <div id="footer">...</div>
    </div>
    Crée alors une image de 150px de haut sur 1px de large avec la couleur de background désirée et place là comme background de container. Comme container englobe les autres sections (divs), ca donnera l'effet désiré.

    Maintenant, désolé si je suis à côté de la plaque et que ce n'est pas ce que tu cherches à faire.

  4. #4
    Membre confirmé Avatar de razorlok
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    211
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 211
    Par défaut
    En effet, c'est une solution, je pense que je vais faire celà étant donné mes infimes compétences en javascript !

    Je cherchais du côté du height, mais ce n'est peut-être pas plus mal avec une image de fond dans mon container.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Div vertical et horizontale.
    Par Golgotha dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 05/04/2011, 16h08
  2. Retirer l'espace entre 2 div vertical
    Par nass94 dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 01/04/2009, 14h25
  3. Comment aligner un div (vertical)
    Par pierrot10 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 24/12/2008, 22h27
  4. 3 div, facile, positionnement du footer
    Par climzerland dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 26/04/2008, 19h46
  5. [DIV] vertical align
    Par crakocrako dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 06/07/2006, 14h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo