28173 sujets

CSS et mise en forme, CSS3

Div position: fixed, larg non prise en compte ds la larg de la fenêtre

Bonjour ce message fait suite au suivant :
Div collé en bas à droite de la fenêtre : Pb avec scrollbar

Grâce à l'aide de Florent, je suis parvenu à placer un div en bas à droite de ma fenêtre de manière permanente.

Le problème est que maintenant la largeur de ce div n'est plus prise en compte pour le calcul de la largeur de ma fenêtre. Du coup, si ma fenêtre n'est pas assez large, je ne vois pas apparaître de scrollbar horizontale, et le contenu du div en question disparaît.

Voici mon code :
<!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">	
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>exemple 21</title>
		<style type="text/css">
			body, html{
				margin: 0px;
				padding: 0px;
				font-family: Verdana, Helvetica, Arial, sans-serif;
				color: #58595b;
				font-size: 12px;
				background-color: #ffffff;
			}
			#div1{
				border: solid 1px black;
				margin: 0 auto;
				padding: 0;
				width: 300px;
			}
			#div2{
				border: solid 1px green;
				margin: 0;
				padding: 0;
				position: fixed;
				right: 0;
				left: 50%;
				bottom: 0;
			}
			#div2 div{
				border: solid 1px red;
				margin: 0 0 0 150px;
				padding: 0;
				white-space:nowrap;
				text-align: right;
			}
		</style>
	</head>
	<body>	
		<div id="div1">
			Diam nulla qui humanitatis imperdiet per.
			Commodo adipiscing commodo mazim vel facilisis.
			Habent eum notare zzril tempor facilisis.<br/>
			Claram exerci eorum wisi lobortis option.
			Ullamcorper tation putamus nonummy facer augue.
			Aliquam et qui duis nulla doming.<br/>
			Tation dolor dolor lectores non augue.
			Soluta per non etiam consectetuer qui. Mirum per dynamicus
			feugait hendrerit soluta.<br/>
			Ut nunc ipsum putamus demonstraverunt
			imperdiet. Modo ut claritas ut hendrerit futurum. Seacula est
			velit nulla eros claritatem.<br/>
			Diam nulla qui humanitatis imperdiet per. Commodo adipiscing
			commodo mazim vel facilisis. Habent eum notare zzril tempor facilisis.<br/>
			Claram exerci eorum wisi lobortis option. Ullamcorper tation
			putamus nonummy facer augue. Aliquam et qui duis nulla doming.<br/>
			Tation dolor dolor lectores non augue. Soluta per non
			etiam consectetuer qui. Mirum per dynamicus feugait hendrerit soluta.
		</div>
		<div id="div2"><div>Tation dolor lectores.</div></div>
	</body>
</html>


Et la page peut être visualisée ici.

J'ai rajouté un nouveau div et quelques ligne de css car je veux m'assurer que le div placé en bas ne viendra pas chevaucher le div central.

Fenêtre large et haute :
upload/11284-Image1.jpg

Fenêtre large et non-haute :
upload/11284-Image2.png

Fenêtre non-large et non-haute :
upload/11284-Image3.jpg

Je galère pas mal aujourd'hui ! Si quelqu'un peut me renseigné je suis preneur !

Antoine
Heu... et c'est quoi le design à réaliser au final?
Parce que là je vois bien quelques solutions (qui consistent toutes à réserver un espace à droite et si besoin à gauche, de la largeur nécessaire pour l'affichage du bloc positionné en fixe, à l'aide de margin ou padding ou largeur minimale, etc.), mais ça dépendra de ce qu'on veut faire exactement.
Bah en fait, le design final est pas vraiment éloigné de ce que tu vois sur le lien ci-dessus !

Il s'agit en fait d'avoir un div encadré à largeur fixe, mais dont le contenu et donc la hauteur peut varier (site dynamique). Ce div doit être centré horizontalement.

Autre élément de la page, le fameux div en bas à droite, qui doit toujours rester en position mais ne jamais chevaucher le contenu du div central.

