28172 sujets

CSS et mise en forme, CSS3

Problème de positionnement d'une série de rollovers à l'horizontale

Bonjour à tous,

J'aimerais positionner une série d'images à l'horizontal possédant chacune un rollover différent.

Ce lien montre l'effet du rollover (IE voir bouton 1 à gauche)

Ce lien montre le positionnement final que j'aimerais avoir avec chacun des boutons possédant un rollover.

Voici mon code xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="site.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
<div id="page">
  <div id="wrapper">
    <div id="bloc">
      <img src="lines.gif" width="589" height="600" border="0" alt=""/>
	<div id="menu">
	<div id="button1"><a href="#"></a></div>
	<img src="thumb2.gif" width="42" height="42" border="0" alt=""/>
	<img src="thumb3.gif" width="42" height="42" border="0" alt=""/>
	<img src="thumb4.gif" width="42" height="42" border="0" alt=""/>
	<img src="thumb5.gif" width="42" height="42" border="0" alt=""/>
	<img src="thumb6.gif" width="42" height="42" border="0" alt=""/>
	<img src="thumb7.gif" width="42" height="42" border="0" alt=""/>
	</div>
    </div>		  
  </div>
</div>
</body>
</html>


Code CSS:
body , html {
overflow:hidden;
margin: 0;
height:100%;
background-color: #000000;
}

#page {
height: 100%;
}

#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
}

#bloc{
height: 550px;
margin-top: 10px;
text-align:right;
}

#menu{
margin-top: -460px;
margin-right: 16px;
margin-left: 5px;
}

#button1 a {   
position:absolute;  
background:  url(thumb1.gif);   
width: 42px;   
height: 42px;   
}

#button1 a:hover {   
background:  url(thumb1over.gif); 
}


Est-ce fesable, suis-je dans la bonne direction? J'imagines que non... Smiley murf
Modifié par Alec Effeil (12 May 2009 - 06:48)
Sujet clos
Aller à