[Résolu] Design fluide et positionnement de background

Salut à tous,

J'ai un bloc principal qui prend 90% de la taille de mon écran, la taille de celui ci est limité a un minimum de 800px et un maximum de 1100px.

Je souhaite placer un fond a ce bloc, mais à l'extérieur de celui ci comme ceci:


Je n'aurais jamais pensé que j'allais passer une demi journée sur ce problème sans trouver la solution!

En fait oui j'ai trouvé une solution en utilisant en bloc spécial pour ma fleur disposé en position:absolute et en jouant avec javascript pour éviter la scrollbar horizontal. Exemple : http://www.mozaik.com.mx/flor/ .Comme vous le voyez c'est très compliqué et j'aimerai bien trouvé plus simple sans utiliser javascript dont ce n'est pas vraiment le rôle.

Quelqu'un a t'il déjà était confronté à un problème similaire avec un design fluide?
Modifié par matmat (23 May 2009 - 22:34)

Salut Matmat,

a écrit :
Quelqu'un a t'il déjà était confronté à un problème similaire avec un design fluide?

La chose me semble également impossible pour les deux raisons suivantes:
1) ton design n'est qu'en partie fluide (cf min- et max-width), comportement non reproductible avec des backgrounds CSS.
2) tu ne veux pas de scrollbar quand la fleur sort du viewport, on ne peut donc pas utiliser d'élément HTML pour ta fleur (sauf en {position:fixed}, mais évidemment, c'est pas ce qu'on veut).

Bref, à moins d'abandonner une de ces deux contraintes, tu ne peux pas régler ton problème seulement en HTML/CSS (ou je serai --agréablement-- surpris par une solution ).

Mais après tout, si les CSS ne te permettent pas d'atteindre ton objectif et que ton JS n'est pas intrusif (je ne l'ai pas regardé), personnnellement je ne vois aucun problème majeur.
Modifié par marcv (23 May 2009 - 11:04)

marcv a écrit :
1) ton design n'est qu'en partie fluide (cf min- et max-width), comportement non reproductible avec des backgrounds CSS.

Les min et max width rajoute un problème supplémentaire, mais même sans cela on ne peut pas "attacher" un élément graphique à l'extérieur d'un bloc centré avec une dimension en pourcentage, en effet le positionnement en pourcentage avec background position est relative au bord gauche et non au centre donc on obtient toujours un décalage.

marcv a écrit :
Mais après tout, si les CSS ne te permettent pas d'atteindre ton objectif et que ton JS n'est pas intrusif (je ne l'ai pas regardé), personnellement je ne vois aucun problème majeur.

Effectivement à part un brève apparition de la scrollbar quand on redimensionne la fenêtre cela ne pose aucun problème. Je vais donc laisser cette solution, la solution à un problème de présentation la plus tordue que j'ai utilisé depuis que je fais du design web!

Hello,

sinon une "solution" aurait été d'utiliser un autre conteneur plus large avec les padding qui vont bien et ton image en background right top. Cela correspondrait au rendu de ta page sans JavaScript pour les "petits" écrans.

a écrit :
utiliser un autre conteneur plus large avec les padding qui vont bien et ton image en background

On aurait une scrollbar lorsque la fleur sortirait de l'écran, pas glop.

a écrit :
Les min et max width rajoute un problème supplémentaire, mais même sans cela on ne peut pas "attacher" un élément graphique à l'extérieur d'un bloc centré avec une dimension en pourcentage, en effet le positionnement en pourcentage avec background position est relative au bord gauche et non au centre donc on obtient toujours un décalage.

Oui, tu as raison, après m'être creusé la tête un peu plus, on ne peut manifestement pas. Par contre je ne comprends pas vraiment ton histoire de positionnement par rapport au centre, je n'arrive pas à voir ce que ça changerait. Mais bon, j'y ai certainement moins réfléchi que toi . Pour moi, le problème principal (que j'avais oublié en te répondant trop rapidement dans mon dernier post), c'est l'algo de positionnement des images de background en %, qui est... pas comme les autres (le point à x% de l'image positionné sur le point à x% du conteneur). Si le positionnement des backgrounds fonctionnait comme on pourrait s'y attendre (côté gauche de l'image à x% du conteneur), la déclaration suivante ferait l'affaire :

#blocBlanc {
    width:60%;
}
body {
    background-position: 80%;
    /* = 60% + 20% de "vide" à gauche */
}

Mais bon, pas possible...
En CSS3 par contre, tu pourrais probablement t'en sortir vu que les unités peuvent être fournies sous la forme de calculs. Tu pourrais donc compenser l'algo de positionnement comme ça :

#blocBlanc {
    width:60%;
}
body {
    background-position: calc(60% + 192*0.6px);
    /* = 60% + les 60% de ton image */
}

Mais bon, je n'aborde pas la question du support
Modifié par marcv (24 May 2009 - 08:43)

marcv a écrit :
On aurait une scrollbar lorsque la fleur sortirait de l'écran, pas glop.

Oui : d'où les guillemets autour de "solution".

Yo,

Pas de solution simple effectivement. Mais en voici une petite:

body {
background: #800;
}
#global {
position: relative;
width: 60%;
min-width: 750px;
max-width: 1100px;
}
#global-deco {
position: relative;
z-index: 1;
left: 100%;
height: 500px;
width: 250px;
margin-left: -30px;
background: url(lafleur.jpg) no-repeat;
}
#global-content {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
background: white;
}

Côté HTML, #global-deco est un élément vide (genre un SPAN ou un DIV vide), #global-content est un DIV qui contiendra tous les contenus du site, et tous deux sont enfants de #global.

@florent: t'as oublié les guillemets (scrollbar)
Modifié par marcv (24 May 2009 - 13:11)

Ah mince, j'aurais pensé que l'emplacement final d'un bloc positionné en relatif n'était pas pris en compte pour l'apparition des barres de défilement. J'aurais dû vérifier.
Bon du coup cette «solution» (avec de vrais guillemets, voulez-vous?) ne sert à rien, vu qu'elle est moins intéressante qu'un bête positionnement absolu du bloc-image et demande l'utilisation d'un conteneur supplémentaire.

Alors pour une solution (sans guillemets? ça reste à voir...) qui fonctionne dans Firefox, pas dans Opera 9.6 dans mes tests (malgré un support annoncé de overflow-x et overflow-y?), devrait fonctionner dans IE 7-8 (nonobstant bugs de HasLayout et compagnie dans IE 7), et devrait fonctionner dans Safari 3+ (pas testé):

<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Essai</title>
	<style>
	html {
		height: 100%;
	}
	body {
		height: 100%;
		margin: 0;
		padding: 0;
		background: black;
	}
	#wrapper {
		width: 100%;
		min-width: 760px;
		min-height: 100%;
		overflow-x: hidden;
		padding: 60px 0 30px 0;
		background: rgba(255,0,0,.5);
	}
	#global {
		position: relative;
		width: 70%;
		min-width: 710px;
		max-width: 1060px;
		min-height: 500px;
		margin: 0 auto;
		padding: 20px;
		background: white;
	}
	#global-deco {
		position: absolute;
		top: -40px;
		right: -120px;
		width: 160px;
		height: 200px;
		border: 1px solid blue;
		background: rgba(0,0,255,.2);
	}
	</style>
</head>
<body>
<div id="wrapper">
	<div id="global">
		<span id="global-deco"></span>
		<p>Le contenu.</p>
	</div><!--#global-->
</div><!--#wrapper-->
</body>
</html>

Excellent ! Moi qui voyais ça impossible... je suis impressionné. Chapeau très bas
Modifié par marcv (24 May 2009 - 18:28)

Effectivement c'est super!

Le test de Florent V. : http://www.mozaik.com.mx/flor/test1.html

Ça marche sur Firefox, Chrome et Safari, étrangement sur ie6/7 (8 je ne l'ai pas encore installé ) il ne prend pas en compte l'overflow (overflow ou overflow-x) même avec le HasLayout. Logiquement il devrait pourtant, c'est bizarre . Ba c'est pas grave, je lui mettrais le script de positionnement.

Donc l'idée de Florent appliqué à la fleur (avec le script pour ie) :
http://www.mozaik.com.mx/flor/test3.html
Modifié par matmat (25 May 2009 - 16:22)