Tabs



  • Hallo Leute,

    brauche jetzt auch mal Hilfe

    http://img3.fotos-hochladen.net/uploads/110307fslrz0bsnh2e873l.png

    Wie würdet ihr das lösen.
    Bin leider nicht so CSS-Fit



  • Hm, prinzipiell mit 2 Grafiken. Eine mit und eine ohne Spitze. Es ist natürlich auch möglich die Spitze als einzelnes Element zu führen. Gibt es Beschränkungen für die techniken? Kein JavaScript oder ähnliches?



  • Nein keine Beschränkung.

    Ich habe auch schon versucht mit jquery aber das sieht nicht so aus wie es soll.


  • Mod



  • 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.



  • @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.



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


  • Mod

    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.



  • Danke Dir. Werde mich mal daran versuchen.



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



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


  • Mod

    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.



  • Danke habe es hinbekommen.
    Ihr seid die besten.
    👍


Anmelden zum Antworten