Div de la taille de son contenu + float:right

Salut à tous, me revoila avec mes fenetres volantes ( ici )

Cette fois j'ai fini le code pour le déplacement et les transitions à la fermeture ou reduction, mais vous le voyez sur la page, il y a un probleme.

En effet, sur la fenetre 1, les boutons de fermeture et reduction sont à gauche, donc ils ne genent pas,
mais sur la fenetre 2, j'ai mis un float:right; pour les boutons, ils se retrouvent donc à l'extremité droite du conteneur, c'est à dire body, donc collés au bord droit de la fenetre.

Comment je pourrais faire pour que les boutons soient a droite, mais ne dépassent pas le contenu (qui peut etre de largeur variable) ?

merci d'avance

cadbury a écrit :
Salut à tous, me revoila avec mes fenetres volantes ( ici )

Cette fois j'ai fini le code pour le déplacement et les transitions à la fermeture ou reduction, mais vous le voyez sur la page, il y a un probleme.

En effet, sur la fenetre 1, les boutons de fermeture et reduction sont à gauche, donc ils ne genent pas,
mais sur la fenetre 2, j'ai mis un float:right; pour les boutons, ils se retrouvent donc à l'extremité droite du conteneur, c'est à dire body, donc collés au bord droit de la fenetre.

Comment je pourrais faire pour que les boutons soient a droite, mais ne dépassent pas le contenu (qui peut etre de largeur variable) ?

merci d'avance

Bonjour,
Apparemment, tes fenêtres qui sont en fait des éléments div ne peuvent pas dépasser la largeur du body.
Hors sujet : étant sur un site qui prône les standards, tu devrais adopter le XHTML. .
Modifié par chmel (25 Apr 2006 - 13:30)

OK je vais regarder du coté du javascript, je voulais deja être sur qu'il n'existe pas de méthode "propre".
pour le XHTML, vu que c'est juste un test, je n'y ai pas pensé, mais effectivement autant partir du bon pied.

Pour empécher la mise à la ligne automatique, tu doit appliquer :
white-space:nowrap à l'entête de tes fenêtres ou éviter les espaces entre les éléments inline. Tu as des spans en trôp et imbriqués

chmel a écrit :
Tu as des spans en trôp et imbriqués

c'est à dire?
il est préférable de ne pas mettre de span imbriqué dans un span?
et remplacer le span qui englobe les deux autres par un div avec l'élément
white-space:nowrap

donc de passer de ca :

<div class="cadre">
	<div class="cadretitlebar">
		<span class="cadretitlebarbuttons">
			<span class="cadretitlebarbuttonsbutton"><img src="reduire.gif" alt="reduire" /></span>
			<span class="cadretitlebarbuttonsbutton"><img src="fermer.gif" alt="fermer" /></span>
		</span>
		<span class="cadretitle">Fenetre 2</span>
	</div>
	<div class="contenu"><img src="Image1.gif" width="320" height="240"></div>
</div>

a ca :

<div class="cadre">
	<div class="cadretitlebar">
		<[b]div[/b] class="cadretitlebarbuttons" [b]style="white-space:nowrap;"[/b]>
			<span class="cadretitlebarbuttonsbutton"><img src="reduire.gif" alt="reduire" /></span>
			<span class="cadretitlebarbuttonsbutton"><img src="fermer.gif" alt="fermer" /></span>
		<[b]/div[/b]>
		<span class="cadretitle">Fenetre 2</span>
	</div>
	<div class="contenu"><img src="Image1.gif" width="320" height="240"></div>
</div>

avec le style dans la feuille de style bien sur,

ou bien est il préférable de mettre le style="white-space:nowrap;" dans le div de classe cadretitlebar, auquel cas il s'applique à tous les sous éléments, et on peut tout remplacer par des div (dans ce cas la quel avantage que span existe)?

<hs>

a écrit :
Hors sujet : étant sur un site qui prône les standards, tu devrais adopter le XHTML. .

Du HTML 4.01 strict est aussi standard que du xhtml 1.0 strict...
Il fallait plutôt dire qu'il n'y a pas de DOCTYPE ou espace de nom.
</hs>

hors sujet toujours :
j'ai mis un doctype xhtml 1.0 strict et corrigé le document pour qu'il soit valide,
mais sous firefox, un espace est apparu en bas de la div "contenu", de 5 pixels : http://20cams4u.free.fr/test/2006042601/
(cf sur la page clientHeight de 245 alors que l'image a une hauteur de 240)

d'ou est ce que ca vient?
Modifié par cadbury (26 Apr 2006 - 11:48)

Bonjour,
As-tu mis les marges et padding à 0. Sinon, je ne sais pas ce que tu comptes mettre dans tes fenêtres. Si ça peut t'aider, j'ai fait un peu le même genre ici dont il me reste la correction white-space:nowrap à effectuer quand j'aurait de nouveau acces ftp

les marges sont à 0, le padding à 2, car je ne veux pas que le contenu colle le bord de l'image.
Par contre sur ta page, tu fais :

im1.style.marginBottom = "-4px"; //correction Gecko

effectivement ca corrige sur FF, mais cet espace n'apparai que quand le doctype XHTML 1.0 strict est présent(sans doctype, avec doctype)!! c'est quand meme étrange?

est ce que c'est un bug, ou y'a t'il une explication?

pour info, voila comment j'ai résolu le pb du thread :
cf version quasi finale
un bout de javascript qui fixe la largeur de la fenetre suivant celle du contenu :

contenu = getFirstChildByClass(ossw,"contenu");
ossw.style.width = contenu.offsetWidth + "px";

avec ossw l'objet représentant la div de plus haut niveau d'une "fenetre"
et "contenu" le nom de la div qui contient le contenu, comme son nom l'indique ...

et dans le style de boutons :

top:4px;
right:4px;

Et pour le hors sujet, je suis passé de doctype xhtml 1.0 strict à transitional et plus de probleme de pixel en trop sur le bas d'une div qui contiens une image, alors si quelqu'un peut m'expliquer, je serais curieux de savoir pourquoi!

en tout cas merci à tous
Modifié par cadbury (28 Apr 2006 - 15:50)

Salut,

cadbury a écrit :
pour info, voila comment j'ai résolu le pb du thread :
cf version quasi finale
un bout de javascript qui fixe la largeur de la fenetre suivant celle du contenu :

contenu = getFirstChildByClass(ossw,"contenu");
ossw.style.width = contenu.offsetWidth + "px";

avec ossw l'objet représentant la div de plus haut niveau d'une "fenetre"
et "contenu" le nom de la div qui contient le contenu, comme son nom l'indique ...

Cela dépendra du contenu
Je ne comprends pas ce que tu veux faire de ces fenêtres, parce que si c'est pour faire une nouvelle version des popups

a écrit :


et dans le style de boutons :

top:4px;
right:4px;

Et pour le hors sujet, je suis passé de doctype xhtml 1.0 strict à transitional et plus de probleme de pixel en trop sur le bas d'une div qui contiens une image, alors si quelqu'un peut m'expliquer, je serais curieux de savoir pourquoi!

Je n'ai pas non plus trouvé la réponse

a écrit :

en tout cas merci à tous