Probleme positionnement de menu a onglets

Probleme positionnement de menu a onglets - HTML/CSS - Programmation

Marsh Posté le 14-03-2007 à 16:04:39    

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 :
  1. <div class="domtab">
  2. <ul class="domtabs">
  3.  <li class="onglet"><a href="#clients">Clients</a></li>
  4.  <li class="onglet"><a href="#partenaires">Partenaires</a></li>
  5.  <li class="onglet"><a href="#maia">Maia</a></li>
  6. </ul>
  7. <div>
  8.  <h2><a name="clients" id="clients" style="text-decoration: none;">Clients</a></h2>
  9.  ...
  10.  ...
  11.  ...
  12.  <h2><a name="partenaires" id="partenaires" style="text-decoration: none;">Partenaires</a></h2>
  13.  ...
  14.  ...
  15.  ...
  16.  <h2><a name="maia" id="maia" style="text-decoration: none;">MAIA R&Dtc</a></h2>
  17.  </div>
  18. </div>


 
 
 
Et voici le CSS:
 

Code :
  1. div.domtab li
  2. {
  3.  display: inline;
  4.  height: 30px;
  5.  border: 1px solid green;
  6. }
  7. .domtabs
  8. {
  9.  height: 30px;
  10.  border: 1px solid blue;
  11. }
  12. .onglet
  13. {
  14.  margin-top: 10px;
  15.  padding: 2px 7px 10px 7px;
  16.  height: 30px;
  17.  width: 100%;
  18.  background: url('img/onglet.gif') no-repeat right top;
  19. }
  20. .onglet a
  21. {
  22.  text-decoration: none;
  23.  height: 100%;
  24.  width: 100%;
  25. }


 
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

Reply

Marsh Posté le 14-03-2007 à 16:04:39   

Reply

Marsh Posté le 14-03-2007 à 16:15:24    

Vu que tu as mis les LI en inline, il n'est plus possible de préciser leur largeur. Il faut les laisser en block ou à la rigueur en inline-block (mais c'est très mal supporté) et les positionner en flottant (par exemple).


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 14-03-2007 à 16:55:58    

ok,
 
mais dans ce cas, n'est-il pas possible de refaire le menu (en modifiant les CSS) afin d'obtenir des onglets avec les images completes en arriere-plan (95px*25px), et surtout alignes a l'horizontal?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed