[Resolu] Probleme image en bordure de bloc !

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Resolu] Probleme image en bordure de bloc !

toum_toum

Vivons masqués

Re !

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

Voici ce que je souhaite obtenir :

Ca "marche" dans un éditeur "WYSIWYG", mais pas sous Firefox car j'obtiens ceci :

J'explique ici ma démarche :

La structure de la page :

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

Et enfin un autre essai qui est de mettre l'image en background de "container"

Et là curieusement, ça fonctionne dans mon éditeur, mais pas sous firefox (voir images en haut)...

Voici les codes :

A.

Code :

#menu {
float: left;
width: 200px;
background-image:url(../images/fond_image.gif);
background-repeat:repeat-y;
background: #191919;
padding: 15px 10px 15px 20px;
border-right-width: 4px;
border-right-style: dotted;
border-right-color: #954394;
}

Code :

#container {
width: 858px;
background-image:url(../images/fond_image.gif);
background-repeat:repeat-y;
background:#d7bed7;
margin: auto;
text-align: left;
}

Merci de votre éclairage

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

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

Publicité

toum_toum

Vivons masqués

Je me permets un petit up !

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

gatsu35

Blablaté par Harko

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

toum_toum

Vivons masqués

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

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

NostalGeekette

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

toum_toum

Vivons masqués

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

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

gatsu35

Blablaté par Harko

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

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

toum_toum

Vivons masqués

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

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

gatsu35

Blablaté par Harko

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

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

toum_toum

Vivons masqués

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

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

Publicité

toum_toum

Vivons masqués

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

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

-id-

Je suis aux cabinets

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.

gatsu35

Blablaté par Harko

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

toum_toum

Vivons masqués

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

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

gatsu35

Blablaté par Harko

ç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

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

toum_toum

Vivons masqués

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">
</div>
<div id="conteneur1">
...
blablabla
...
</div>

(Je poste pour les 2 autres images dans le post suivant...)

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

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

toum_toum

Vivons masqués

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 )

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 :

#haut {
width: 900px;
height: 30px;
background-image:url(../images/haut.png);
margin-left:-8px;
}
#milieu {
width: 900px;
background-image:url(../images/fond_conteneur1.png);
background-repeat:repeat-y;
}
#bas {
width: 900px;
height: 30px;
background-image:url(../images/bas.png);
}

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 :

<div id="conteneur1">
<div id="haut">
</div>
<div id="milieu">
<div id="conteneur2">
...
Blablabla (tout mon contenu de site + menus)
...
</div>
</div>
<div id="bas">
</div>
</div>

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

toum_toum

Vivons masqués

Les résultats en images :

Firefox (ok) :

IE7 (mauvais) :

---------------
“Never forget that England imposed this war on us" - Goebbels 1943 . “Et maintenant, la météo" - Soloviev 2023

gatsu35

Blablaté par Harko

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

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 page	problè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 !

Page générée en 0.071 secondes