Page 1 sur 2
Placer une image en bas d'un div plus haut que l'écran
Posté : 20 oct. 2006, 23:49
par albat
Bonjour,
Je reviens de l'excellent site de Raphaël :
www.alsacreations.com
et, malgré toutes les infos présentes, je n'ai pas trouvé la solution de mon problème.
J'ai créé une colonne : <div style="width:200px;float:left"> (en
BLANC sur le schéma)
dont la hauteur est déterminée par celle de la 2e colonne, à droite (en
JAUNE).
La colonne
BLANCHE a en effet peu de contenu, tandis que la
JAUNE est le conteneur principal.
En outre, la page est trop longue pour s'afficher entièrement à l'écran.
La page est en effet plus haute que la fenêtre d'affichage de Firefox (
ORANGE).
Je souhaite placer une image sur l'extrémité basse de la colonne blanche (en
VERT).
J'ai tripoté mes CSS avec des
position absolute/fixed, des
bottom nuls, etc.
Rien à faire : le cartouche se positionne au mieux en bas de la fenêtre (
ROUGE)
mais pas au bas de la colonne (
VERT) comme je le souhaite.
Z'auriez pas une 'tite idée ?...
D'avance, merci.
Posté : 21 oct. 2006, 07:40
par Cyrano
Si ta colonne est elle-même positionnée, alors positionne l'image en absolute à l'intérieur à bottom: 0 : le positionnement se fait toujours par rapport à l'élément parent positionné : si ton image se positionne par rapport à la fenêtre, c'est qu'entre ton image et body, il n'y a pas d'intermédiaire positionné.
Posté : 21 oct. 2006, 11:24
par albat
Je vais vérifier le positionnement de ma colonne blanche...
J'étais en train de regarder du côté du DOM avec une astuce du genre :
Posté : 21 oct. 2006, 13:30
par albat
Ouiiiiiiin, j'y arrive pas....
Bon, reprenons.
Voici une des versions qui marchaient encore le moins mal
(c'est celle qui me donnait le résultat en rouge) :
Code : Tout sélectionner
#gris { width:900px ; border:none ; background-image:url(images/gris.png) ; background-repeat:repeat-y ; margin:20px auto 20px auto ; padding:0 ; }
#blanc { width:160px ; float:left ; background-image:url(images/blanc.png) ; background-repeat:repeat-y ; padding:20px 25px 20px 20px ; }
#vert { width:155px ; padding:0 ; }
#jaune { width:615px ; float:right ; background-image:url(images/jaune.jpg) ; background-repeat:repeat ; padding: 0 40px 20px 40px ; }
Posté : 21 oct. 2006, 15:03
par jojolapine
si sur #vert tu faits un position: relative; bottom: 0px; ça fait quoi ?
Posté : 21 oct. 2006, 15:28
par albat
La position:relative place le vert à la suite du contenu de blanc, donc vers le haut.
Le bottom:0px n'y change rien.
Posté : 21 oct. 2006, 15:32
par jojolapine
pardon je me suis trompé, c'était position absolute que je voulais dire...
(en gardant bottom à 0)
Posté : 21 oct. 2006, 15:45
par albat
Avec position:absolute, le vert se place en bas de la partie "visible" du blanc.
Ce que j'ai représenté en rouge.
Posté : 21 oct. 2006, 17:34
par Vikchill
Week-end oblige, j'ai pas trop le temps, donc c'est loin d'être parfait mais peut-être que ça t'aidera:
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<title>Maquette</title>
<style type="text/css">
body
{
background-color: pink;
}
#conteneur
{
position: relative;
width: 760px;
background-color: grey;
margin:20px auto 20px auto ; padding:0 ;
}
#contenu
{
background-color: yellow;
margin-left: 160px;
}
#colonne
{
width: 160px;
background-color: white;
}
#footer
{
position: absolute;
bottom: 0;
background-color: red;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="colonne">
colonne
<div id="footer">
pied
</div>
</div>
<div id="contenu">
contenu
</div>
</div>
</body>
</html>
Posté : 27 oct. 2006, 12:13
par falgan
voila, j'ai repris le code de Vikchill
et je pense etre arrivé a une solution satisfaisante (le plus gros probleme etait de donné la taille du contenu a la colonne et j'avoue ne pas avoir trouvé mieux que le javascript) et meme sans le JS, le div rouge(vert dans ton cas) est positionné comme il faut (tout en bas a gauche)
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<title>Maquette</title>
<style type="text/css">
body
{
background-color: pink;
}
#conteneur
{
position: relative;
width:900px ;
background-color: #999;
margin:20px auto;
padding:0 ;
border:2px solid #999;
}
#contenu
{
background-color: yellow;
margin-left: 205px;
width:615px !important;
width:612px;/*pour gerer le positionnement et la gestion particuliere des dimensions de IE*/
padding: 0px 40px 20px 40px ;
height:1000px; /*a supprimer, là juste pour le test*/
}
#colonne
{
float:left;
width:160px ;
background-color: white;
margin:0;
padding:20px 25px 20px 20px;
/*largeur totale: 160+25+20=205px */
}
#footer
{
width:160px ;
position: absolute;
bottom: 0;
left:0;/*pour IE*/
margin-left:20px;/*pour IE*/
background-color: #f00;
color: #fff;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="colonne">
colonne
<div id="footer">
pied
</div>
</div>
<div id="contenu">
contenu
</div>
</div>
</body>
</html>
<!--pour forcer la hauteur de la colonne blanche a la valeur de la hauteur du contenu -->
<script language="javascript" type="text/javascript" >
window.onload=init;
function getStyle(el,styleProp){
var x = document.getElementById(el);
if (window.getComputedStyle)
var y = window.getComputedStyle(x,null).getPropertyValue(styleProp);
else if (x.currentStyle)
var y = eval('x.currentStyle.' + styleProp);
return y;
}
function init(){
var content_height=getStyle("contenu","height");
var len=getStyle("contenu","height").substr(0,content_height.length-2)-20;
document.getElementById("colonne").style.height=len + "px";
}
</script>
voila en esperant que j'aurai pu t'etre utile
Posté : 27 oct. 2006, 12:49
par Ryle
Quand je pense que dans le temps on se contentait juste de mettre un tableau avec un align="bottom"... heureusement que les feuilles de style sont arrivées pour nous permettre de faire la même chose en plus compliqué, et tous les 3 à 5 ans quand le site change de look, nous délivrer des modifications html pour qu'on ait plus de temps pour se prendre la tête sur le css et la compatibilité entre les différents navigateurs
(Défenseurs du w3c, feu à volonté !
)
Posté : 27 oct. 2006, 13:39
par Vikchill
(Défenseurs du w3c, feu à volonté !
)
<mets sa robe noire>
Disons que tu peux toujours le faire, c'est pas interdit, faut juste se demander si ça reste accessible, mais pour ça il faut voir la structure
ET le contenu.
Je me suis pas repenché sur le problème depuis, je peux réessayer si tu veux, j'ai plus de temps ce week-end, je suis sûr qu'il existe une solution plus simple.
Posté : 27 oct. 2006, 13:55
par falgan
doit surement y avoir plus simple, mais j'avoue avoir codé et testé durant mes heures de travail donc ....
Mais par contre si tu trouve, ne te gene pas, je suis preneur car ca fait un certain temps que je cherche a donner une hauteur identique a un menu et au contenu sans pour autant devoir mettre le menu dans le contenu ou inversement (ce qui perdrait de son sens)
Posté : 27 oct. 2006, 14:23
par Victor BRITO
Salut à tous!
Albat, le code suivant devrait te satisfaire.
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
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;
left: 0;
bottom: 0;
}
#image-verte {
color: black;
background: green;
width: 100px;
height: 50px;
padding: 0;
margin: 0;
}
//-->
</style>
</head>
<body>
<div id="conteneur">
<div id="colonne-jaune">
<div id="colonne-blanche">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis nunc. Praesent vel nisl in ipsum tempus aliquam. Praesent vitae diam. Sed dictum. Fusce lacus ipsum, pulvinar non, tempor non, auctor a, arcu. Donec sed sem ut lorem adipiscing tristique. Nullam et dolor ut odio bibendum facilisis. Nullam fermentum porta nisi. Vestibulum a leo. Duis id elit.</p>
<img id="image-verte" src="" alt="Image" />
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis nunc. Praesent vel nisl in ipsum tempus aliquam. Praesent vitae diam. Sed dictum. Fusce lacus ipsum, pulvinar non, tempor non, auctor a, arcu. Donec sed sem ut lorem adipiscing tristique. Nullam et dolor ut odio bibendum facilisis. Nullam fermentum porta nisi. Vestibulum a leo. Duis id elit.</p>
<p>Sed lacinia. Ut condimentum purus. In porta. Vivamus augue. Integer vitae turpis sit amet erat consectetuer volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Morbi a lacus quis nisi fermentum auctor. Suspendisse arcu pede, aliquam eu, aliquam eu, vulputate feugiat, purus. Nulla eget erat sed est congue fermentum. Ut posuere ullamcorper tellus. Integer a massa sed nulla interdum facilisis. Aenean in sem at massa feugiat porttitor. Donec lobortis lectus in urna. Fusce ornare. Nunc sed dolor. Integer vestibulum aliquet libero. Morbi sem. Etiam dui augue, ultricies a, interdum sed, facilisis ut, leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Phasellus rhoncus. Ut sed neque. Donec sed tortor. Duis a arcu. Suspendisse lorem tellus, semper eu, elementum at, aliquet sed, diam. Sed facilisis elit at neque. Proin nec ipsum. Etiam volutpat velit a tortor. Nulla semper augue id est. Vivamus vel dolor. Praesent est dolor, dignissim non, hendrerit a, interdum sit amet, metus. Nunc ante neque, malesuada eget, ullamcorper eu, varius a, lorem. Mauris vitae lorem vel dolor bibendum dignissim.</p>
</div>
</div>
</body>
</html>
Essayé sous IE 6, IE 7, Firefox 2 et Opera 9.
Posté : 27 oct. 2006, 14:40
par falgan
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?