[Resolu] Probleme image en bordure de bloc !

Probleme image en bordure de bloc ! [Resolu] - HTML/CSS - Programmation

Marsh Posté le 23-06-2010 à 15:34:46    

Re ! :o
 
 
Un nouveau petit problème d'image, cette fois-ci une image destinée à reproduire un effet d'ombre...
(Pas super-important, mais m'embête un peu tout de même... :o )
 
 
Voici ce que je souhaite obtenir :
http://nsa14.casimages.com/img/2010/06/23/100623032134741475.gif
 
 
Ca "marche" dans un éditeur "WYSIWYG", mais pas sous Firefox car j'obtiens ceci :
http://nsa15.casimages.com/img/2010/06/23/100623032138486469.gif
 
 
 
J'explique ici ma démarche :
 
La structure de la page :
http://nsa15.casimages.com/img/2010/06/23/100623032142114233.gif
 
Mon premier essai qui a été de mettre l'image en background de "menu"  
(mais échec à cause de ma bordure droite qui se decale du coup...) :
http://nsa15.casimages.com/img/2010/06/23/100623033137784526.gif
 
Et enfin un autre essai qui est de mettre l'image en background de "container"
http://nsa14.casimages.com/img/2010/06/23/100623033141398011.gif
 
 
Et là curieusement, ça fonctionne dans mon éditeur, mais pas sous firefox (voir images en haut)...
 
 
Voici les codes :  
 
A.

Code :
  1. #menu {
  2. float: left;
  3. width: 200px;
  4. background-image:url(../images/fond_image.gif);
  5. background-repeat:repeat-y;
  6. background: #191919;
  7. padding: 15px 10px 15px 20px;
  8. border-right-width: 4px;
  9. border-right-style: dotted;
  10. border-right-color: #954394;
  11. }


 
B.  

Code :
  1. #container {
  2. width: 858px;
  3. background-image:url(../images/fond_image.gif);
  4. background-repeat:repeat-y;
  5. background:#d7bed7;
  6. margin: auto;
  7. text-align: left;
  8. }


 
 
 
Merci de votre éclairage  :)


Message édité par toum_toum le 24-06-2010 à 23:36:59

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

Marsh Posté le 23-06-2010 à 15:34:46   

Reply

Marsh Posté le 24-06-2010 à 13:10:40    


Je me permets un petit up ! :o


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

Marsh Posté le 24-06-2010 à 14:00:27    

1- Tu me jettes ton éditeur wysiwyg de merde
2- si tu rajoutes une bordure à ton DIV normal que sa largeur augmente et que ça décalle l'autre div.
3- Et le code HTML on se caresse les couilles devant toi pour l'avoir ?

Message cité 1 fois

---------------
Blablaté par Harko
Reply

Marsh Posté le 24-06-2010 à 21:07:04    

gatsu35 a écrit :

2- si tu rajoutes une bordure à ton DIV normal que sa largeur augmente et que ça décalle l'autre div.

Jamais dit le contraire [:cmshadow]  
 
(Pour le reste je vais rester zen...)
 
 
Edit : quand je dis "ca fonctionne dans mon éditeur" j'oublie de préciser que sous IE(7) aussi... Il n'y a que Firefox qui refuse mon background-image


Message édité par toum_toum le 24-06-2010 à 21:08:47

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

Marsh Posté le 24-06-2010 à 21:43:25    

Tu fais un autre div, plus large, qui aura ton background-image. Et dedans, tu mets le div menu.

Reply

Marsh Posté le 24-06-2010 à 21:49:27    

J'ai trouvé le probleme :  
 
Je gardais un fond couleur, "par precaution", mais visiblement ca rentre en conflit sous Firefox.
En fait je dois écrire background-color et non background tout court...
 
background-image:url(../images/fond_image.gif);
background-repeat:repeat-y;
background-color:blablabla
 
...est ok...


Message édité par toum_toum le 24-06-2010 à 21:52:04

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

Marsh Posté le 24-06-2010 à 22:41:02    

et le code HTML associé on doit faire quoi pour l'avoir ? t'implorer à genou ?


---------------
Blablaté par Harko
Reply

Marsh Posté le 24-06-2010 à 23:36:39    

Mais il n'a aucun intérêt. Ce sont juste 2 divs imbriquées et je ne vois pas ce que ca aurait apporté de plus.
 
Et le pb est réglé comme expliqué 2 posts au dessus...


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

Marsh Posté le 24-06-2010 à 23:38:48    

2 divs imbriqués ? il ne sont pas collés l'un à coté de l'autre ?


---------------
Blablaté par Harko
Reply

Marsh Posté le 25-06-2010 à 00:06:25    

Si pardon.  2 div "menu" et "contenu" à la suite, et imbriqués dans une div "container"...


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

Marsh Posté le 25-06-2010 à 00:06:25   

Reply

Marsh Posté le 25-06-2010 à 00:14:21    


Il me reste un probleme de taille à régler : mes images en .png ont vraiment de drôles de comportements sous IE7.
Je vais revoir ça demain... [:hephaestos]  

Message cité 1 fois
Message édité par toum_toum le 25-06-2010 à 00:17:05

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

Marsh Posté le 25-06-2010 à 13:11:16    

Le PNG, c'est de plus en plus utilisé.
 
