28173 sujets

CSS et mise en forme, CSS3

[Résolu] Contenant extensible fluide et images aux extrémités.

Bonjour/Bonsoir.

Mais qu'est-ce donc ce charabia ?

a écrit :
Contenant extensible fluide et images aux extrémités.

Je m'explique :

- Aux deux extrémités ( gauche/droite ) de ma page je vais caler deux images identiques ayant pour propriétés une largeur de 30px et une hauteur de 250px ( ces deux valeurs pourront varier par la suite, mais le plan restera indentique ).

- Et là ou ça pose problème, c'est comment permettre aux deux extrémités de s'étendre à la verticale ainsi que permettre au contenant de s'agrandir au fûr et à mesure ( par ajout de contenu) en x et y simplement avec une image de 1px/1px ?

Je rapelle que cela doit rester fluide ( adaptable sous toutes les résolutions ) et extensible ( par ajout de contenu ).

Je me suis creusé le ziboulo pendant 2h et j'ai pas trouvé la solution.
Je compte sur une aide de la communauté de Alsacreation ( très bon site au passage ) pour résoudre mon problème.

En aparté

Une fois que vous m'aurez apporté la solution je pourrait vous proposer un lien et vous montrer à quoi cela ressemble.
Pour le moment j'attend activation de mon compte free.

Merci d'avance.
FloFlo.
Modifié par Plotch (08 Mar 2007 - 20:51)
Plotch a écrit :
Une fois que vous m'aurez apporté la solution je pourrait vous proposer un lien et vous montrer à quoi cela ressemble.

Non non non, ça marche dans l'autre sens : une fois que tu nous auras montré quelque chose pour qu'on comprenne un peu ce que tu veux faire (parce que là c'est un peu carrément flou), on pourra t'apporter une solution. Ou du moins te mettre sur la voie.

Ne serait-ce qu'une image de ce que tu projettes (ou bien deux images, pour montrer deux états différents selon variation de résolution et/ou de contenu), ça nous aiderait à t'aider.
Si je disais ça c'était justement parcequ'il m'est impossible de le mettre sur un serveur en attendant l'activation du compte.
Et c'est toujours le cas.

Je vais tenter d'expliquer ça en image :

<modération>Voir message de la modératrice ci-dessous</>

http://dl.free.fr/iKOgHlX1/explication.png

De plus, j'ai quelques modifications à faire par rapport à ce que j'avait dit plus haut, et pour faire simple je vais résumer cela en 2/3 mots.

1- Extremités gauche/droite de l'emplacement du contenu qui vont en quelques sortes s'étirer au fur et à mesure qu'il se remplira ( d'ou le mot : extensible ).

2- Oubliez l'image de fond 1px/1px en background, autant définir une couleur de background...

3- J'insiste bien sur le fait que toute la structure doit s'adapter à la résolution de d'écran tout comme le site Alsacreation.
Modifié par Laurent Denis (06 Mar 2007 - 20:30)
Bonjour,

Sans vouloir jouer les troubles fêtes, merci de bien vouloir utiliser l'option "Générer un aperçu" au moment de l'upload de l'image, car celle-ci déforme le forum sur un petit écran.
Smiley cligne
Selon l'inspiration du moment...
[b]HTML :[/b]
<body>
<div id="global">
	... bla bla bla tout mon site ...
</div><!-- fin de div#global -->
</body>

[b]CSS :[/b]
body {
	margin: 0; padding: 0;
	color: white;
	background: black url(image-gauche.jpg) repeat-y left top;
}
div#global {
	background: url(image-droite.jpg) repeat-y right top;
	padding: 0 30px;
}

Quelque chose comme ça.
Modifié par Florent V. (07 Mar 2007 - 01:56)
Salut !

Merci pour ta réponse, cela fonctionne en effet mais pas totalement.

Sur le côté droit l'image ne s'étend jusqu'au maximum en bas alors que sur le côté gauche il n'y a aucun problème, comment permettre à l'image du côté droit de s'étendre à 100% sur la hauteur de la fenêtre ?

Je précise que lorsequ'il y a un contenu plus conséquent ( quand la barre de défilement s'affiche à droite il n'y a plus d'écart ).

Exemple en image :

-Image avec petit contenu
-Image avec grand contenu
Modifié par Plotch (07 Mar 2007 - 21:12)
Sujet clos
Aller à