Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
2421 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2003868
toum_toum
Vivons masqués
Posté le 22-06-2010 à 20:48:23  profilanswer
 

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
mood
Publicité
Posté le 22-06-2010 à 20:48:23  profilanswer
 

n°2003875
abais
Posté le 22-06-2010 à 21:07:40  profilanswer
 

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.
n°2003877
toum_toum
Vivons masqués
Posté le 22-06-2010 à 21:09:58  profilanswer
 

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

n°2003880
toum_toum
Vivons masqués
Posté le 22-06-2010 à 21:13:38  profilanswer
 


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

n°2003885
abais
Posté le 22-06-2010 à 21:22:16  profilanswer
 

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.
n°2003895
toum_toum
Vivons masqués
Posté le 22-06-2010 à 21:39:22  profilanswer
 

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)

n°2003942
abais
Posté le 22-06-2010 à 23:18:29  profilanswer
 

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.
n°2003946
toum_toum
Vivons masqués
Posté le 22-06-2010 à 23:28:13  profilanswer
 


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 ?

n°2003990
abais
Posté le 23-06-2010 à 09:40:57  profilanswer
 

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.
n°2003995
toum_toum
Vivons masqués
Posté le 23-06-2010 à 09:57:02  profilanswer
 


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

mood
Publicité
Posté le 23-06-2010 à 09:57:02  profilanswer
 

n°2004052
abais
Posté le 23-06-2010 à 11:06:53  profilanswer
 

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.
n°2004125
toum_toum
Vivons masqués
Posté le 23-06-2010 à 14:01:10  profilanswer
 

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


Message édité par toum_toum le 23-06-2010 à 14:02:12
n°2008607
toum_toum
Vivons masqués
Posté le 10-07-2010 à 18:44:20  profilanswer
 


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 ?

n°2008610
toum_toum
Vivons masqués
Posté le 10-07-2010 à 18:53:22  profilanswer
 


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

n°2008711
toum_toum
Vivons masqués
Posté le 11-07-2010 à 18:08:46  profilanswer
 


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


Aller à :
Ajouter une réponse
  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 overflowXML - XSLT : mettre title dans image
Image de bannière toujours en basCV_IMAGE_ELEM ?
insérer une image dans un pdf généré par du phpzone 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 ?


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR