Petite image déco en arrière-plan -> positionnement ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Petite image déco en arrière-plan -> positionnement ?

toum_toum

Vivons masqués

Salut.

Je voudrais mettre en arrière-plan de mes pages un petit filet décoratif.
J'ai donc créé une div spéciale, que je déclare en html juste après le body.

Je bute sur le positionnement de cette balise. J'ai opté pour une position "absolute" afin de sortir ce filet du flux (et ne pas affecter les éléments suivants dans la page). Mais du coup je perds mon image...

Le code CSS :

Code :

#decoration {
position:absolute; /* sortir la div du flux */
top:150px; /* decaler de 150 pixels par rapport au haut */
width:auto;
background-image:url(../images/fond_deco_01.gif);
background-repeat: repeat-x; /* répéter sur l'axe x la déco... */
}

Une petite idée ?

Message édité par toum_toum le 10-07-2010 à 18:34:08

---------------
2025 : Stupid is now Norm

Publicité

abais

Et bien, donne une hauteur aussi
Sinon, au risque de dire une bêtise, ton width:auto; ne sert à rien ici.

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

toum_toum

Vivons masqués

Oui j'ai remplacé mon "height" initial (qui ne donnait rien) par ce "width" (au cas où...). Je repars donc sur le "height", on va voir...

---------------
2025 : Stupid is now Norm

toum_toum

Vivons masqués

Non pas de changement.

j'écris :

Code :

#decoration {
position:absolute;
top:150px;
height:120px;
background-image:url(../images/fond_deco_01.gif);
background-repeat: repeat-x;
}

... et mon image disparaît.

Si je supprime mes lignes :
position:absolute;
et top:150px;

... je retrouve mon image. Mais évidemment tout le flux est decalé vers le bas...

---------------
2025 : Stupid is now Norm

abais

tu peux le mettre sur un ftp ? C'est pour faire des tests avec firebug...
#decoration est le premier fils du <body> ?

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

toum_toum

Vivons masqués

Ok je prepare ça :

Un fichier HTML avec CSS tel qu'en ce moment, et un autre avec un CSS qui permet de voir cette image de fond (mais sans positionnement adéquat).

(j'envoie par MP dès que prêt)

---------------
2025 : Stupid is now Norm

abais

Re !
Rajoute width:100% dans le CSS de #decoration...
C'est bizare tout de même, c'est comme si la valeur par defaut (width=100% pour les block) était detruite lorsqu'on mettait absolue... M'enfin...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

toum_toum

Vivons masqués

Ok ca marche, et en effet, bizarre ce 100%...

Par contre un nouveau problème apparait : l'imagette vient par dessus mon entete/espace texte/pied de page
et j'aurais aimé qu'elle reste en retrait, comme si elle était juste par dessus l'image/background du body...

Du coup est-ce que les z-index me permettront de m'en sortir ? Je ne pense pas car seule ma div "decoration"
est en position absolue... Je me trompe ?

---------------
2025 : Stupid is now Norm

abais

A partir du moment ou ta div #deco est avant ton #conteneur, #conteneur sera donc devant, à condition que ces 2 aient une position déclarée...

Donc en théorie, t'as juste à mettre un position:relative à ton #conteneur...
Si ça ne suffit pas, en effet, un z-index s'impose...

Message édité par abais le 23-06-2010 à 09:44:32

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

toum_toum

Vivons masqués

En effet, ça colle maintenant, merci. :jap:

Peux-tu me dire pourquoi être amené à déclarer la position de mon #conteneur ?

---------------
2025 : Stupid is now Norm

Publicité

abais

Parceque sans renseignement, les navigateurs prennent de drôle de décisions...
Par défaut, il faut croire que le positionnement d'une <div> n'est pas relative (sous Firefox)...
Perso, j'ai pris l'habitude de mettre un certain nombre de propriétés CSS qui ne paraissent pas nécessaire, mais qui réduisent au mieux toutes les différences d'interpretation entre les navigateurs (IE / Gecko...)...

Après, je ne suis pas expert CSS...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

toum_toum

Vivons masqués

C'est bien enregistré.

Et merci :jap:

Message édité par toum_toum le 23-06-2010 à 14:02:12

---------------
2025 : Stupid is now Norm

toum_toum

Vivons masqués

Salut.

Je reviens sur ce post car j'ai un probleme de positionnement, toujours, sous IE(7).

En effet mon petit "bloc" deco y est décalé d'environ 250 pixels vers la droite.

Peut-être que mon positionnement absolu ne fonctionne pas bien sous IE7 ?

Sous FF : ok

Sous IE7 : pas ok

CSS :

#decoration {
position:absolute;
top:180px;
width:100%;
height:50px;
background-image:url(../images/fond_deco_01.png);
background-repeat: repeat-x;
}

#conteneur1 {
position:relative;
width: 900px;
margin: 20px auto 20px auto; /* les marges automatiques pour centrer la page */
text-align: left; /* paramétrage qui annule le paramètre text-align: center de l'élément body. */
}

decoration = div qui englobe mon image-deco
conteneur1 = div qui va englober le contenu principal

HTML :

<body>
<div id="decoration">
</div>
<div id="conteneur1">
etc...

Une petite idée ?

---------------
2025 : Stupid is now Norm

toum_toum

Vivons masqués

Et par ailleurs mes margin top et bottom (destinés à décaler un peu mon contenant en haut comme en bas) ne semblent pas pris en compte par IE7

#conteneur1 {
position:relative;
width: 900px;
margin: 20px auto 20px auto;
text-align: left;
}

---------------
2025 : Stupid is now Norm

toum_toum

Vivons masqués

Re

Voici l'url.
http://tinyurl.com/377xs5g

Donc pour résumer :
- probleme avec le petite image decorative en arrière-plan, décalée sous IE7
- probleme avec un margin ou un paddin qq part sur mon bloc principal, qui reste collé en haut et en bas de page sous IE7

Merci pour votre coup de main

---------------
2025 : Stupid is now Norm

FORUM HardWare.fr

Programmation

HTML/CSS

Petite image déco en arrière-plan -> positionnement ?

Sujets relatifs
Problème d'affichage d'image avec imagepng (débutant)	plan de site
image centrée dans div overflow	XML - XSLT : mettre title dans image
Image de bannière toujours en bas	CV_IMAGE_ELEM ?
insérer une image dans un pdf généré par du php	zone de séléction sur une image en PHP
[resolu] GWT et image	[Résolu] Positionnement d'une image/banniere dans le CSS
Plus de sujets relatifs à : Petite image déco en arrière-plan -> positionnement ?

Page générée en 0.075 secondes