Image CSS

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

Résolu Image CSS

Message par kakale le Mar 19 Avr 2011 - 15:40

Bonjour à vous,

Je viens encore vous embêter car une idée m'est venue ce matin. En effet j'aurai voulu savoir s'il était possible, de faire comme un QUEL, de mettre des images de chaque côtés de mon en-tête. Je ne sais pas si je me suis bien fait comprendre mais je vais faire un p'tit schéma vite fait bien fait :

Démonstration sans images : http://puu.sh/1DFZ
Avec images : http://puu.sh/1DGg

Comme vous pouvez le voir, j'aimerai savoir s'il était possible de mettre une image de chaque côté du logo comme le QEEL ici présent : http://puu.sh/1DG6

En espérant avoir été clair !
Cordialement,



J'espère que j'ai été explicite ^^'...


Dernière édition par kakale le Mer 20 Avr 2011 - 21:35, édité 1 fois

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

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

Résolu Re: Image CSS

Message par quierra le Mer 20 Avr 2011 - 1:24

Coucou, oui bien sur c'est possible, à condition d'avoir accès aux templates.

Recherche dans le template "overall_header" :

Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Juste en dessous, tu crées deux div :

Code:
<div id="img_gauche"></div>  <div id="img_droite"></div>

Tu enregistres et publies "sans prévisualiser" (par prudence).

Ensuite tu places et configures tes images dans ton css :

#img_gauche{
background : url(adresse de l'image) no-repeat transparent;
position: absolute;
top: 50px;
left: 150px;
width: 150px;
height: 100px;
}

#img_droite{
background : url(adresse de l'image) no-repeat transparent;
position: absolute;
top: 50px;
right: 150px;
width: 150px;
height: 150px;
}

C'est juste un exemple... Car il y a bien d'autres façons de procéder, tout comme de les configurer.

Personnellement, je créerai un div conteneur pour placer mes images, exemple :

Code:
<div id="content_img">
<div id="img_gauche"></div>  <div id="img_droite"></div>
</div>

Et dans le css :

#content_img{
position: relative;
top: 50px; /* placer à 50px du haut */
width: 1000px; /* égal la largueur du forum + largeur des images, sinon tu auras un décalage du forum */
margin: 0 auto;
padding: 0;
}

#img_gauche1{
background : url(adresse de l'image) no-repeat transparent;
float: left;
width: 150px;
height: 100px;
}

#img_droite1{
background : url(adresse de l'image) no-repeat transparent;
float: right;
width: 150px;
height: 150px;
}

Bref, à toi de voir ce qui te convient le mieux par rapport à tes images.

quierra
****

Féminin
Messages : 278
Inscrit(e) le : 22/08/2007

http://themes-fa.com
quierra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image CSS

Message par kakale le Mer 20 Avr 2011 - 17:23

Bonjour,

Merci de ta réponse !
Maintenant cela donne un meilleur rendu !

Affichage : http://puu.sh/1EK3

PS : Il fallait rajouter cela pour que tout les navigateurs puissent héberger l'image :

z-index: 999;
position: absolute;
top: 0px;
left: 350px;

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale 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