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 :
- BODY {
- background-color: rgb(240, 240, 240);
- background-image: url("../images/back.png" );
- background-repeat: repeat-x;
- }
- div.title {
- font-weight: bolder;
- font-size: 55px;
- font-family: serif;
- text-transform: uppercase;
- text-decoration: underline overline;
- text-align: center;
- display: block;
- text-shadow: blue;
- }
- div.content {
- padding: 7px;
- margin: 0 7px 7px 7px;
- border-style: solid;
- border-width: 1px 1px 1px 1px;
- position: relative;
- top: 1px;
- background-color: rgb(245, 245, 245);
- }
- div.top_tab,div.bottom_tab {
- z-index: +1;
- display: inline;
- margin-left: 20px;
- border-style: solid;
- border-width: 1px 1px 1px 1px;
- padding: 2px 4px;
- }
- div.top_tab {
- background-color: rgb(245, 245, 245);
- border-bottom-color: rgb(245, 245, 245);
- }
- div.bottom_tab {
- background-color: rgb(220, 220, 220);
- }
|
que je teste avec cette page html:
Code :
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
- <title>Portail Trafic</title>
- <style type="text/css">@IMPORT url("../style/portail.css" );</style>
- </head>
- <body>
- <div class="title">
- Trafic
- </div>
- <div class="top_tab">
- top
- </div>
- <div class="bottom_tab">
- bottom1
- </div>
- <div class="bottom_tab">
- bottom2
- </div>
- <div class="content">
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- blablabla <br/>
- </div>
- </body>
- </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 
)
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
