Faire passer une image au dessus du bodyline

[Livia]

Bonsoiiir !
(Oui, encore moi xD)
Alors, cette fois-ci, j'aurais besoin d'aide pour... Une PA.
Voilà, pour ma PA, j'ai prévu une image de fond qui doit déborder du bodyline. Sauf que... Le bodyline n'est absolument pas d'accord et se déforme donc pour se mettre à la taille de l'image.
Forcément...
Donc je chercherais comment faire cette manipulation :3.
Le forum concerné est http://alexie-et-lisa.lebonforum.com ;
je vous souhaite une bonne soirée °° et merci d'avance :3

[Dr. Sam]

Bonjour Livia,

Serait-il possible que tu puisse mettre ta PA sur ton forum s'il te plait ?

Averti moi quand cela sera fait


Bien cordialement,

[Livia]

Bonsoir !
La PA est désormais visible :3

[Livia]

Up ? >w<

[Livia]

Encore un petit up ;w;

[Matriochka]

Bonjour,

Sur la page d’accueil actuelle, quelle est l’image que tu désires modifier exactement ? Est-ce qu’il s’agit de l’image avec les feuilles ?

PS : Jolie page d’accueil, au passage

[Livia]

Bonjour ! Oui, c'est exactement celle là en fait : l'image avec les feuilles doit, dans l'idéal, passer par dessus le bodyline... J'ai un schéma qui sera peut être un peu plus explicite, si tu veux :3

(Merci >w<)

[Matriochka]

Pas besoin de schéma, je vois bien ce que tu veux réaliser

Bon, alors j’ai fait quelques tests et j’arrive à un résultat à peu près potable. Ça fait juste faire énormément de bidouillage.

Donc, dans ton CSS, ajoute ceci :

Code:

.bodyline {max-width:900px;}

Pour garder le corps du forum à 900 pixels quoi qu’il arrive (max-width = largeur maximale).

Puis dans ta page d’accueil, à l’endroit où tu as mis ton image :

Code:

<img src="http://i.imgur.com/5E6SeS8.png" style="z-index:2;margin-left:-70px;" />

On ajoute une marge négative de 70 pixels.

Toujours dans ta page d’accueil, là où tu as mis en place la première div :

Code:

<div style="margin-top:-510px;margin-left:30px;">

On ajoute une petite marge de +/- 30 pixels.

Et pour finir, on ajoute ceci pour éviter que les catégories ne dépassent du corps du forum :

Code:

.forumline {width:90%;margin-left:13px;}

Il y aura peut-être d’autres réglages à faire dans les templates…

Mais voilà, ça fait beaucoup de bidouillage avec des marges négatives et compagnie, personnellement je suis pas trop pour…

Il doit y avoir moyen de refaire ça plus proprement.

[Livia]

Alors !
Ca marche très bien :3.
Mais c'est vrai que ça fait pas mal de bidouillage et que ça décentre pas mal de trucs, comme les liens sur la droite et le bidule pour agrandir la chatbox...
Je vais utiliser ta technique en attendant et bidouiller également de mon côté pour voir s'il n'existe pas un moyen plus propre de faire ça, mais je te remercie énormément <3

[Matriochka]

Ce que tu peux faire, c’est insérer ton image en fond dans une div, dans laquelle tu places ta page d’accueil.

Exemple :

Code:

<div class="pageaccueil">Ta page d’accueil ici</div>

Et dans le CSS, on insère l’image ainsi :

Code:

.pageaccueil {
background-image:url("http://i.imgur.com/5E6SeS8.png");
height:575px; /* hauteur de l’image */
width:1039px; /* largeur de l’image */}

Après, tu n’as qu’à mettre ta div en élément flottant :

Code:

.pageaccueil {
background-image:url("http://i.imgur.com/5E6SeS8.png");
height:575px; /* hauteur de l’image */
width:1039px; /* largeur de l’image */
position:absolute; /* élément flottant */}

À partir de ça, tu peux ensuite placer ta div (et donc : ton image) où tu veux sans que celle-ci n’influence l’élément bodyline.

[Livia]

HAN !
C'est génial, ça marche impeccablement bien une fois les réglages fait *^*
Le sujet est donc clos, je le met en résolu et je te remercie encore énormément pour ton aide <3