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

Petite image déco en arrière-plan -> positionnement ? - HTML/CSS - Programmation

Marsh Posté le 22-06-2010 à 20:48:23    

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 :
  1. #decoration  {
  2. position:absolute;  /* sortir la div du flux */
  3. top:150px;  /* decaler de 150 pixels par rapport au haut */
  4. width:auto;
  5. background-image:url(../images/fond_deco_01.gif);
  6. background-repeat: repeat-x;  /* répéter sur l'axe x la déco... */
  7. }


 
 
Une petite idée ?


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

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 22-06-2010 à 20:48:23   

Reply

Marsh Posté le 22-06-2010 à 21:07:40    

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.
Reply

Marsh Posté le 22-06-2010 à 21:09:58    

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


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 22-06-2010 à 21:13:38    


Non pas de changement.
 
j'écris :
 

Code :
  1. #decoration  {
  2. position:absolute;
  3. top:150px;
  4. height:120px;
  5. background-image:url(../images/fond_deco_01.gif);
  6. background-repeat: repeat-x;
  7. }


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


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 22-06-2010 à 21:22:16    

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.
Reply

Marsh Posté le 22-06-2010 à 21:39:22    

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)


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 22-06-2010 à 23:18:29    

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.
Reply

Marsh Posté le 22-06-2010 à 23:28:13    


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 ?


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 23-06-2010 à 09:40:57    

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.
Reply

Marsh Posté le 23-06-2010 à 09:57:02    


En effet, ça colle maintenant, merci. :jap:  
 
Peux-tu me dire pourquoi être amené à déclarer la position de mon #conteneur ?


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 23-06-2010 à 09:57:02   

Reply

Marsh Posté le 23-06-2010 à 11:06:53    

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.
Reply

Marsh Posté le 23-06-2010 à 14:01:10    

C'est bien enregistré.  
 
Et merci  :jap:


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

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 10-07-2010 à 18:44:20    


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
http://nsa15.casimages.com/img/2010/07/10/100710064117902948.jpg
 
Sous IE7 : pas ok
http://nsa15.casimages.com/img/2010/07/10/100710064122120651.jpg
 
 
 
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">
<!-- fin de #decoration-fond --></div>
<div id="conteneur1">
etc...
 
 
 
Une petite idée ?


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 10-07-2010 à 18:53:22    


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;
}  
 
 
 


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 11-07-2010 à 18:08:46    


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


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed