[Résolu] Contenu qui pousse l'arriere plan etirable

Bonjour AlsacreationS !

Je cherche a creer un gabarit avec un arriere plan etirable, j'ai trouver les bonnes explications sur le blog..par ici..

J'ai opté pour la deuxieme solution, celle ou l'ont peut deposer un contenu au dessu de l'image etirable..oui mais un probleme survient, mon contenu n'agrandit pas l'image comme l'exemple de Raphael.

L'exemple n'est pas en ligne mais je vous montre comment j'ai fait :

[b]CSS[/b]
#back {
 margin: 0;padding: 0;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}
#back img.fluide {
 width: 100%;
 height: 100%;
}
p#contentholder {
 position: absolute;
 left: 0;
 top: 0;
 margin: 50px 30px;padding: 0;
}

[b]HTML[/b]
<div id="back">
 <img alt="" src="images/backetir.jpg" class="fluide"/>
        <p id="contentholder">Lorem ipsum dolor sit amet consectetuer tempor libero metus eget velit. Nulla id porttitor vitae lobortis nibh sollicitudin vitae Vivamus a elit. Purus vel lacinia Nulla Curabitur Curabitur in id Lorem tincidunt feugiat. Et et mauris penatibus semper a consequat id molestie odio pretium. Vitae tempus augue.</p>
</div>

Modifié par ghijselinck (07 Feb 2007 - 10:31)

Bonjour.

Ton paragraphe de contenu est positionné en absolu. Le positionnement absolu, c'est ça :
http://openweb.eu.org/articles/initiation_absolue/

Concrètement, tout élément positionné en absolu ou en fixe ne sera plus pris en compte par les autres éléments de la page. Il existe toujours, mais il n'interagit plus avec les autres éléments.

Note : effectivement, le billet de blog propose un code avec positionnement absolu du texte. Et prétend que l'agrandissement du texte agrandira le bloc conteneur. Heu... on dirait que Raphaël s'est emmêlé les pinceaux, non ?

Florent V. a écrit :

Heu... on dirait que Raphaël s'est emmêlé les pinceaux, non ?

Possible mais son exemple marche parfaitement

ghijselinck a écrit :
Possible mais son exemple marche parfaitement

Ah oui, effectivement. Mais ça ne marche que si tout est dimensionné en EM (unité qui dépend de la taille du texte). Le bloc qui contient l'image (et auquel l'image s'adapte) a une largeur et une hauteur en EM, le texte est bien entendu dimensionné en EM, et enfin il est positionné en EM.

Si ton conteneur a des dimensions en pixels, en pourcentages, ou encore dépendant de son contenu... ben ça ne marche plus.

bonsoir,

si tu place le conteneur en width et height , il ne s'agrandira pas , et l'image non plus , (sauf probablement dans IE ).

Pour firefox et respectueux des standards , il te faut ou , ne pas donner de dimension pour qu'il s'etire ou donner des min-height , min-width.

L'exemple du conteneur agrandissable , s'appuie sur des dimension en em qui suivent donc proportionnellement la taille de la police d'affichage.

Pour le conteneur , il te faut creuser vers le min-height. (voir faq) ,
Une fois que ton conteneur sera extensible , tu devrais pouvoir faire suivre ton image.

Il te faudra alors ajouter un peu de javascript pour IE .
Voir une soluce ici :

http://forum.alsacreations.com/topic.php?fid=4&tid=18201&s=fond+etirable

GC

<grillée>
Modifié par gcyrillus (04 Feb 2007 - 00:36)

gcyrillus a écrit :
Pour firefox et respectueux des standards , il te faut ou , ne pas donner de dimension pour qu'il s'etire ou donner des min-height , min-width.

Hello gcyrillus,

Tu as raison pour ce qui est de la règle générale, mais dans le cas présent le contenu est positionné en absolu. On peut faire ce qu'on veut avec les dimensions du conteneur, dans tous les cas le contenu positionné en absolu ne les repoussera pas.

oui tout a fait.

Le principe de l'image detourné en background etirable n'aurait en fait, besoin que de positionner l'image en absolu .(+ une pincée de z-index eventuellement pour mettre d'accord tout les navigateurs.) .

ça reste quand même "bidouille" pour le moment tout ça .

GC

gcyrillus a écrit :

ça reste quand même "bidouille" pour le moment tout ça .

Tout a fait d'accord