Tabs

Shade Of Mine

http://www.cssplay.co.uk/menus/pointer.html

PRIEST

Die einfachste Variante ist wohl eben die zwei Bilder methode.

z.B.

ul { heigt:80px; }
li {float:right;}
li a {background:url('1.png');line-height:80px;display: block;}
li a.current {background:url('1.png');line-height:80px;display: block;}

Jetzt nur mal aus dem Kopf raus geschrieben.

Unix-Tom

@Shade: Danke sieht ja Grundsätzlich gut aus aber das kann man nicht so anpassen wie ich es brauche. Vorallem ist der Pfeil unten und ich brauche ihn oben.

@Priest: Das habe ich schon versucht mit den 2 Bildern. Bin aber nicht so der CSS-Freak

Problem bei den LI.
Wenn es einen Border hat und der ist Transparent dann nimmt er die Farbe des Hintergrundes an und nicht des Seitenhintergrundes.
Dies würde nur bei DIV gehen.

PRIEST

Für was benötigst du einen Border? Ich kenn ja die ganzen umstände nicht, da kann man immer schlecht helfen.

Shade Of Mine

Unix-Tom schrieb:

@Shade: Danke sieht ja Grundsätzlich gut aus aber das kann man nicht so anpassen wie ich es brauche. Vorallem ist der Pfeil unten und ich brauche ihn oben.

Der Pfeil wird per CSS gemacht. Über die Border Farben. Du könntest hier auch einfach ein Bild verwenden.

<html>
<head>    
    <style type="text/css">    
.menu {
  padding:0; 
  margin:0; 
  list-style-type:none;
  white-space:nowrap;
  }
.menu li {
  float:left;
  min-width:100px;
  }
.menu a {
  position:relative;
  display:block; 
  text-decoration:none; 
  min-width:100px; 
  float:left; 
  }
* html .menu a {
  width:100px;
  }
.menu a span {
  display:block; 
  color:#000; 
  background:#c4c4c4; 
  border:1px solid #fff; 
  border-width:2px 1px; 
  text-align:center; 
  padding:4px 16px; 
  cursor:pointer;
  }
* html .menu a span {
  width:100px; 
  cursor:hand; 
  width:66px;
  }
.menu a b {
  display:block; 
  border-top:2px solid #06a;
  }
.menu a em {
  display:none;
  }
.menu a:hover {
  background:#fff;
  }
.menu a:hover span {
  color:#fff; 
  background:#08c;
  }
.menu a:hover em {
  display:block; 
  overflow:hidden; 
  border:6px solid #06a;
  border-color: #06a #fff;
  border-width: 0px 6px 6px 6px;
  position:absolute;
  left:50%; 
  margin-left:-6px;
  margin-top:-6px;
  }
    </style>
</head>
<body>

  <ul class="menu">
  <li>
    <a href="#nogo">
      <em></em><b><span>Tab One</span></b>
    </a>
  </li>
  <li>
    <a href="#nogo">
      <em></em><b><span>Tab Two</span></b>
    </a>
  </li>
  <li>
    <a href="#nogo">
      <em></em><b><span>Tab Three: Long Tab!!</span></b>
    </a>
  </li>
  <li>
    <a href="#nogo">
      <em></em><b><span>Tab Four</span></b>
    </a>
  </li>
</ul>

</body>
</html>

Hier habe ich das ganze mal kurz nur umgedreht - also selbes layout nur der Pfeil drüber statt drunter.

Unix-Tom

Danke Dir. Werde mich mal daran versuchen.

PRIEST

Ist auf jeden Fall eine schöne Lösung mit "<em></em>"!

Unix-Tom

Bist auf das das ich nicht weiß wie ich nun den Pfeil anpassen kann.
Ein Bild da rein geht ja nicht.

Shade Of Mine

Unix-Tom schrieb:

Bist auf das das ich nicht weiß wie ich nun den Pfeil anpassen kann.
Ein Bild da rein geht ja nicht.

Entweder du packst einen img-tag in den em-tag oder du setzt ein background-image im em:

display:block; 
  width:10px;
  height:10px;
  background-image: url(arrow.png);
  position:absolute;
  left:50%; 
  margin-left:-5px;
  margin-top:-5px;

Die Idee ist eigentlich simpel:

Du hast das em Element als block Element - was bedeutet dass es einen linebreak erzwingt. durch left:50% und margin-left:-5px wird es (innerhab des parents - dem a-tag) zentriert. Je nachdem ob das em nun vor oder nach dem span ist, ist es entweder darüber oder unter dem span.

Das em kann dabei jede beliebige Größe haben. uU willst du zB immer ein sichtbares em haben dass zB den top Border des menüs zeichnet.

Unix-Tom

Danke habe es hinbekommen.
Ihr seid die besten.