28173 sujets

CSS et mise en forme, CSS3

Problème Css avec les Block (gestion de zones d'image)

Bonjour a tous,
Voila, j'ai un petit problème avec une carte du monde j'ai utilisé les css afin de "separer" les differents continent j'utilise pour ce faire une liste Html de base... et un css possedant les différentes coordonnées permettant de selectionner les zones a mettre en surbrillance car je souhaite effectuer sur ces différents continent une sorte de rollover.

mon souci est qu'un block vient se superposer (voir image) :
le block A ce superpose sur le Block B je ne peut donc plus utilisé le 
a hover
css permettant le rollover sur le block B

upload/11365-block1.JPG

ainsi j'ai divisé ma zone en trois block A, B, et C (voir image 2), hors je me trouve face a un souci de taille... je n'arrive pas a faire en sorte que lors du passage de sourissur le block A, les blocs A et C passent en surbrillance
en meme temps (de même lors d'un passage sur le bloc C) .

ces deux zones (A et C) doivent reagir identiquement comme si il ne s'agissait que d'un bloc.

upload/11365-block2.JPG

dur dur a expliquer j'espere que vous pourrez grandement m'aider
bonjour ,

Une piste peut être ?

Fais deux blocs :

1 qui va etre A + C + place occupée par B avec la propriété zindex=0

1 qui va etre B avec zindex=100

reviens nous si ca fonctionne ....ou pas
Salut,

Je ne sais pas si j'ai tout compris mais ...
  <style type="text/css"> 

#conteneur{
width: 500px;
height: 500px;
border: 1px solid black;
margin: auto;
position: relative;
}

a{
display: block;
}

a:hover{/* big IE6 */
background: none;
}

a span.bloc_a{
width: 300px;
height: 500px;
position: absolute;
top: 0;
right: 0;
background: blue;

}

a span.bloc_c{
display: block;
width: 200px;
height: 200px;
background: red;

}

#bloc_b{
width: 200px;
height: 300px;
background: green;

}

a:hover span.bloc_a, a:hover span.bloc_c{

background: pink;

}
  </style>
 


</head>
<body>
<div id="conteneur">
	<a href="#" >
		<span class="bloc_a">
		</span>
		<span class="bloc_c">
		</span>	
	
	</a>
	<div id="bloc_b">
	</div>
</div>
</body>


Tu peux aussi utiliser float: right pour le bloc a, mais sou IE6, il se peut qu'il y ait des débordements a cause du bug des 3px
Modifié par ghost (19 Mar 2007 - 18:31)
Sujet clos
Aller à