28172 sujets

CSS et mise en forme, CSS3

Problème "Block-inline" sous FireFox

Bonjour à tous,

Je souhaiterais vous soumettre un petit problème que je rencontre lors de la création de mon site internet:

Pour la galerie photos de mon site, j'ai créer un menu sous forme d'images répertorier en 6 catégories, lorsque l'on clique sur une image cela ouvre une lightbox avec les images de la catégorie souhaité.

Voici le liens de page => ici

Voici le code html de ma page =>



<section>
<div id="cadrecontent">
  	 
<div id="Top10"><img id="photo1" src="images/photos/Top10.jpg" usemap="#top" border="0"></div>		 
<map name="top">
<area rel="prettyPhoto[top]" shape="rect" coords="0,0,265,165" href="images/photos/top10/AvesnoisPhotoA1.jpg">
<area rel="prettyPhoto[top]" shape="rect"  href="images/photos/top10/AvesnoisPhotoA2.jpg">
<area rel="prettyPhoto[top]" shape="rect"  href="images/photos/top10/AvesnoisPhotoA3.jpg">
<area rel="prettyPhoto[top]" shape="rect"  href="images/photos/top10/AvesnoisPhotoA4.jpg">
</map>
		 
<div id="Villages"><img id="photo2" src="images/photos/Villes.jpg" usemap="#vill" border="0"></div>		 
<map name="vill">
 <area rel="prettyPhoto[vill]" shape="rect" coords="0,0,265,165" href="images/photos/Villages/AvesnoisPhotoB1.jpg">
<area rel="prettyPhoto[vill]" shape="rect" href="images/photos/Villages/AvesnoisPhotoB2.jpg">
</map>
		 
<div id="Mon"><img id="photo3" src="images/photos/Monaut.jpg" usemap="#Mon1" border="0"></div>	
<map name="Mon1">
<area rel="prettyPhoto[Mon1]" shape="rect" coords="0,0,265,165" href="images/photos/Automne/AvesnoisPhotoC1.jpg">
<area rel="prettyPhoto[Mon1]" shape="rect" href="images/photos/Automne/AvesnoisPhotoC2.jpg">
<area rel="prettyPhoto[Mon1]" shape="rect" href="images/photos/Automne/AvesnoisPhotoC3.jpg">
</map>
	
<div id="Clochers"><img id="photo4" src="images/photos/Nosclo.jpg" usemap="#cloc" border="0"></div>
<map name="cloc">
<area rel="prettyPhoto[cloc]" shape="rect" coords="0,0,265,165" href="images/photos/Nosclo.jpg">
</map>
	
<div id="Sun"><img id="photo5" src="images/photos/Sun.jpg" usemap="#sun1" border="0"></div>
<map name="sun1">
<area rel="prettyPhoto[sun1]" shape="rect" coords="0,0,265,165" href="images/photos/Sun/AvesnoisPhotoE1.jpg">
<area rel="prettyPhoto[sun1]" shape="rect" href="images/photos/Sun/AvesnoisPhotoE2.jpg">
</map>
	
<div id="Divers"><img id="photo6" src="images/photos/Divers.jpg" usemap="#div1" border="0"></div>
<map name="div1">
<area rel="prettyPhoto[div1]" shape="rect" coords="0,0,265,165" href="images/photos/Divers/AvesnoisPhotoF1.jpg">
<area rel="prettyPhoto[div1]" shape="rect" href="images/photos/Divers/AvesnoisPhotoF2.jpg">	
		 
</div>
</section>


Et voici le code CSS =>

#Top10
{
 background-image: url("images/photos/CadrePhototop10.png");
 display: inline-block ;
 margin-left:4.5% ;
 margin-top: 10% ;
 width: 265px;
 height: 165px;
}

#Villages
{
 background-image: url("images/photos/CadrePhotoVV.png");
 display: inline-block ;
 margin-left:5% ;
 width: 265px;
 height: 165px;
}

#Mon
{
 background-image: url("images/photos/CadrePhoto1mon.png");
 display: inline-block ;
 margin-left:5% ;
 width: 265px;
 height: 165px;
}

#Clochers
{
 background-image: url("images/photos/CadrePhoto1lesclochets.png");
 display: inline-block ;
 margin-left:4.5% ;
 margin-top: 8% ;
 width: 265px;
 height: 165px;
}

#Sun
{
 background-image: url("images/photos/CadrePhoto1sun.png");
 display: inline-block ;
 margin-left:5% ; 
 width: 265px;
 height: 165px;
}

#Divers
{
 background-image: url("images/photos/CadrePhoto1Divers.png");
 display: inline-block ;
 margin-left:5% ; 
 width: 265px;
 height: 165px;
}

#photo1 
{
 padding-top:7px;
 padding-left:7px;
}

#photo2
{
 padding-top:7px;
 padding-left:7px;
}

#photo3
{
 padding-top:7px;
 padding-left:7px;
}

#photo4
{
 padding-top:7px;
 padding-left:7px;
}

#photo5
{
 padding-top:7px;
 padding-left:7px;
}

#photo6
{
 padding-top:7px;
 padding-left:7px;
}

#photo1:hover
{
 opacity:0.4;
 filter:alpha(opacity=40);
}

#photo2:hover
{
 opacity:0.4;
 filter:alpha(opacity=40);
}

#photo3:hover
{
 opacity:0.4;
 filter:alpha(opacity=40);
}

#photo4:hover
{
 opacity:0.4;
 filter:alpha(opacity=40);
}

#photo5:hover
{
 opacity:0.4;
 filter:alpha(opacity=40);
}

#photo6:hover
{
 opacity:0.4;
 filter:alpha(opacity=40);
}


Sous IE 8+ et Chrome 10+ je n'est pas de problème car le rendu est bon, par contre quand je passe sous Firefox :

Les attributs CSS "Display:Inline-block" et "Opacity: 0.4" sont dissipé, apparemment à cause de la lightbox utilisé.

Question: Avez-vous une solution a ce problème ?
Modifié par ServietSky-141 (14 Mar 2012 - 16:35)
Modérateur
Bonjour, tu as des <map> entre tes divs. En tout cas sous firfox la feuille de style par défaut les considère comme des éléments blocks, ce qui cause cela.

Tu devrais alléger ton css. Tes images qui sont des images de contenu devraient être faits avec une balise img ce qui devrait t'éviter de redéclarer 20x la même définition css...
Pour ce qui est du CSS effectivement tu as raisons, cela vas me faire gagner du temps !

Par contre pour les balises <map> je suis obliger de les faire apparaître pour charger le contenu de ma galerie photo.

CF le site de la lightBox => ici

Y a t-il une solution pour arriver au même rendu que Chrome et IE ?
Modérateur
Les forcer en inline


map {
 display: inline-block;
}

Modifié par kustolovic (14 Mar 2012 - 17:42)
Sujet clos
Aller à