tab's (Registerkarten) mit CSS

[chmod777]

Hi!

Was ich machen möchte wird z.B. hier dargestellt:

http://www.unionec.at/tmp/css_tab.png

Es gibt diese Tabs, und wenn man daraufclickt geht darunter das zugehörige Fenster auf. Das Fenster wurde aber bereits geladen - soll heissen, die Inhalte der Tabs liegen bereits auf der Seite und werden mit dem anclicken dargestellt.

Hat da jmd einen link zu einer Anleitung?

tks

 

[sysop]

z.B CSS

DIV.tabs
{
   position                                             : relative;
   float                                                : left;
   width                                                : 100%;
   background                                           : url("tab_b.gif") repeat-x;
   background-position                                  : bottom;
   margin-bottom                                        : 0px;
   margin-top                                           : 1em;
}

DIV.tabs UL
{
   float                                                : left;
   margin                                               : 0px;
   padding-left                                         : 10px;
   list-style                                           : none;
}

div.tabs li
{
   float                                                : left;
}

DIV.tabs A
{
   float                                                : left;
   background                                           : url("tab_r.gif") no-repeat right top;
   border-bottom                                        : 1px solid #999999;
   font-size                                            : 92%;
   font-weight                                          : bold;
   text-decoration                                      : none;
}

DIV.tabs A:hover
{
   background-position                                  : 100% -150px;
}

DIV.tabs A:link, DIV.tabs A:visited,
DIV.tabs A:active, DIV.tabs A:hover
{
   color                                                : black;
}

DIV.tabs SPAN
{
   float                                                : left;
   text-align                                           : center;
   display                                              : block;
   background                                           : url("tab_l.gif") no-repeat left top;
   padding                                              : 5px 9px;
   white-space                                          : nowrap;
   min-width                                            : 1.3em;
}

DIV.tabs INPUT
{
   float                                                : right;
   display                                              : inline;
   font-size                                            : 1em;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
DIV.tabs SPAN
{
   float                                                : none;
}
/* End IE5-Mac hack */

DIV.tabs A:hover SPAN
{
   background-position                                  : 0% -150px;
}

DIV.tabs LI.current A
{
   float                                                : left;
   background-position                                  : 100% -150px;
   border-width                                         : 0px;
}

DIV.tabs LI.current SPAN
{
   float                                                : left;
   background-position                                  : 0% -150px;
   padding-bottom                                       : 6px;
}

html

<div class="tabs">
 <ul>
  <li><a href="link1"><span>Ue1</span></a></li>
  <li><a href="link2"><span>Ue2</span></a></li>
  <li class="current"><a href="link3"><span>Ue3</span></a></li>
  <li><a href="link4"><span>Ue4</span></a></li>
  <li><a href="link5"><span>Ue5</span></a></li>
 </ul>
 </div>

Die Hintergrundbilder sind eingefügt, um abgerundete Tabs zu erstellen und können auch weggelassen werden.

PS
Kann leider die Grafiken nicht hochladen, Uploads gehen nicht...

 

[chmod777]

Hey, danke!

Das ist im ansatz schon das, was ich will aber:
der tab wird angeclickt und damit KEIN link (a href) ausgelöst, sondern der bereits geladene teil der seite dargestellt...

Habe gefunden, wonach ich gesucht habe: CSS: eine Oberfläche mit Registerkarten

edit: Jetzt würde ich noch ganz gerne die Tabs als Hintergrund-Bild einfügen - kannst du mir da auf die Sprünge helfen?




tks

 

[sysop]

Im Wesentlichen ist das aber genau das Selbe wie in meinem Beispiel, es wird nur ein Anker zusätzlich gesetzt. Die Seite wird auch da komplett neu geladen. Target wird lt. W3C nicht mehr verwendet und als Fehler angezeigt, die Seite ist nicht W3C konform :mrgreen: ([Invalid] Markup Validation of http://www.wssexpert.de/Style/Examples/007/target.html - W3C Markup Validator)
Wenn du nur einen Bereich neu setzen willst, musst du JS oder Ajax verwenden und einen Layer neu laden.
Dein Beispiel macht also das Selbe wie meines. Nur werden keine Listeneinträge verwendet.

Ein Hintergrund-Bild könntest du setzen, indem du dem <a> tag per CSS ein Bild hinterlegst.

A
{
   background : url("grafik.typ") no-repeat right top;
}