Positionnement d'images via div et css

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 le 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
+ Hyperactif +

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

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

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

Message par Scoubifitz le 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
+ Hyperactif +

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

http://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 le 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
+ Hyperactif +

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

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

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

Message par Scoubifitz le 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
+ Hyperactif +

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

http://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 le 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
****

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

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

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

Message par demeter1 le 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
+ Hyperactif +

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

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

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

Message par Scoubifitz le 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 



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

Scoubifitz
+ Hyperactif +

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

http://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 le Sam 25 Jan 2014 - 12:51

Ah, oui... En effet Mr. Green

WhyNot
****

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

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

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

Message par demeter1 le 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
+ Hyperactif +

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

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

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

Message par demeter1 le Dim 26 Jan 2014 - 17:30

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

demeter1
+ Hyperactif +

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

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

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

Message par Lixyr le 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
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.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 le 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


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
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
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 le 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.





Lixyr
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.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 le 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
+ Hyperactif +

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

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

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

Message par Lixyr le 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é.





Lixyr
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.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


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