28173 sujets

CSS et mise en forme, CSS3

Images en bas de colone

Bonjour,
Je n'étais pas venue sur ce forum depuis des mois et, toutes mes excuses, je reviens avec un problème qui me bloque depuis deux jours...
Je voudrais savoir comment on peut placer des images en bas des colonnes. C'est dur à expliquer, un petit exemple sera plus simple. Il s'agit d'un site ayant participé au concours cssr2007 : http://originel.moncv.ch/index.html
Voila, en bas de page se trouvent des dessins, à savoir l'ombre d'un homme et d'une femme. Ces images sont toujours en bas bien sûr, "collées" au cadre principal.
Mais j'ai beau analyser le code source, je ne comprends pas. Etant donné qu'on ne connaît pas à l'avance la hauteur des colonnes, comment peut-on demander aux navigateurs de placer les images en bas ?
Pourriez-vous m'expliquer le concept dans les grandes lignes svp ? Positionnement absolute ou relative ? des marges négatives ? des z-index ?
Une p'tite piste svp Smiley smile ?
Ou un lien vers un tutoriel qui parlerait de tout ceci...
Merci,
Dzana
Modifié par Dzana (15 Dec 2007 - 23:09)
Salut Smiley smile

Pour ce qui est de l'élément toujours "collé" au bas de la page je peux te conseiller ces tutos :

- Design XHTML/CSS complet avec 2 colonnes de même hauteur, et plus précisemment cette partie qui t'intéresse Smiley cligne
- Pied de page en bas

Et si tu veux un fond qui passe dessus ou dessous d'un élément tu peux jouer avec le z-index.

Pour ce qui est du site que tu as donné c'est plus compliqué, car l'auteur multiplie les éléments et leur positionnement (d'ailleurs le choix du balisage est parfois douteux, comme l'image de l'epi placée dans un <p>).
Salut,

On peut faire plus simple si on a simplement une image de fond à placer en bas de page. Il "suffit" de la mettre en arrière-plan de html ou body et de la positionner correctement : 
html { 
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  [b]background: #fff url(mon_image.jpg) center bottom no-repeat;[/b]
}
Bonjour,
Merci beaucoup Smiley smile
Belig > Merci, j'ai pu résoudre mes problèmes grace à ces liens.
Thomas > Il me semble qu'avec ta technique, l'image est positionnée en bas de l'écran et non pas en bas de la page (si la page est plus haute que l'écran, l'image n'est plus en bas), du moins sous FF (avec ie6 en effet elle se cale en bas de page).
Merci, à bientôt,
Dzana
Sujet clos
Aller à