créer un menu fait d'images avec un effet de hover en css

24 juin 2006 à 11:55:18

Salut à tous

, je n'arrive pas à construire un menu horizontal fait d'images avec rollhover.

Je m'explique

:

je veux obtenir le menu de la page suivante http://www.nba-team.com/exemple_003.html
le menu de cette page est en javascript, je voudrais le même en css et html

pour le moment je n'arrive qu'au résultat suivant :
http://www.nba-team.com/test.html

voici le code que j'ai pour le moment en html et css :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>wii-gamers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<style type="text/css">

</style>

<body>

<div class="conteneur">
<div class="haut"></div>
<div class="centre">

<div id="menu"/>

<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
<div id="image4"></div>
<div id="image5"></div>
<div id="image6"></div>
<div id="image7"></div>

</div>

<div class="droite">

<h1><br/>Bienvenue sur wii-gamers, site consacré à la prochaine console révolutionnaire de nintendo.</h1>

<p><b>La wii et sa manette devraient nous apporter une imertion excelente dans ses doom like. C'est Ubisoft qui ouvre le bal avec Red Steel, que ce soit avec un flingue ou un sabre, ce jeu paraît tout simplement génial.</b></p>
<p><center><hr width="750"></center></p>

<p><img class="cadleft" alt="wii-gamers" src="images/zap2.jpg"/>
<br/><b><u> ° A découvrir sur wii-gamers :</u></b>

<br/><br/><br/>

- Vous pourrez lire les news sur la page d'accueil et ainsi découvrir les nouvelles sorties de jeux.

<br/><br/>
- Un dossier complet sur les fonctionalités (= qualités <b>

</b>) de la wii, ses caractéristiques, sa manette, son prix, ect...

<br/><br/>

- Les premiers jeux qui vont sortir, et c'est du solide
car les fonctions de la manette semblent déjà très bien exploitées dans des gameplays très riches.
Vous pourrez alors découvrir leses jeux tels que le nouveau Zelda Twilight Princess (s'annonçant comme le meilleur de la série), Super Smash Bros. Brawl, Metroid Prime 3, Red stell, Tony Hawks Downhill Jam et plein d'autres !

<br/><br/>

- La rubrique des liens vous permettra de découvrir tous les sites traitant de jeux vidéos qui ont tapé dans l'oeil de wii-gamers.

<br/><br/>

- Sans oublier le forum, où toutes vos réactions sont attendues.
N'hésitez pas à nous donner votre avis, à balancez une news ou venez simplement faire un petit tour dans ses différentes catégories.

<br/><br/>
<b>Bonne visite.</b>
<br/>
<center><hr width="750"></center><br/>
</p>

<p><br/><br/><center><img class="cadrimage" alt="wii-gamers" src="images/intro.jpg"/></center><br/></p>

</div>
</div>

<div class="bas"></div>
</div>

</body>
</html>

il ne marche donc pas

, je voudrais que les images s'alignent horizontalement.

merci

har1bo

24 juin 2006 à 13:56:22

Rajoute la propriete inline et sa devrait etre bon

Okin

24 juin 2006 à 14:08:14

Essaye de mettre des span au lieu des divs, non ?

https://www.guide-tnt.fr - https://www.worldwar.fr - https://www.easy-budget.fr

jaminy

24 juin 2006 à 14:55:13

je sais pas me servir des span

que dois-je ajouter concrètement avec la propriété inline

j'ai essayé

display:inline;

mais ça ne marche pas

edit : inline ne marche pas, que dois-je faire avec des span ?

Okin

24 juin 2006 à 15:24:18

pour te servir des span il n'y a rien de plus simple : <span style="image1"></span> etc..

https://www.guide-tnt.fr - https://www.worldwar.fr - https://www.easy-budget.fr

primmo

24 juin 2006 à 15:28:57

Les span ça s'utilise comme les div .
Je pense que tu te complique un peu, c'est comme même plus simple en JS

jaminy

24 juin 2006 à 16:36:45

ok, ben avec les span ça marche po

mais je veux quand même me srvir du css

har1bo

24 juin 2006 à 16:42:42

#menu li
{
display:inline;
}

Essaie,c'est comme ça que je fait...
(Le Code de chez moi:

#speedbarre {

margin-left: 0px;
margin-bottom: 20px;
padding: 0px;

width: 760px;
color:#0000ff;
border: 3px solid #CDAE33 ;
background-color:rgb(234,193,79);
background-image:url("../images/menuu.png");
background-repeat: repeat-x;
font-family: Kartika;
font-size: 9pt;

}

#sepeedbarre ul {
list-style-type : none; /* Car sinon les puces se placent n'importe où */
margin : 0;
padding : 0;
}

#speedbarre li {
padding : 0 2.5em; /* Pour espacer les boutons entre eux */
display : inline;

}
#speedbarre a {

color:#0000ff;
text-decoration:none;
font-family: "Trebuchet MS";
}
#speedbarre a:hover
{

color:#4A540B;
text-decoration:underline;
background-image: url("../images/liens.png");
}

gcyrillus

25 juin 2006 à 23:53:02

bonjour,

1ere chose a faire , si tu veux un menu , c'est de te servir de balise <a> et de les mettre dans une liste ! .

tes images ayant une taille connue , tu peut donc determiné a l'avance la largeur du menu, et le centre en le dimensionnant et en lui donnant un

margin:auto;

en reprennat le css que tu as deja fait , mais en le modifiant et en l'appliquant aux balises <a> (balise de lien necessaire et ou l'attribut ":hover" fonctionne aussi dans IE) tu as toute les chances d'avoir un menu qui marche

.
voici la base de ton css avec des ajouts (en mettant en float tes balises <a> tu peut leur données une taille . ):

#image1
{float:left;
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/accueil2.jpg);
}
#image1:hover
{

width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/accueil.jpg);
}

#image2
{float:left;

width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/la_wii2.jpg);
}
#image2:hover
{
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/la_wii.jpg);
}

#image3
{float:left;
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/les_jeux2.jpg);
}
#image3:hover
{
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/les_jeux.jpg);
}

#image4
{float:left;
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/liens2.jpg);
}
#image4:hover
{
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/liens.jpg);
}

#image5
{float:left;
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/dossiers2.jpg);
}
#image5:hover
{
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/dossiers.jpg);
}

#image6
{float:left;
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/contact2.jpg);
}
#image6:hover
{
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/contact.jpg);
}

#image7
{float:left;
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/le_forum2.jpg);
}
#image7:hover
{
width: 100px;
height: 50px;
background: url(http://www.nba-team.com/images/le_forum.jpg);
}

#menu

{
width:710px; /* on dimensionne le menu */
margin:auto;/* on centre le menu */
list-style-type:none;/* on retire les puces */
}

#menu a

{text-decoration:none;}/* pour virer le soulignement sous l'espace */
#menu li

{display:inline;}/* pour aligner horizontalement les <li> */

bonne continuation.

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui