Positionnement d'images via div et css

4 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

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

Résolu Positionnement d'images via div et css

Message par demeter1 Sam 25 Jan 2014 - 10:28

Bonjour à tous,
Je rencontre des soucis d'affichage pour des images gérées via div et css. Pour faire simple rien ne s'affiche.

Par exemple, je souhaite mettre une image en bas du forum en  dessous du body.

J'installe après la fermeture du body du template overall footer end ceci

Code:
<div class="deco_bas"> </div>

lié à ce css

Code:
#deco_bas {
clear: both!important;
position: fixed!important;
background-image: url(http://ahp.li/eec5b5a5e2631d223935.jpg)!important;
background-repeat: repeat-x!important;
background-position: bottom righ !important;
height: 167px !important;
width: 662px !important;
}

ou encore positionner une image à droite du forum  en positionnant la div cette fois ci au dessus de la fermeture du body de ce m^me template avec

Code:
<div class="arbre"> </div>
qui a pour css

Code:
#arbre{
 clear: both!important;    
background-image: ur('http://i55.servimg.com/u/f55/11/93/85/24/arbre_10.gif')  transparent !important;
background-repeat: no-repeat!important;
bottom: -180px !important;
height: 1004px !important;
position: absolute!important;
right: -197px !important;
width: 545px !important;
}

Le css est hébergé sur une feuille de style externe vu que les images sont faites pour un sélecteur de thème.
Bizarrement, la méthode fonctionne pour l'intérieur du bodyline mais dés que je sors de cette frontière, c'est le néant total.

Cela fait deux heures que je me prends la tête pour positionner 4 malheureuses images et je vous avouerai qu'un petit coup de baguette magique serait la bienvenue  Clin d\'oeil 

nota :
1 j'héberge mes images chez archive host sur un compte payant . J'ai essayé en passant par servimg mais le résultat est le même
2 les images sont valides
3 j'ai vidé à diverses reprises les caches du navigateur.

Merci par avance pour vos réponses .


Dernière édition par demeter1 le Mar 28 Jan 2014 - 19:03, édité 3 fois
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par Scoubifitz Sam 25 Jan 2014 - 10:50

Coucou bonjour !^^

