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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Resolu] Probleme image en bordure de bloc !

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Resolu] Probleme image en bordure de bloc !

n°2004178
toum_toum
Vivons masqués
Posté le 23-06-2010 à 15:34:46  profilanswer
 

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
mood
Publicité
Posté le 23-06-2010 à 15:34:46  profilanswer
 

n°2004430
toum_toum
Vivons masqués
Posté le 24-06-2010 à 13:10:40  profilanswer
 


Je me permets un petit up ! :o

n°2004454
gatsu35
Blablaté par Harko
Posté le 24-06-2010 à 14:00:27  profilanswer
 

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 ?


---------------
Blablaté par Harko
n°2004589
toum_toum
Vivons masqués
Posté le 24-06-2010 à 21:07:04  profilanswer
 

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
n°2004593
NostalGeek​ette
Posté le 24-06-2010 à 21:43:25  profilanswer
 

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

n°2004594
toum_toum
Vivons masqués
Posté le 24-06-2010 à 21:49:27  profilanswer
 

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
n°2004604
gatsu35
Blablaté par Harko
Posté le 24-06-2010 à 22:41:02  profilanswer
 

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


---------------
Blablaté par Harko
n°2004613
toum_toum
Vivons masqués
Posté le 24-06-2010 à 23:36:39  profilanswer
 

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

n°2004614
gatsu35
Blablaté par Harko
Posté le 24-06-2010 à 23:38:48  profilanswer
 

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


---------------
Blablaté par Harko
n°2004622
toum_toum
Vivons masqués
Posté le 25-06-2010 à 00:06:25  profilanswer
 

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

mood
Publicité
Posté le 25-06-2010 à 00:06:25  profilanswer
 

n°2004624
toum_toum
Vivons masqués
Posté le 25-06-2010 à 00:14:21  profilanswer
 


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
n°2004762
-id-
Je suis aux cabinets
Posté le 25-06-2010 à 13:11:16  profilanswer
 

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

n°2004768
gatsu35
Blablaté par Harko
Posté le 25-06-2010 à 13:31:27  profilanswer
 

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


---------------
Blablaté par Harko
n°2004859
toum_toum
Vivons masqués
Posté le 25-06-2010 à 17:28:09  profilanswer
 

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

n°2004873
gatsu35
Blablaté par Harko
Posté le 25-06-2010 à 18:06:54  profilanswer
 

ç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
n°2004953
toum_toum
Vivons masqués
Posté le 26-06-2010 à 14:58:47  profilanswer
 

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
n°2004956
toum_toum
Vivons masqués
Posté le 26-06-2010 à 15:13:22  profilanswer
 


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. }
  7. #milieu {
  8. width: 900px;
  9. background-image:url(../images/fond_conteneur1.png);
  10. background-repeat:repeat-y;
  11. }
  12. #bas {
  13. width: 900px;
  14. height: 30px;
  15. background-image:url(../images/bas.png);
  16. }


 
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">
  2. <div id="haut">
  3.              <!-- fin de #haut --></div>
  4.      <div id="milieu">
  5.                <div id="conteneur2">
  6.                        ...
  7.                        Blablabla (tout mon contenu de site + menus)
  8.                        ...
  9.                       <!-- fin de #conteneur2 --></div>
  10.  
  11.                   <!-- fin de #milieu --></div>             
  12.              <div id="bas">
  13.              <!-- fin de #bas --></div>
  14. <!-- fin de #conteneur1 --></div>


 
 
 
 
 
 

n°2004957
toum_toum
Vivons masqués
Posté le 26-06-2010 à 15:20:13  profilanswer
 


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
 
 

n°2004979
gatsu35
Blablaté par Harko
Posté le 26-06-2010 à 18:54:29  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Resolu] Probleme image en bordure de bloc !

 

Sujets relatifs
echo apres une image PHP ne marche pas !!!!problème au niveau de struts-config.xml
[C] passage par adresse de chaines de caracteres (résolu)Petite image déco en arrière-plan -> positionnement ?
[CSS] problème de mise en pageproblème affichage données mysql/php
(résolu... trop con) CHAINES supprimer xxx entre 'A' et 'B' ???[RESOLU][vbs]access denied
Plus de sujets relatifs à : [Resolu] Probleme image en bordure de bloc !


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