Bonjour, j'ai un petit soucis avec un de mes sites.
Je réalise une page avec des offres d'emploi a affichage dynamique géré par Javascript, visible a cette adresse: http://www.maia-rdtc.com/recrutement2.php. Vous remarquerez que j'essaye de creer un menu horizontal permettant d'avoir un meilleur affichage des différentes catégories proposant des offres d'emploi. Or, j'ai du mal avec le positionnement de mes onglets, je n'arrive pas a changer la taille de mes liens.
Voici le code du "menu":
Code :
- <div class="domtab">
- <ul class="domtabs">
- <li class="onglet"><a href="#clients">Clients</a></li>
- <li class="onglet"><a href="#partenaires">Partenaires</a></li>
- <li class="onglet"><a href="#maia">Maia</a></li>
- </ul>
- <div>
- <h2><a name="clients" id="clients" style="text-decoration: none;">Clients</a></h2>
- ...
- ...
- ...
- <h2><a name="partenaires" id="partenaires" style="text-decoration: none;">Partenaires</a></h2>
- ...
- ...
- ...
- <h2><a name="maia" id="maia" style="text-decoration: none;">MAIA R&Dtc</a></h2>
- </div>
- </div>
|
Et voici le CSS:
Code :
- div.domtab li
- {
- display: inline;
- height: 30px;
- border: 1px solid green;
- }
- .domtabs
- {
- height: 30px;
- border: 1px solid blue;
- }
- .onglet
- {
- margin-top: 10px;
- padding: 2px 7px 10px 7px;
- height: 30px;
- width: 100%;
- background: url('img/onglet.gif') no-repeat right top;
- }
- .onglet a
- {
- text-decoration: none;
- height: 100%;
- width: 100%;
- }
|
Je n'arrive pas a agrandir la taille des liens dans le menu afin d'avoir un affichage complet des images présentes en background, ce qui me permettrait d'avoir un réel effet de menu a onglets...
PS: les bordures et les couleurs ne sont pas définitives, mais me servent uniquement a tester le positionnement des différents éléments