Chapitre: vue d'ensemble Forum SELFHTML Chapitre: vue d'ensemble Archives du forum Chapitre: vue d'ensemble 2004 Chapitre: vue d'ensemble septembre
SELFHTML

Forum SELFHTML: Archives:
aligner en bas un bloc <DIV>
Page d'information: vue d'ensemble
vers le bas 

(CSS) aligner en bas un bloc <DIV>

Le message suivant est de: Fugita, 28. 09. 2004, 09:28

Bonjour,

je cherche à mettre un menu en bas de page (ensemble d'images et texte).

La propriété 'float' ne fonctionne qu'horizonatalement et 'vertical-align', seulement pour le texte...

J'ai aussi essayé en mettant 'margin-bottom' à 0px, mais ça ne change rien.

La seule solution (que je veux éviter), c'est de caler ce menu une fois tout le contenu de la page intégré : mais du coup, on perd un temps fou !

Pouvez-vous m'aider svp ?
(je débute en positionnement par CSS)

Fu'


 
vers le hautvers le bas 

(CSS) aligner en bas un bloc <DIV>

Le message suivant est de: Patrick Andrieu, 28. 09. 2004, 18:12

Bonjour!


»» La propriété 'float' ne fonctionne qu'horizonatalement et 'vertical-align', seulement pour le texte...
»» J'ai aussi essayé en mettant 'margin-bottom' à 0px, mais ça ne change rien.

Je n'ai pas trop le temps d'essayer, c'est pourquoi j'ai recherché pour toi dans les archives du forum allemand. J'ai trouvé cette discussion intéressante: http://forum.de.selfhtml.org/archiv/2004/3/76395/, dans laquelle l'auteur évoque:

{ position:absolute; bottom:0px; }

Il est aussi cité un site en anglais très intéressant pour tous ceux qui s'intéressent aux CSS: http://www.alistapart.com/ et ici en particulier: http://www.alistapart.com/articles/footers/.

Tous les résultats de ma recherche: http://suche.de.selfhtml.org/cgi-bin/such.pl?suchausdruck=%22unten+positionieren%22&lang=on&feld=alle&index_1=on&index_2=on&index_3=on&index_4=on&index_5=on&index_6=on&index_7=on&index_8=on&index_9=on&index_10=on&index_11=on&hits=100#Forums-Archiv%202004

Meilleures salutations de Francfort sur le Main,
Patrick


 

vers le hautvers le bas 

(CSS) aligner en bas un bloc <DIV>

Le message suivant est de: Fugita, 30. 09. 2004, 19:38

Merci !

»» { position:absolute; bottom:0px; }

Correspond tout à fait à ce que je recherchais ^^
Je n'ai malheureusement plus fait d'allemand depuis le Bac !

Bye,

Fu'


 
vers le hautvers le bas 

(CSS) aligner en bas un bloc <DIV>

Le message suivant est de: Fugita, 30. 09. 2004, 23:52

Je malgré tout quelques problemes à la mise en oeuvre...

La feuille de style :
[code] #contenuLarge {
  height: 430px;
  width: 990px;
  border: 2px solid #604357;
 }
 #contenuHaut2 {
  border: 2px solid #604357;
  height: auto;
  width: auto;
  left: 125px;
  top: 0px;
  position: absolute;
 }
 #contenuBas2 {
  height: auto;
  width: auto;
  border: 2px solid #604357;
  left: 90px;
  bottom: 0px;
  position: absolute;
 }[/code]

avec :
[code]<body>
 <div id="global">

  <div id="context">
   <span class="accueil">Accueil > </span>offres paysages > paysage : exotica
  </div>


  <div id="contenuLarge">

    <div id="contenuHaut2">
      <h1>CREATION DE COMPTE BALCOON</h1>
      <div id="etapes"><img src="../images/temp-etapes.gif"></div>
    </div>


    <div id="contenuBas2">
     <div id="test"></div>

      <p>
        Contenu ... contenu ...  contenu ... contenu ...
      </p>
    </div>
 <div>[/code]

Voici ce que j'obtiens :
[img]http://laurentbarbat.free.fr/probleme.png[/img]

... et ce que je cherche à faire :
[img]http://laurentbarbat.free.fr/ceQueJeChercheAFaire.png[/img]


D'après ce que j'ai fait, le positionnement est  fonction une fois fonction de la fenetre du navigateur, et l'autre fois fonction de l'élément directement parent ; je n'y comprends rien :(


Merci de votre aide, j'en ai bien besoin !
Fu'


 
vers le hautvers le bas 

(CSS) aligner en bas un bloc <DIV>

