Forums Développement Multimédia

Aller au contenu

Menu colle au pied de page

CODE HTML CSS HTML CSS

20 réponses à ce sujet

#1 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 29 March 2010 - 13:51 PM

Bonjour,

Ma page se présente classiquement en 4 div : header, menu, zone centrale et footer.

Je souhaite que le bas de mon menu (float left) colle systématiquement au footer, quel que soit le volume de texte de la zone centrale.

Pour l'instant, la hauteur de mon menu est fixe et se limite au volume qu'occupent mes rubriques. J'ai essayé d'appliquer une dimension verticale à 100% mais ça ne marche pa :shock: s...

#2 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 29 March 2010 - 15:39 PM

Bonjour,

tu as une URL de test ?

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#3 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 29 March 2010 - 15:46 PM

Je joins une page test (rien à voir avec le site que je souhaite créer) : l'idée est donc de faire coller la partie menu au footer...

Fichier(s) joint(s)



#4 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 29 March 2010 - 18:40 PM

Bonjour,

tu dois englober ton site dans un "master-content" afin de pouvoir positionner ton menu en "absolute"

CSS :
#master_content{position:relative;}
#menu {position:absolue; bottom:65px; left:0;}
 

HTML :

<body>
    <div id="master_content">
        <div id="menu"></div>
        <div id="corps"></div>
    </div>
    <div id="pied_de_page"></div>
</body>
 

Ton menu s'agrandira bien vers le haut car tu positionnes à partir de l'ancre située en bas à gauche de ton div (bottom:65px; left:0;)

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#5 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 30 March 2010 - 01:19 AM

Merci pour la précision de la réponse mais j'ai dû rater une étape.

Bon, je reconnais que je ne pratique les balises div que depuis 2 jours et je rame un peu sur ce point, ce qui est d'autant plus désagréable que l'on bénéficie d'un conseil pro. Je me permets donc de joindre à nouveau mon ersatz de page et l'état de mon code.

A priori, j'ai bien "enveloppé" toutes mes div par la balise master_content mais l'option "absolute" ne me permet de prolonger mon menu qu'horizontalement et non verticalement de manière à coller au footer... :shock:

Fichier(s) joint(s)



#6 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 30 March 2010 - 06:59 AM

Bonjour,

Peut être ais-je mal compris :shock:

est-ce le résultat que tu cherches à obtenir ?

Ren

Fichier(s) joint(s)


---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#7 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 30 March 2010 - 10:12 AM

C'est peut-être moi qui n'est pas été assez clair. J'ai bricolé un peu avec des retours à la ligne :shock: pour essayer de te montrer le résultat souhaité. Il s'agit en fait de permettre au bas du menu d'être toujours aligné au bas de la zone centrale.

Fichier(s) joint(s)

  • Fichier joint  Capt.png   69.36 Ko   73 téléchargement(s)


#8 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 30 March 2010 - 13:34 PM

Alors ce que tu demandes est une vrai galère ;)

J'ai bien une solution mais elle ne fonctionne pas sur ie6 et ie7.
Il leur faudra comme d'habitude un traitement de faveur.

Personnellement, j'évite le genre de construction que tu souhaites réaliser, c'est souvent casse-gueule et ça oblige à faire des feintes.

Si vraiment il est impossible de s'en passer alors je fais une version moins "carré" pour ie6 et 7 et j'explique que l'expérience utilisateur sur les version supérieures est améliorée.

C'est le cas notamment quand j'utilise des propriétés récentes comme text-shadow qui n'existent pas sur ie6.
C'est pas essentiel, mais ça rend le site plus beau, plus sympa.

En gros le site conserve son ergonomie mais le graph diffère quelque peu.

Est-ce que ça t'intéresse quand même ?

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#9 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 30 March 2010 - 14:02 PM

C'est donc monn premier gros choc ;) je me suis mis au balise div après avoir abandonné mes vénérables tableaux avec lesquels cet aménagement n'était qu'une formalité puisque un tableau externe qui englobait la nav et la partie centrale s'ajustait automatiquement avec le pied de page ? Pour ta solution qui ne fonctionne que sur IE8, ça ne me paraît pas réaliste en l'état des mises à jours IE des visiteurs. Cela dit, si ta solution n'est pas une bidouille trop complexe à mettre en œuvre, je suis tout à fait preneur pour l'avenir :lol:

#10 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 30 March 2010 - 14:46 PM

Alors je te le déconseille mais bon c'est pas non plus une grosse "feinte", :)

Tu as abandonné les tables et tu ne peux que t'en féliciter :) maintenant retour aux tables ;)

Donc tu passes ton div id="master-content" en display:table;

puis ton div id="nav" en display:table-cell;

Si quelqu'un a une meilleure idée :) qu'il ne se gène pas.
pour ie6 et ie7, tu fais un commentaire conditionnel et ton menu n'atteindra pas le footer sur ces deux navigateurs, ce qui n'est pas non plus hyper important.
Ils sont quand même voué à disparaître.
IE9 est en marche :lol:

Sinon en HTML5/CSS3 nous disposerons d'un moyen simple de faire de la mise en page en colonne.
CSS3 construction en colonne sur developer.mozilla.org


Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#11 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 30 March 2010 - 16:50 PM

Du coup, j'ai un peu de mal a retrouver mes billes ;)

l'idée serait donc de désigner ma première div qui englobe les autres en
div id="display:table"

et pour l'ID nav , c'est celle que j'ai nommé <div id="menu"> ? faut-il la renommer en <div id="display:table-cell">

Pas de css ? :lol:

#12 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 30 March 2010 - 16:59 PM

Non ;)

le display:table est une propriété CSS :lol:

