28172 sujets

CSS et mise en forme, CSS3

Menu graphique avec Roll-hover

Bonjour je me suis basé sur un tutoriel du livre de Raphaël Goetter (Css 2 Pratique du design web) Page 183.
Mon menu fonctionne bien seulement, je voudrais faire afficher les liens horizontalement.
Est-ce que quelq'un d'entre vous peux m'aider ou me référer un article ou un billet déjà présent sur le forum?
Où est mon erreur,dois-je rajouter une balise?



http://binarysim.lescigales.org/nav/


<ul id="tab-nav">
    <li><a href="#" title="Accueil" accesskey="1">Accueil</a></li>
    <li><a href="#" title="À propos" accesskey="2">À propos</a></li>
    <li><a class="current" href="#" title="WebLog" accesskey="3">WebLog</a></li>
    <li><a href="#" title="Contact" accesskey="4">Contact</a></li>
</ul>

Le fichier CSS

ul#tab-nav {
margin:0;
padding:0;
text-align:center;
height:44px;
width:157px;
}

ul#tab-nav li{
display:inline;
float:left;
height:44px;
list-style:none;
}

ul#tab-nav  li a{
display:block;
line-height:44px;
color:#efefef;
font-family:georgia;
font-size:16px;
font-weight:bold;
text-decoration:none;
height:44px;
width:157px;
background:transparent url(img/menuv.png) no-repeat 0 0;

}
ul#tab-nav  li a:hover{
background:transparent url(img/menuv.png);
background-position:0% -44px;
}

ul#tab-nav li a.current{
background:transparent url(img/menuv.png);
background-position:0% -88px;
}
ul#tab-nav li a.current:hover{
background:transparent url(img/menuv.png);
background-position:0% -44px;
}

/*Merci de votre aide*/

Modifié par Binary (08 Feb 2009 - 00:38)
Hello,


ul#tab-nav {
height:44px;
margin:0;
padding:0;
text-align:center;
[#red][b]width:157px;[/b][/#]
}

C'est peut-être un peu étroit pour contenir quatre liens de 157px également, non ? Smiley cligne

Bonne continuation,
Cdt,
Sylvain
J'ai trouvé la réponse a ma question parmis les tutoriels sur le site.

Désolé des quelques KO que mon message prend sur votre BDD et bonne continuation à tous.
Modifié par Binary (08 Feb 2009 - 03:23)
Sujet clos
Aller à