Mais moi je n'ai pas encore franchi le pas. Trop peur que des navigateurs anciens aient des soucis. Pourtant, j'aimerais profiter des possibilités offertes par ce format. :(

Reply

Marsh Posté le 25-06-2010 à 13:31:27    

toum_toum a écrit :


Il me reste un probleme de taille à régler : mes images en .png ont vraiment de drôles de comportements sous IE7.
Je vais revoir ça demain... [:hephaestos]  


 
Tu as un doctype sur ta page ?  
la transparence du PNG 32 bits n'est pas géré sous IE6 et si tu n'as pas de doctype sur ta page, ta page est en mode quirks donc mode IE6

Message cité 1 fois

---------------
Blablaté par Harko
Reply

Marsh Posté le 25-06-2010 à 17:28:09    

gatsu35 a écrit :


 
Tu as un doctype sur ta page ?
la transparence du PNG 32 bits n'est pas géré sous IE6 et si tu n'as pas de doctype sur ta page, ta page est en mode quirks donc mode IE6


Oui.
 
En fait ce n'est pas avec la transparence que j'ai un probleme, mais avec mes positionnements.
Sous IE7 j'ai 3 fichiers images qui sont soit decalés (de 2 à 300 pixels !) soit ont disparus...
 
Je vais les remplacer par des gif pour voir ce que ca donne (le probleme étant que les propriétés
de transparence ne sont pas les mêmes et que le rendu ne colle pas bien...).


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

Marsh Posté le 25-06-2010 à 18:06:54    

ça n'a rien n'a voir avec le fait que ce soit du PNG ou du GIF ou du JPG ou ce quetuveuxdautrecommeformat
C'est juste ta CSS qui doit être mal écrite. C'est obligé.
 
Donc :  
1-Tu postes ton code HTML complet
2-tu postes ton code CSS complet
 
tu je vais t'expliquer là ou ça cloche :o


---------------
Blablaté par Harko
Reply

Marsh Posté le 26-06-2010 à 14:58:47    

Hello.
 
 
Alors voici pour la premiere image : fond_deco_01.png
 
J'ai créé une div speciale pour elle : #decoration
 
Cette image est censée s'afficher sur toute la largeur de la page, apparaître devant le fond du body, mais derrière le fond de la div #conteneur1
Ce qui est le cas aussi bien sous Firefox, que sous IE7.
 
Mais curieusement sous IE7 celle-ci est decalée d'environ 200/250 pixels vers la droite et donc ne "démarre" pas à partir du bord gauche.
 
 

Citation :

body  {
 font: 15px Arial, Helvetica, sans-serif;
 background-image:url(../images/fond_01.gif);
 background-repeat:repeat;
 margin: 0;
 padding: 0;
 text-align: center;
 color: #333333;
}
 
 
#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;
 text-align: left;  
}


 
 
Pour l'HTML, RAS :  
 
<body>
    <div id="decoration">
    <!-- fin de #decoration-fond --></div>
          <div id="conteneur1">
          ...
          blablabla
          ...
          <!-- fin de #conteneur1 --></div>
 
 
 
(Je poste pour les 2 autres images dans le post suivant...)


Message édité par toum_toum le 26-06-2010 à 15:00:57

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

Marsh Posté le 26-06-2010 à 15:13:22    


Pour la suite et mes 2 autres images "disparues", qq explications avant :
 
 
J'ai mon bloc #conteneur1 dont j'ai voulu faire des bordures arrondies en haut et en bas, ainsi qu'un effet d'ombrage sur son coté gauche.
Du coup j'ai créé 3 divs, qui sont #haut, #milieu, et #bas (pas terribles mes dénominations mais je reviendrai dessus en fin de travail :o )
 
Dans #haut : J'insère en background mon image (haut.png) qui sera une bande horizontale à bords arrondis, version "haute".
Dans #milieu : J'insère en background avec un repeat-y une image étroite (fond_conteneur1) qui rendra l'effet d'ombre.
Dans #bas : J'insère en background mon image (bas.png) qui sera une bande horizontale à bords arrondis, version "basse".
 
Mes 2 "images disparues" sont :
fond_conteneur1.png
bas.png
(haut.png lui est bien présentsous IE7.)
 
 
 
Ce qui donne en CSS ces 3 divs qui se suivent :  
 

Code :
  1. #haut {
  2. width: 900px;
  3. height: 30px;
  4. background-image:url(../images/haut.png);
  5. margin-left:-8px;
  6. }
  8. #milieu {
  9. width: 900px;
  10. background-image:url(../images/fond_conteneur1.png);
  11. background-repeat:repeat-y;
  12. }
  15. #bas {
  16. width: 900px;
  17. height: 30px;
  18. background-image:url(../images/bas.png);
  19. }


 
Ensuite je crée un second container : #conteneur2 , qui lui servira à contenir mes div de menu lateral et de contenu.
 
 
 
Sur mon HTML, cela donne :
 

Code :
  1. <div id="conteneur1">
  3. <div id="haut">
  4.              <!-- fin de #haut --></div>
  6.      <div id="milieu">
  8.                <div id="conteneur2">
  9.                        ...
  10.                        Blablabla (tout mon contenu de site + menus)
  11.                        ...
  12.                       <!-- fin de #conteneur2 --></div>
  13.  
  14.                   <!-- fin de #milieu --></div>             
  16.              <div id="bas">
  17.              <!-- fin de #bas --></div>
  19. <!-- fin de #conteneur1 --></div>


 
 
 
 
 
 


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

Marsh Posté le 26-06-2010 à 15:20:13    


Les résultats en images :
 
 
Firefox (ok) :
 
http://nsa14.casimages.com/img/2010/06/26/100626031922440977.jpghttp://nsa14.casimages.com/img/2010/06/26/100626031925676856.jpg
 
 
IE7 (mauvais) :
 
http://nsa15.casimages.com/img/2010/06/26/10062603192940928.jpg
http://nsa15.casimages.com/img/2010/06/26/100626031933908393.jpg
 
 


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

Marsh Posté le 26-06-2010 à 18:54:29    

tu mets ta page en ligne, là on va pas s'en sortir il manque les 3/4 des éléments
 
MERCI


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

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