css/xhtml: pied de page ne se colle pas avec le corps

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par david11, 26 Janvier 2008.

  1. david11
    david11 WRInaute discret
    Inscrit:
    24 Novembre 2007
    Messages:
    56
    J'aime reçus:
    0
    Bonjour,

    je suis entrain de coder un site en xhtml et css et j'ai rencontrer un probleme;

    lorsque le menu vertical est plus long que le corps de la page, le pied de page ne se colle pas avec le corps (voir image).

    donc je veux que le bas de page reste toujours collé avec le corps en toute situation:

    -menu vertical > corps
    -menu vertical < corps

    http://www.music.islamzik.net/image-heb ... me-css.gif

    voila le code que j'utilise:

    css:

    #menu
    {
    float: left;
    width: 145px;
    margin: 0px;
    margin-top: 0px;
    background-color: #FFFFFF;
    border-right: 1px solid #C9C6B3;
    border-bottom: 1px solid #C9C6B3;
    }

    #corps
    {
    margin: 0px;
    margin-top: 0px;
    margin-left: 150px;
    padding: 10px;
    padding-bottom: 15px;
    border-top: 1px solid #C9C6B3;
    border-bottom: 1px solid #C9C6B3;
    border-right: 1px solid #C9C6B3;
    border-left: 1px solid #C9C6B3;
    background-color: #FFFFFF;
    }

    #bas
    {
    CLEAR: both;
    float: right;
    width: 640px;
    margin-left: 150px;
    margin-bottom: 20px;
    border: 1px solid #C9C6B3;
    font: 0.7em Tahoma,sans-serif;
    height: 40px;
    text-align: center;
    padding: 0px;
    padding-top: 10px;
    background-color: #EFEDED;
    }


    xhtml:

    <div id="menu">
    </div>

    <div id="corps">
    </div>

    <div id="bas">
    </div>

    merci de me dépanner et je serai reconnaissant...
     
    #1 david11, 26 Janvier 2008
  2. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 857
    J'aime reçus:
    5
    Code:
    #bas
{
clear: right;
}
    ;)
     
    #2 HawkEye, 26 Janvier 2008
  3. david11
    david11 WRInaute discret
    Inscrit:
    24 Novembre 2007
    Messages:
    56
    J'aime reçus:
    0
    merci HawkEye, le 1er probleme a été résolu, mais lorsque j'ai fait clear: right, le menu a été colé au bas du navigateur.
    j'ai fait margin-bottom au menu mais rien n'est changé, donc comment empecher le menu de se coller au bas du navigateur

    et merci


    (voir l'image)
    http://www.music.islamzik.net/image-heb ... e2-css.gif
     
    #3 david11, 26 Janvier 2008
  4. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 838
    J'aime reçus:
    211
    Fais un margin-bottom sur le body
     
    #4 Marie-Aude, 26 Janvier 2008
  5. david11
    david11 WRInaute discret
    Inscrit:
    24 Novembre 2007
    Messages:
    56
    J'aime reçus:
    0
    Merci Marie-Aude pour la réponse.

    j'ai une autre idée celle de faux columns c-à-d mon menu et mon corps seront toujours de la meme taille mais j'ai pas pu la réaliser malgrés plusieurs recherches, j'ai lu plusieurs articles mais en vain.

    quelqu'un qui as déja réaliser cette technique peut me dépanner, voila le code c'est en haut de topic.

    merci d'avance
     
    #5 david11, 26 Janvier 2008
  6. Vap
    Vap WRInaute impliqué
    Inscrit:
    17 Juin 2007
    Messages:
    983
    J'aime reçus:
    0
    Tu peux regarder mon www, il y a des fausses colonnes. Mais bon, mon fichier CSS mériterait d'être réecrit...

    Le principe est simple: tu fais une div id="contenu" qui englobe toutes tes colonnes. Mettons que tu veuille faire 2 colonnes, le menu, sur 200px, et le corps sur 600px de large. Je met des dimensions arbitraires.

    Mettons que le menu soit de couleur rouge, et le corps de couleur bleue.

    Il faut faire un petit jpg (appelons le fond.jpg) de 10px de haut, de 800px (la largeur de la div contenu) de large, qui soit rouge sur 200px de large à gauche, et bleu sur les 600px de droite.

    Ensuite tu fais
    Code:
    div#contenu {
   position: relative;
   width: 800px;
   background: black url(fond.jpg) center repeat-y;
}
    Le position relative est là pour bien englober les elements flottants tel que le menu.

    Ca marche tant que la div contenu contient bien le menu et le corps. C'est normalement le cas. Si ce n'est pas le cas, tu es probablement dans le cas discuté là:
    https://www.webrankinfo.com/forum/t/css-petit-probleme-div-sous-firefox.87575/
     
    #6 Vap, 26 Janvier 2008
  7. david11
    david11 WRInaute discret
    Inscrit:
    24 Novembre 2007
    Messages:
    56
    J'aime reçus:
    0
    Merci vap, j'ai déja utilisé cette méthode mais il n'a pas bien marché, si quelqu'un peut me proposer une autre méthode, je serai reconnaissant.
    merci
     
    #7 david11, 26 Janvier 2008
  8. Vap
    Vap WRInaute impliqué
    Inscrit:
    17 Juin 2007
    Messages:
    983
    J'aime reçus:
    0
    Qu'est-ce qui n'a pas bien marché?
     
    #8 Vap, 26 Janvier 2008
  9. david11
    david11 WRInaute discret
    Inscrit:
    24 Novembre 2007
    Messages:
    56
    J'aime reçus:
    0
    bonjour vap, certain bug s'affiche
     
    #9 david11, 26 Janvier 2008
  10. david11
    david11 WRInaute discret
    Inscrit:
    24 Novembre 2007
    Messages:
    56
    J'aime reçus:
    0
    existe t il une autre methode????
     
    #10 david11, 26 Janvier 2008
  11. Vap
    Vap WRInaute impliqué
    Inscrit:
    17 Juin 2007
    Messages:
    983
    J'aime reçus:
    0
    C'est vague comme description... Je ne peut pas t'aider plus avec si peu de détails.

    Mais le nombre de sites qui utilisent les fausses colonnes devrait t'encourager à persévérer...
     
    #11 Vap, 27 Janvier 2008
  12. david11
    david11 WRInaute discret
    Inscrit:
    24 Novembre 2007
    Messages:
    56
    J'aime reçus:
    0
    Bonjour vap, si vous pouvez m'aider par msn je te donnerai mes deux pages html et css.

    si quelqu'un ait pitié de moi

    merci
     
    #12 david11, 27 Janvier 2008
  13. Vap
    Vap WRInaute impliqué
    Inscrit:
    17 Juin 2007
    Messages:
    983
    J'aime reçus:
    0
    On continue par mp? (message prive)
     
    #13 Vap, 28 Janvier 2008
  14. Vap
    Vap WRInaute impliqué
    Inscrit:
    17 Juin 2007
    Messages:
    983
    J'aime reçus:
    0
    Ca mérite un petit résolu non?
     
    #14 Vap, 2 Février 2008
  15. david11
    david11 WRInaute discret
    Inscrit:
    24 Novembre 2007
    Messages:
    56
    J'aime reçus:
    0
    bonjour, comment faire ce petit résolu lol vap
     
    #15 david11, 2 Février 2008
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - css xhtml pied Forum Date
Formulaire mail xhtml et css avec fichier php : soucis Développement d'un site Web ou d'une appli mobile 20 Avril 2011
Transformer un template de xhtml/css en php Développement d'un site Web ou d'une appli mobile 30 Août 2010
Balises plus efficace en XHTML ou en CSS ? Débuter en référencement 4 Mars 2009
XHTML 1.0 strict & CSS, style height avec la norme Développement d'un site Web ou d'une appli mobile 13 Juillet 2008
Avis structure xhtml + css Demandes d'avis et de conseils sur vos sites 5 Décembre 2007
Quel est l'intérêt d'avoir un site validé w3c (xhtml/css) ? Développement d'un site Web ou d'une appli mobile 17 Décembre 2006
Un site valid XHTML 1.0 et CSS est'il mieu vu par google ? Débuter en référencement 5 Août 2006
Html, xhtml, javascript et css Développement d'un site Web ou d'une appli mobile 18 Juillet 2006
css et xhtml sos ! Développement d'un site Web ou d'une appli mobile 29 Juin 2006
Cadeaux : 2 logos pour vos pages validées w3c xhtml et css Développement d'un site Web ou d'une appli mobile 1 Février 2006
CSS, XHTML, accessibilité, normes web et référencement Développement d'un site Web ou d'une appli mobile 25 Novembre 2005
CSS3 ET XHTML Développement d'un site Web ou d'une appli mobile 9 Septembre 2005
Problème XHTML/CSS insoluble Administration d'un site Web 2 Mai 2005
Signatux, un livre d'or XHTML CSS ! Administration d'un site Web 6 Février 2005
XHTML | CSS - Astuces pour contourner les Bugs de IE Administration d'un site Web 4 Octobre 2004
XHTML, CSS Administration d'un site Web 2 Octobre 2004
Mise en page XHTML/CSS 3 cols ok sous IE5/6, opera, moz... Administration d'un site Web 28 Septembre 2004
XHTML et CSS sur mon site... Problèmes de référencement spécifiques à vos sites 30 Juin 2004
Création d'une structure libre de site en XHTML / CSS Administration d'un site Web 6 Mai 2004
xhtml/css ... C'est trop tot pour les utiliser...? Administration d'un site Web 16 Février 2004