[CSS] Afficher des tabs jolis et proprement.

Afficher des tabs jolis et proprement. [CSS] - HTML/CSS - Programmation

Marsh Posté le 24-07-2006 à 14:59:17    

Je suis pas loin de ce que je veux avoir (i.e. un truc qui ressemble à ça, mais sans la gruge du on met une border sous le <ul>, puisque c'est complètement déguelasse dés qu'on aggrandis la fenêtre sur la droite : le border-bottom du ul va jusqu'au bout de la page à droite....)
 
j'ai donc fait cette css :
 

Code :
  1. BODY {
  2. background-color: rgb(240, 240, 240);
  3. background-image: url("../images/back.png" );
  4. background-repeat: repeat-x;
  5. }
  7. div.title {
  8. font-weight: bolder;
  9. font-size: 55px;
  10. font-family: serif;
  11. text-transform: uppercase;
  12. text-decoration: underline overline;
  13. text-align: center;
  14. display: block;
  15. text-shadow: blue;
  16. }
  18. div.content {
  19. padding: 7px;
  20. margin: 0 7px 7px 7px;
  21. border-style: solid;
  22. border-width: 1px 1px 1px 1px;
  23. position: relative;
  24. top: 1px;
  25. background-color: rgb(245, 245, 245);
  26. }
  28. div.top_tab,div.bottom_tab {
  29. z-index: +1;
  30. display: inline;
  31. margin-left: 20px;
  32. border-style: solid;
  33. border-width: 1px 1px 1px 1px;
  34. padding: 2px 4px;
  35. }
  37. div.top_tab {
  38. background-color: rgb(245, 245, 245);
  39. border-bottom-color: rgb(245, 245, 245);
  40. }
  42. div.bottom_tab {
  43. background-color: rgb(220, 220, 220);
  44. }


 
que je teste avec cette page html:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5.  <title>Portail Trafic</title>
  6.  <style type="text/css">@IMPORT url("../style/portail.css" );</style>
  7. </head>
  8. <body>
  9.  <div class="title">
  10.   Trafic
  11.  </div>
  12.  <div class="top_tab">
  13.   top
  14.  </div>
  15.  <div class="bottom_tab">
  16.   bottom1
  17.  </div>
  18.  <div class="bottom_tab">
  19.   bottom2
  20.  </div>
  21.  <div class="content">
  22.   blablabla <br/>
  23.   blablabla <br/>
  24.   blablabla <br/>
  25.   blablabla <br/>
  26.   blablabla <br/>
  27.   blablabla <br/>
  28.   blablabla <br/>
  29.   blablabla <br/>
  30.   blablabla <br/>
  31.   blablabla <br/>
  32.   blablabla <br/>
  33.   blablabla <br/>
  34.   blablabla <br/>
  35.   blablabla <br/>
  36.   blablabla <br/>
  37.   blablabla <br/>
  38.   blablabla <br/>
  39.   blablabla <br/>
  40.   blablabla <br/>
  41.  </div>
  42. </body>
  43. </html>


 
le problème, c'est qu'il y a un border sous le tab top. alors qu'il ne devrait pas... (en tout cas, je veux pas :o )
 
j'ai essayé de jouer avec le z-index des tabs et du content, mais rien à faire. si je mets -1 pour le content, il passe sous le body, donc il disparait...
et +/-1 sur les tab ne change rien, pareil en mettant 1 et 2 à l'un ou à l'autre (tabs ou content)...
 
bref, si vous avez des idées... merci !
 
nota : c'est ma première css, pas tapai...


---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris
Reply

Marsh Posté le 24-07-2006 à 14:59:17   

Reply

Sujets relatifs:

Leave a Replay

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