Faire passer une image au dessus du bodyline

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Faire passer une image au dessus du bodyline

Message par Livia le Ven 8 Mar 2013 - 18:07

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


Dernière édition par Livia le Lun 11 Mar 2013 - 14:50, édité 1 fois

Livia
**

Féminin
Messages : 69
Inscrit(e) le : 17/07/2011

http://chronicles.rpgboard.net/
Livia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer une image au dessus du bodyline

Message par Dr. Sam le Ven 8 Mar 2013 - 19:46

Bonjour Livia,

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

Averti moi quand cela sera fait Wink


Bien cordialement,
Smile

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer une image au dessus du bodyline

Message par Livia le Ven 8 Mar 2013 - 20:11

Bonsoir !
La PA est désormais visible :3

Livia
**

Féminin
Messages : 69
Inscrit(e) le : 17/07/2011

http://chronicles.rpgboard.net/
Livia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer une image au dessus du bodyline

Message par Livia le Dim 10 Mar 2013 - 9:53

Up ? >w<

Livia
**

Féminin
Messages : 69
Inscrit(e) le : 17/07/2011

http://chronicles.rpgboard.net/
Livia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer une image au dessus du bodyline

Message par Livia le Lun 11 Mar 2013 - 12:02

Encore un petit up ;w;

Livia
**

Féminin
Messages : 69
Inscrit(e) le : 17/07/2011

http://chronicles.rpgboard.net/
Livia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer une image au dessus du bodyline

Message par Matriochka le Lun 11 Mar 2013 - 12:32

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 Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer une image au dessus du bodyline

Message par Livia le Lun 11 Mar 2013 - 13:11

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<)

Livia
**

Féminin
Messages : 69
Inscrit(e) le : 17/07/2011

http://chronicles.rpgboard.net/
Livia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer une image au dessus du bodyline

Message par Matriochka le Lun 11 Mar 2013 - 13:26

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

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.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer une image au dessus du bodyline

Message par Livia le Lun 11 Mar 2013 - 13:48

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

Livia
**

Féminin
Messages : 69
Inscrit(e) le : 17/07/2011

http://chronicles.rpgboard.net/
Livia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer une image au dessus du bodyline

Message par Matriochka le Lun 11 Mar 2013 - 14:03

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.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer une image au dessus du bodyline

Message par Livia le Lun 11 Mar 2013 - 14:46

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

Livia
**

Féminin
Messages : 69
Inscrit(e) le : 17/07/2011

http://chronicles.rpgboard.net/
Livia a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum