Placer une image en bas d'un div plus haut que l'écran

par **albat** » 04 nov. 2006, 22:06

Hip hip hip...

J'ai trouvé !

Moi-même, tout seul, comme un grand ! $\:D/$

Il suffisait de placer l'image dans le bas de page avec un top:-200px

L'explication sur le forum d'Alsacréations.

par **Victor BRITO** » 03 nov. 2006, 17:46

Le problème n'est pas tant pour moi (qui utilise Firefox 2.0 ou Opera 9)
que pour 85% des internautes qui conserveront IE 6 de longs mois encore...

Justement, place un lien sous forme d'image disant "Get IE 7", de même que certains en placent qui dit "Get Firefox".

par **albat** » 03 nov. 2006, 17:39

Le problème n'est pas tant pour moi (qui utilise Firefox 2.0 ou Opera 9)
que pour 85% des internautes qui conserveront IE 6 de longs mois encore...

par **Victor BRITO** » 03 nov. 2006, 17:34

IE 6

Get IE 7, my dear

par **albat** » 03 nov. 2006, 17:32

IE 6

par **mcorgnet** » 02 nov. 2006, 14:10

peut être en faisant ainsi alors :

<p style="position: absolute; margin-bottom: 0px;" ><img src="monimage.png" alt="tralala" /></p>

?

par **albat** » 02 nov. 2006, 13:57

la colonne jaune a déjà une image de fond répétée
à laquelle je veux superposer une image, non répétée, tout en bas.

par **mcorgnet** » 02 nov. 2006, 13:53

dans ta classe, pourquoi tu la mets pas en image de fond :

#colGauche {
background: transparent url(../images/image.png) no-repeat bottom left;
}

ou qque chose du genre ?

par **albat** » 02 nov. 2006, 11:20

En lisant ça :

Essayé avec succès avec les mêmes navigateurs, sauf IE 6.

j'avais compris ça :

Essayé (...) sauf IE 6.

alors qu'en fait, tu voulais dire ça :

avec succès (...) sauf IE 6.

8-[

par **Victor BRITO** » 02 nov. 2006, 11:02

Salut!

Navré de venir jouer les désespérants, Victor,
mais si le résultat obtenu est parfait sous Firefox,
Internet Explorer 6 n'en fait qu'à sa tête
et affiche le vert en bas du blanc, non de la page.

Je vais chercher en utilisant ton code comme base...

Essayé avec succès avec les mêmes navigateurs, sauf IE 6.

Il fallait suivre, Albat.

par **albat** » 02 nov. 2006, 00:29

Navré de venir jouer les désespérants, Victor,
mais si le résultat obtenu est parfait sous Firefox,
Internet Explorer 6 n'en fait qu'à sa tête
et affiche le vert en bas du blanc, non de la page.

Je vais chercher en utilisant ton code comme base...

par **albat** » 30 oct. 2006, 19:03

Pardon de ne pas avoir répondu plus tôt.

Tout d'abord, je tiens à vous remercier pour vos contributions et conseils que je suis en train d'étudier.

J'en profite pour apporter une petite précision :
falgan a soupçonné que cette colonne blanche pouvait contenir le menu.
Dans ce cas, il y aurait en effet un petit souci de cohérence dans la construction des pages.
Je tiens à le rassurer : la colonne blanche ne contient pas le menu.
Mais son intervention (et sa mise en garde) était tout à fait opportune ! =D>

La structure de ce site prévoit un menu horizontal placé au-dessus des blocs blanc et jaune.
La colonne blanche étant utilisée pour afficher des infos ponctuelles, des liens, etc.

par **falgan** » 30 oct. 2006, 10:55

J'ai presque plus rien a dire
je pense que c'est ce que Albat souhaitait obtenir d'un point de vue visuel

Par contre, j'aurais juste une objection a formuler sur le principe. Je m'explique, je pense que la colonne blanche correspond a un menu et le bloc jaune au contenu donc, je m'interroge sur la logique de devoir mettre le div du menu dans le div du contenu, il me semble que le code perd de sa coherence mais si c'est la seule solution pour avoir quelque chose d'accessible, peut etre est il preferable de perdre un peu de coherence.

Donc merci Victor BRITO pour cette solution

par **Victor BRITO** » 27 oct. 2006, 14:56

Salut!

Pour que la colonne blanche prenne toute la hauteur, voici le CSS modifié:

Code : Tout sélectionner

body {
  color: black;
  background: blue;
  padding: 0;
  margin: 0;
}
#conteneur {
  width: 600px;
  margin: 0;
  position: absolute;
}
#colonne-jaune {
  color: black;
  background: yellow;
  padding: 0 0 0 200px;
  position: absolute;
}
#colonne-blanche {
  color: black;
  background: white;
  width: 200px;
  float: left;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
#image-verte {
  color: black;
  background: green;
  width: 100px;
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 0;
}

Essayé avec succès avec les mêmes navigateurs, sauf IE 6.

par **falgan** » 27 oct. 2006, 14:40

je sais pas si c'est moi qui ne comprend pas mais un des problemes est aussi d'avoir la colonne blanche qui prends toute la hauteur du document non?

Placer une image en bas d'un div plus haut que l'écran

Répondre

Étendre la vue Revue du sujet : Placer une image en bas d'un div plus haut que l'écran