Le message suivant est de: Patrick Andrieu, 01. 10. 2004, 05:43

Bonjour Fu'!


[img]...[/img] ne fonctionnera pas ici, nous n'utilisons pas le BB-Code... ;) Voir les FAQ /faq/forumsfaq_2.htm#a6 à ce sujet...

Hmm, je te cite: "je cherche à mettre un menu __en bas de page__ (ensemble d'images et texte)"

Et c'est bien ce que tu obtiens:

»» [img]http://laurentbarbat.free.fr/probleme.png[/img]


;)

Bon, OK, tu t'es mal exprimé la première fois. Pour:

»» ce que je cherche à faire :
»» [img]http://laurentbarbat.free.fr/ceQueJeChercheAFaire.png[/img]

j'avoue que j'ai longtemps tourné en rond moi aussi. Pour le conteneur du haut, je n'avais pas de pb en employant relative au lieu de absolute. Mais même en rectifiant ton code (par occasion: ton DIV "global" n'est pas fermé), il n'était pas possible de caser le "conteneur du bas" au bas du "conteneur large".

Je venais de rédiger un message avouant ma défaite, lorsque en voulant copier le code pour le citer ici, j'ai vu que le "conteneur large" n'était pas positionné. Et bien voilà: il suffit de positionner aussi le conteneur "large"(id="contenuLarge"). Tu remarqueras au passgage, que ton DIV "global", que j'ai mis entre commentaires, n'était pas fermé! Ce n'était pas ici la source d'erreur, mais en positionnement, si tu oublies de fermer un DIV, tu auras des problèmes. Donc copy and paste and try and enjoy:

<html>
<head>
<title>Test Fugita</title>
<style>
 #contenuLarge {
  position:absolute;
  top:50px;
  height: 430px;
  width: 990px;
  border: 2px solid #604357;
 }
 #contenuHaut2 {
  position: absolute;
  border: 2px solid #604357;
  height: auto;
  width: auto;
  left: 125px;
  top: 0px;
 }
 #contenuBas2 {
  position: absolute;
  height: auto;
  width: auto;
  border: 2px solid #604357;
  left: 90px;
  bottom: 0px;
 }
</style>
</head>


<body>
<!-- <div id="global"> -->

  <div id="context">
   <span class="accueil">Accueil > </span>offres paysages > paysage : exotica
  </div>




  <div id="contenuLarge">

    <div id="contenuHaut2">
      <h1>CREATION DE COMPTE BALCOON</h1>
      <!-- <div id="etapes"><img src="../images/temp-etapes.gif"></div> -->
    </div>

    <div id="contenuBas2">
     <!-- <div id="test"></div> -->

      <p>
        Contenu ... contenu ...  contenu ... contenu ...
      </p>
    </div>

  </div>
<!-- </div> -->
</body>
</html>


»» D'après ce que j'ai fait, le positionnement est  fonction une fois fonction de la fenetre du navigateur, et l'autre fois fonction de l'élément directement parent ; je n'y comprends rien :(


J'avoue que c'est déconcertant (citons SELFHTML http://fr.selfhtml.org/css/proprietes/positionnement.htm#position: "En particulier la conduite des mentions absolute et relative déconcerte un peu au début. Car absolute se comporte après tout de façon relative, comme le montrent les éléments div intérieurs de l'exemple ci-dessus: relativement en effet par rapport au bord de l'élément parent. Quand autrement, il n'y a pas d'élément parent, c'est l'élément body qui est l'élément parent. La mention relative se réfère par contre à la position normale de l'élément lui même.")

Remarque: J'ai testé ton code sous IE 5, n'ayant que celui-ci au boulot.

Meilleures salutations de Francfort sur le Main,
Patrick


 

vers le hautvers le bas 

(CSS) aligner en bas un bloc <DIV>

Le message suivant est de: Fugita, 06. 10. 2004, 21:57

Un Grand Merci !!

Toutes mes questions ont trouvées réponse ^^!

Je me débrouille sans prôblème maintenant (pour le moment en tout cas ;).

J'utilise peut êtr eun peu trop le positionnement absolu par rapport au relatif, et mes feuilles de styles sont un vrai désordre ordonné, mais le code est beaucoup plus clair !

Merci encore et Bonne Continuation,
Laurent


 
vers le haut
Chapitre: vue d'ensemble Forum SELFHTML Chapitre: vue d'ensemble Archives du forum Chapitre: vue d'ensemble 2004 Chapitre: vue d'ensemble septembre

© 1998-2004 Adresse électronique selfhtml@fr.selfhtml.org