#master-content{display:table;}

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#13 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 30 March 2010 - 17:25 PM

J'ai donc ajouté la css
#master-content {display:table;}

Et la div qui englobe toutes les autres
<div id="display:table">

Si c'est ça, c'est pas bon ;)

#14 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 30 March 2010 - 17:28 PM

lol non c'est pas ça ;)

As tu compris à quoi servait les id ? et les class ?
et la différence entre un id/class et une propriété css ?

HTML

<div id="master-content"></div>
<div id="menu"></div>
 

CSS

#master-content{display:table;}
#menu{display:table-cell;}
 

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#15 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 30 March 2010 - 17:45 PM

D'après mon parcours tout frais, il me semblait avoir compris que les id concernent les css utilisés une seule fois (pour les footer, header...) et les class sont les autres css ;) mais je reconnais que le concept n'est pas encore parfaitement gravé dans le faible espace encore disponible dans ma mémoire de saurien du web.

Bon j'ai copier sagement les id et les css mais ça ne fonctionne toujours pas... et c'est à ce moment là normalement que tu te lasses un peu... :lol:

Fichier(s) joint(s)



#16 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 30 March 2010 - 19:58 PM

Mais non ;)

évidement si je ne te dis pas tout :lol:

HTML
<!-- L'en-tête -->
<div id="en_tete"></div>
<div id="master_content">
    <!-- Les menus -->
    <div id="menu">        
        <h3>Titre menu</h3>
        <ul>
          <li><a href="page1.html">Lien</a></li>
          <li><a href="page2.html">Lien</a></li>
          <li><a href="page3.html">Lien</a></li>
        </ul>
    </div>
    <div id="corps">
       <span class="corps_GdTit">Mon site</span>
       <p>
         Bienvenue sur mon super site !<br>
         Vous allez adorer ici, c'
est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
       </p>
       <h2>A qui s'adresse ce site ?</h2>    
       <p>
         A tout le monde ! Si je commence à privilégier certaines personnes, on va m'
accuser de discrimination ;o)<br>
         Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
       </p>
       <h2>L'auteur</h2>    
       <p>
         L'
auteur du site ? Bah, c'est moi, quelle question :-p<br>
         Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'
attirer un maximum de
         visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br>
         Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de
         nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
       </p>
       <p></p>
  </div>
</div>
<!-- Le pied de page -->
   <div id="pied_de_page">
    <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
</div>
 

CSS





#menu {
background-color:#626262;
background-image:url("images/motif.png");
background-repeat:repeat-x;
border:2px solid black;
margin-bottom:20px;
display:table-cell;
width:120px;
}

#master_content {
display:table;
}

#corps {
background-color:#626262;
background-image:url("images/motif.png");
background-repeat:repeat-x;
border:2px solid black;
color:#B3B3B3;
margin-left:20px;
padding:5px;
}
 

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#17 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 30 March 2010 - 20:00 PM

Voila :lol:

J'ai viré un div de ton menu et sortie le header et le footer du master-content

N'hésites pas, je suis ton post avec intérêt ;)

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#18 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 30 March 2010 - 22:42 PM

Bon, j'ai bien remplacé mon code par le tien mais ce n'est toujours pas concluant. J'ai même créé une toute nouvelle page avec seulement ton code, résultat idem.

il faut que je précise que je ne teste que sur Safari et Firefox donc mac, on aurait pu imaginer que ces navigateurs soit au niveau d'IE8... est-ce que c'est grave ? :)
Par ailleurs, je travaille avec Dreamweaver mais je pense que dans le cas présent, ce n'est pas rédhibitoire, il faut quand même lui donner à manger le bon code.

Sans brouiller les pistes et rester en phase avec la question posée, je viens de voir qu'il existe 3 méthodes de montage en div (Absolu, liquide et élastique). La méthode absolu utilise à priori des div PA (anciens "Calques) et ce serait peut-être mieux pour faire fonctionner ta solution ? :lol: :!: non, il y a peu de chance... (je joins un modèle un peu plus propre que le mien issu de la CS4)

Autres pistes de réflexion :
- pourquoi une dimension hauteur en pourcentage n'a pas le même effet qu'en largeur, si ça fonctionnait avec Height 100% le problème serait réglé :)
- et si je remplace ma div générale par un... tableau, est-ce que tout explose ? ;)

Bon, c'est assez cruel mais c'est bien cet effet qui est bloquant pour mon site, si je parviens à le faire fonctionner, je encadrerai la page de code :)

Fichier(s) joint(s)



#19 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 31 March 2010 - 00:17 AM

Juste avant de me coucher ;)
Pourrais-tu tester ce code dans tes versions de Firefox et Safari ?

Ren

Fichier(s) joint(s)


---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#20 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 31 March 2010 - 18:25 PM

Magnifique !!! ;-) Safari et Firefox : parfait. L'affichage "table" serait-il le descendant de mes bons vieux tableaux ? :lol:

Seul (tout petit) bémol pour le graphiste que je suis, le côté wisiwyg en prend un sacré coup dans les pattes côté Dreamweaver mais ce n'est pas dramatique, il faut savoir évoluer.

Et pour tenter de comprendre (après avoir vu) et de reproduire (je n'ai pas encore eu le temps, est ce que je dois créer une div qui englobe toutes les div qui doivent coller au pied de page et lui appliquer un css display table et ensuite appliquer aux div internes un css display table-cell ???

Dans tous les cas, je te remercie beaucoup pour ta patience et tes compétences. cela dit, il se peut que je revienne vers toi pour verrouiller ce point qui est capital dans la conception de mes pages. :neutral:

#21 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 31 March 2010 - 21:31 PM

Bonsoir.
Pour un complément d'informations sur alscréations



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP