28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Positionner un div de taille variable... par le bas!

Salut à tous.

Voilà un problème CSS sur lequel je butte complètement. Peut-être saurez-vous relever ce challenge.

Ca sera beaucoup plus simple à expliquer en image donc voilà:

upload/18001-infobulle.gif

Normalement, un div se positionne en fonction du coin haut-gauche, pas par le bas. Mais là c'est une contrainte: ici, c'est le smiley qui est positionné à des coordonnées précises, puis la bulle qui doit apparaitre (évènement du type onmouseover).

Alors bien sûr il y a l'alternative Javascript qui marcherait surement, mais je crains que ce ne soit une usine à gaz: calculer la taille de l'objet après son chargement complet (images, etc), et ensuite le positionner à top:top_smiley-taille.
Encore faut il savoir le faire.

J'ai vu que les footers aimaient bien être positionnés avec position:fixed. Je ne sais pas si ça sert à grand chose dans mon cas (j'avoue ne pas être super à jour niveau CSS) Smiley rolleyes

Des idées?
Merci
Modifié par Nox (23 Sep 2008 - 22:27)
Salut,

position: fixed fait en sorte que l'élément positionné ne se déplace plus avec la page lorsque tu scrolles, il reste toujours au même endroit sur l'écran. Donc a priori rien à voir avec ton problème Smiley cligne

Tu dis que ton smiley se trouve à des coordonnées précises, mais comment est-il positionné?
Merci de l'info pour le position:fixed.

J'ai pris l'exemple d'un smiley, mais il faut plutot considérer un positionnement GPS, dans ce style (voir la carte), mais sans Flash.

Le "smiley" est située à des coordonnées précises (XX;YY) sur une carte: position:absolute/relative; left:XXpx; top:YYpx.

C'est à la bulle -qui contient un texte de taille variable- de bien se positionner.
Modifié par Nox (23 Sep 2008 - 17:57)
Nox a écrit :
Merci de l'info pour le position:fixed.

J'ai pris l'exemple d'un smiley, mais il faut plutot considérer un positionnement GPS, dans ce style (voir la carte), mais sans Flash.

Le "smiley" est située à des coordonnées précises (XX;YY) sur une carte: position:absolute/relative; left:XXpx; top:YYpx.

C'est à la bulle -qui contient un texte de taille variable- de bien se positionner.

Donc tu connais la position du "smiley". Est-ce qu'on a aussi la taille de la carte?

Il doit y avoir moyen d'utiliser les coordonnées du "smiley" pour positionner simplement le texte...
La carte est une image, on doit avoir sa taille normalement. En totu cas elle est fixe.

Mais je ne pense pas que ce soit très utile car quelque que soit la taille de la carte, c'est l'emplacement du smiley (voir la taille de la bulle si on ne peut pas faire autrement) qui compte pour positionner la bulle.
Bon, j'ai fait ma petite usine à gaz javascript pour m'en sortir.

Je suis toujours preneur d'une méthode purement CSS.

Ca évitera de devoir attendre le onload.

Pour ceux que ça intéresse:
	 <style>
	 BODY {
	 background: url('map.png'); 
	 }

	 #bar1 {
	 position:absolute;
	 left: 	 470px;
	 top: 412px;
	 width:24px;
	 height:27px;
	 background: url('smiley.gif');
	 }

	 #bulle1 {
	 position:absolute;
     color:white;
	 }

	 </style>


<script>

// fonction ob <=> getElementById

function placerBulles() {
	myobj=ob('bulle1');
	myref=ob('bar1');
	if(myobj) {
		myobj.style.top=-getHeight(myobj)+getTop(myref)-10;
		myobj.style.left=intval(-getWidth(myobj)/2+getLeft(myref))+intval(getWidth(myref)/2); 
	}
}

function intval(n) {
	n=parseInt(n);
	if (isNaN(n)) n=0;
	return n;}

function getHeight(obj) {
    return intval(obj.offsetHeight);}
function getWidth(obj) {
    return intval(obj.offsetWidth);}
function getTop(obj) {
    return intval(obj.offsetTop);}
function getLeft(obj) {
    return intval(obj.offsetLeft);}

</script>




 <BODY onload="placerBulles()">
  <div id=bar1></div>
  <div id=bulle1 style='background:blue'>
dazdz<br/>
dzaazd<br/>
aaassa<br/>
aaassa</div>
Bonsoir,

Voici une proposition de code basé sur celui que tu as fourni :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {background: url('map.png');}

#bar1 {
position:relative;
left:470px;
top:412px;
width:24px;
height:27px;
background: url('smiley.gif');
}

#bulle1 {
width:200px;
position:absolute;
color:white;
bottom:32px; /* hauteur de bar1 + 5pixels pour aérer */
left:-88px; /* (largeur de #bulle1 - largeur de #bar1) / 2 */
}
  -->
</style>
</head>
<body>
  <div id=bar1>
  <div id=bulle1 style='background:blue'>
dazdz<br/>
dzaazd<br/>
aaassa<br/>
aaassa</div>
</div>
</body>
</html>

Après il faudra l'adapter.
Modifié par Shunkin (23 Sep 2008 - 20:04)
Haaaaa, super l'idée d'utiliser bottom et de se positionner en relatif. Je n'y avais pas du tout pensé pourtant c'est tout simple Smiley rolleyes

Merci beaucoup Shunkin!
Sujet clos
Aller à