premier cas :
tu utilises une class , alors que le CSS appelle un identifiant (#)
"en bas , à droite" = bottom right (right avec un "t")

deuxième cas :
tu utilises une class , alors que le CSS appelle un identifiant (#)
pour appeler l'image il faut l'URL (url avec un " l ")
"transparent" n'a rien à faire dans background-image , mais devrait être placé à part , dans un background-color


Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3732
Inscrit(e) le : 18/03/2008

https://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par demeter1 Sam 25 Jan 2014 - 10:58

Bonjour Scoubifitz, merci pour cette aide .

Donc, si je résume

cas 1
Code:
.deco_bas {
clear: both!important;
position: fixed!important;
background-image: url("http://ahp.li/eec5b5a5e2631d223935.jpg") !important;
background-repeat: repeat-x!important;
background-position: bottom right !important;
height: 167px !important;
width: 662px !important;
}


cas 2

Code:
.arbre{
clear: both!important;   
background-image: ur("http://i55.servimg.com/u/f55/11/93/85/24/arbre_10.gif")  !important;
background-color : transparent !important;
background-repeat: no-repeat!important;
bottom: -180px !important;
height: 1004px !important;
position: absolute!important;
right: -197px !important;
width: 545px !important;
}
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par Scoubifitz Sam 25 Jan 2014 - 11:33

toujours la lettre "l" qui manque à url ...
c'est ça , ou bien , pour rendre le code plus léger :

cas 1
Code:
.deco_bas {
clear: both!important;
height: 167px !important;
width: 662px !important;
position: fixed!important;
background:url(http://ahp.li/eec5b5a5e2631d223935.jpg) repeat-x bottom right!important;
}

cas  2

Code:
.arbre{
clear:both!important;
height:1004px !important;   
width:545px !important;
background:transparent url(http://i55.servimg.com/u/f55/11/93/85/24/arbre_10.gif) no-repeat!important;
position:absolute!important;
right: -197px !important;
bottom: -180px !important;
}
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3732
Inscrit(e) le : 18/03/2008

https://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Positionnement d'images via div et css

Message par WhyNot Sam 25 Jan 2014 - 12:11

Hello,

demeter1 a écrit:J'installe après la fermeture du body du template overall footer end ceci
Code:
<div class="deco_bas"> </div>
Je rebondis juste sur ce point : tout ce qui doit s'afficher à l'écran doit être inséré à l'intérieur des balises <body> pour que la syntaxe soit correcte.
WhyNot

WhyNot
****

Masculin
Messages : 244
Inscrit(e) le : 25/11/2013

http://whynot.forumactif.org
WhyNot a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par demeter1 Sam 25 Jan 2014 - 12:25

Merci Scoubifitz,cela fonctionne à merveille  :youopi: 

Petite question supplémentaire (je sais j'abuse  Embarassed ). Il ya un moyen de fixer l'image au bord du corps du forum pour éviter un positionnement aléatoire vis à vis de la taille de l'écran ????

Bonjour Whynot, pas de soucis , je viens de replacer la div. Je voulais en fait mettre l'image en dessous du footer pour avoir le corps du forum au dessus.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par Scoubifitz Sam 25 Jan 2014 - 12:28

merci pour ce point WhyNot !^^

ceci dit , il y a tellement de </body> qu'il faudrait plutôt revoir toute la structure ...  Siffleur 

Positionnement d'images via div et css 955898source

@ Demeter : peut-être avec un "width:100%" ?
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3732
Inscrit(e) le : 18/03/2008

https://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par WhyNot Sam 25 Jan 2014 - 12:51

Ah, oui... En effet Mr. Green
WhyNot

WhyNot
****

Masculin
Messages : 244
Inscrit(e) le : 25/11/2013

http://whynot.forumactif.org
WhyNot a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par demeter1 Sam 25 Jan 2014 - 13:29

Les novices font toujours du sale boulot, c'est connu  Mr. Green ( et j'ai pas honte ou presque  Wink  Wink )

Je vais faire un petit nettoyage.

Pour bloquer l'image, je vais voir en encadrant une autre div dont l'image me sert de footer.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par demeter1 Dim 26 Jan 2014 - 17:30

Sujet abandonné. il est apparemment infaisable de bloquer les images.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par Lixyr Dim 26 Jan 2014 - 18:01

Bonsoir, Demeter.

Quand vous parlez de "fixer" une image, vous parlez de la position fixed ?
C'est-à-dire que l'image reste à la même place même si on scroll une page ?
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7448
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par demeter1 Dim 26 Jan 2014 - 20:05

Bonjour Lixyr,
En fait l'image ne bouge pas avec le scroll mais l'image se déplace dés que la résolution de l'écran change de taille.
J'ai tenté de régler le positionnement en px et en % mais le résultat reste le même.

Les images doivent rester collées au corps du forum.

Par exemple pour cette image
Positionnement d'images via div et css Sant_t10

dont voici le css
Code:
.arbre{
clear: both!important;    
background-image: url("http://ahp.li/877b0df87b72de934549.gif")  !important;
background-color : transparent !important;
background-repeat: no-repeat!important;
margin-top: -740px !important;
height: 949px!important;
position:relative!important;
left: 1% !important;
width:450px!important;
z-index: -1!important;
}

Le corps du forum ayant une taille fixe, et l'image étant en z-index -1, je me demande s'il ne faut pas que je rallonge la partie transparente de l'image de la valeur rajoutée du corps du forum (simple idée qui me vient en tapant cette réponse).
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Positionnement d'images via div et css

Message par Lixyr Dim 26 Jan 2014 - 22:13

Je vois. Avez-vous essayé de positionner votre image au centre ?

Dans la classe arbre, à la place de :
Code:
background-image: url("http://ahp.li/877b0df87b72de934549.gif")  !important;
background-color : transparent !important;
background-repeat: no-repeat!important;
mettez :

Code:
background: transparent url(http://ahp.li/877b0df87b72de934549.gif) no-repeat 50% 0%;
ça place l'image au milieu de l'écran. Après, la largeur du creu de l'arbre doit être de même taille que la largeur du forum pour que ça s'affiche correctement.

Sinon il y a la solution de mettre un fond d'écran en fonction de la taille de résolution de l'écran.


♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez Positionnement d'images via div et css 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu Positionnement d'images via div et css 3592387030 pour prévenir la modération.
Positionnement d'images via div et css Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7448
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par demeter1 Mar 28 Jan 2014 - 19:02

Bonjour Lixyr,
Milles excuses pour ce petit retard.

Votre solution fonctionne à merveille et m'a permis de positionner correctement cette image.

Un grand merci pour cette aide  ok ::pourtoi:: 
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Positionnement d'images via div et css

Message par Lixyr Mar 28 Jan 2014 - 19:08

Ah tant mieux. J'avais peur d'être arrivée trop retard et que vous ayez réellement abandonné.


♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez Positionnement d'images via div et css 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu Positionnement d'images via div et css 3592387030 pour prévenir la modération.
Positionnement d'images via div et css Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7448
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

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