La petite subtilité (sinon c'est pas marrant), c'est que le contenu de ce div est aussi dynamique et peut donc varier de longueur.

Moi, j'y vois que couic Smiley smile
RockMakesMeSweat a écrit :
La petite subtilité (sinon c'est pas marrant), c'est que le contenu de ce div est aussi dynamique et peut donc varier de longueur.

Ça à la rigueur ça n'est pas bien méchant. Il suffit de donner une largeur fixe à ce bloc, et on n'en parle plus.

Non, le gros problème c'est que les éléments en position fixe sont placés pas par rapport au canevas (l'étendue complète de la page) mais par rapport à la zone de visualisation du navigateur. Ce qui veut dire que même si je réserve un espace sur le canevas grâce à un conteneur global invisible en width: 980px par exemple, l'élément en position fixe n'en a cure.

J'ai réalisé ce petit test:
<!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=UTF-8" />
	<title>Test</title>
	<style type="text/css" media="screen">
	div#global {
		position: relative;
		width: 750px;
		margin: 0 auto;
	}
	div#content {
		min-height: 2000px;
		background: burlywood;
	}
	div#machin {
		position: fixed;
		bottom: 0;
		width: 100px;
		margin: 0 0 0 760px;
		background: royalblue;
	}
	</style>
	<!--[if lte IE 6]><style type="text/css" media="screen">
	div#machin {
		position: static;
		float: right;
		margin: 0;
	}
	</style><![endif]-->
</head>

<body>
<div id="global">

<div id="content">
Ici le contenu principal de la page.
</div><!-- #content -->

<div id="machin">
Une sorte de contenu inconnu et variable à placer en bas à droite.
</div>

</div><!-- #global -->
</body>
</html>

Le comportement des navigateurs est assez cohérent dans l'ensemble, sauf IE6 bien entendu. Ça permet de constater les limites du positionnement fixe.
Florent V. a écrit :

Ça à la rigueur ça n'est pas bien méchant. Il suffit de donner une largeur fixe à ce bloc, et on n'en parle plus.


Oui mais là est la question, quelle largeur donnée puisque je ne connais pas la longueur de ce contenu !
De plus je n'ai pas préciser mais le contenu de ce div doit également etre sur une ligne, d'où le "white-space: nowrap;".
Je voudrais également que dans la largeur limite, (c'est à dire là où je m'attend à voir apparaître la scrollbar horizontale), je voudrais que la marge entre le côté droit du div principal et le côté gauche de mon second div soit égale à celle entre le côté droit de mon second div et le bord droit de ma fenêtre.

La solution que tu as proposée présente un désavantage que je ne peux accepter dans mon design, il implique l'apparition d'une scollbar verticale même si le texte dans mon div principal est court.
En plus il ne résout pas la non apparition de la scrollbar horizontale quand le contenu de mon second div sors sur la droite de ma fenêtre.

En tous cas je te remercie beaucoup pour avoir pris le temps de mon répondre !

Antoine
RockMakesMeSweat a écrit :
De plus je n'ai pas préciser mais le contenu de ce div doit également etre sur une ligne, d'où le "white-space: nowrap;".

Tu ne l'as effectivement pas précisé. Et au vu des captures d'écran d'essai schématique que tu présentais, je ne pouvais pas le deviner. C'est bien pour cela que j'avais demandé «quel est le design final à réaliser?». À chaque fois qu'on ne communique que 50% (ou même 90%) des informations sur un problème un peu pointu, on perd du temps à proposer des solutions qui ne conviennent pas parce que «ah mais en fait il y avait une contrainte dont je n'avais pas parlé».

Là, j'ai un peu l'impression de m'être creusé le ciboulot pour rien... (enfin, ça m'aura fait réviser le positionnement fixe, c'est déjà ça de pris).

Toujours pour information, quand on a un aperçu du design final à réaliser, on peut prendre du recul et imaginer des solutions. Ici, c'est toi qui imagine la solution d'intégration, et les autres qui doivent trouver le code qui va bien. Dommage...

RockMakesMeSweat a écrit :
La solution que tu as proposée présente un désavantage que je ne peux accepter dans mon design, il implique l'apparition d'une scollbar verticale même si le texte dans mon div principal est court.

Hein? Pas du tout. Ça n'implique pas du tout ce genre de chose. Le min-height: 2000px utilisé est un ajout cosmétique pour simuler un contenu de grande hauteur, justement.

RockMakesMeSweat a écrit :
En plus il ne résout pas la non apparition de la scrollbar horizontale quand le contenu de mon second div sors sur la droite de ma fenêtre.

J'avais fait un essai avec un div#global en 980px de large et centré horizontalement, dans lequel il y avait un div#content avec des marges de 110px de chaque côté. Ça marche très bien pour faire apparaitre les barres de défilement, mais l'élément positionné en absolu n'est pas positionné en fonction du canevas mais en fonction du viewport. Donc ça n'aide pas beaucoup...

Voilà, désolé d'être un peu irrité dans ce message, mais c'est très frustrant de se pencher sur un problème sans savoir de quoi il retourne exactement. Par exemple, je n'ai pas la moindre idée de ce que peut être ce contenu qui doit tenir sur une ligne de texte, dont la longueur est indéterminée et qui doit être positionné en bas de page à droite, en positionnement fixe, sans recouvrir les autres contenus et sans disparaitre hors-champ. Smiley sweatdrop
Modifié par Florent V. (01 Feb 2008 - 19:31)
Salut Florent !

Tout d'abord, je te présente mes excuses pour ne pas avoir répondu plus tôt. Je n'était pas devant mon ordi ce week-end.

a écrit :
Tu ne l'as effectivement pas précisé. Et au vu des captures d'écran d'essai schématique que tu présentais, je ne pouvais pas le deviner. C'est bien pour cela que j'avais demandé «quel est le design final à réaliser?».


En effet, je ne l'avais pas précisé et c'est une erreur.

a écrit :
À chaque fois qu'on ne communique que 50% (ou même 90%) des informations sur un problème un peu pointu


En fait à chaque fois, j'essaye de simplifier un maximum le problème pour simplifier sa compréhension. Je m'aperçois qu'en fait ce n'est pas une réussite et je changerai de méthode à l'avenir.

a écrit :
Hein? Pas du tout. Ça n'implique pas du tout ce genre de chose. Le min-height: 2000px utilisé est un ajout cosmétique pour simuler un contenu de grande hauteur, justement.


Bah là, je suis passé à côté, je pensais que ce min-height faisait partie intégrante de ton design...

a écrit :
J'avais fait un essai avec un div#global en 980px de large et centré horizontalement, dans lequel il y avait un div#content avec des marges de 110px de chaque côté. Ça marche très bien pour faire apparaitre les barres de défilement, mais l'élément positionné en absolu n'est pas positionné en fonction du canevas mais en fonction du viewport. Donc ça n'aide pas beaucoup...


Du coup, cela voudrait-il dire que mon problème n'a pas de solution ? Ce serait fâcheux en tout cas Smiley decu

a écrit :
Voilà, désolé d'être un peu irrité dans ce message


Pas de souci, tes critiques sont fondées et je les ai bien enregistrées.


a écrit :
Par exemple, je n'ai pas la moindre idée de ce que peut être ce contenu qui doit tenir sur une ligne de texte, dont la longueur est indéterminée et qui doit être positionné en bas de page à droite, en positionnement fixe, sans recouvrir les autres contenus et sans disparaître hors-champ.


Je vais donc tâcher de reprendre la description de mon problème en étant plus précis : J'ai mis un nouveau fichier en ligne ici qui contient les informations nécessaires.
J'espère que cette fois j'aurai été plus clair.

Merci,

Antoine
Modifié par RockMakesMeSweat (04 Feb 2008 - 10:09)
Hello,

J'ai consulté la page en ligne avec les explications. Je dis peut-être une bêtise, mais ça ne me semble pas réalisable en HTML et CSS2.1. Il y a trop de conditions du type «si on est dans telle situation, je veux tel comportement» et «si on est dans telle autres situation, il faut infléchir le comportement de telle manière».

Par contre, c'est peut-être le genre de chose qui peut se faire en combinant CSS et Javascript. Une donnée dont tu vas avoir besoin, par exemple, c'est la largeur de ta phrase d'en bas à droite. Ce genre d'info peut se récupérer en Javascript. Émuler un positionnement fixe, si le positionnement fixe lui-même pose problème, peut également se faire.

Mais plus globalement je pense qu'il n'y a pas grand chose à gagner à chercher à tout prix un moyen de bricoler ce choix de design. Je pense qu'on aura intérêt à soit accepter un résultat «correct mais pas toujours optimal» (résultat dégradé dans telle ou telle condition), proche de certains essais que j'ai proposé ci-dessus. Ou bien on modifiera le design: il n'est pas sûr que le comportement que tu cherches à obtenir soit si indispensable (ou même tout simplement positif...) en termes de design et d'ergonomie.
Sujet clos
Aller à