Wer kann mir bei dieser Navigation helfen?

GTfreak

Hallo,

ich habe eine sehr Navigation für meinen Blog aufgetrieben und schon kräftig umgebaut (http://www.panik-crew.de) . Allerdings möchte ich die Tabs umdrehen, aber ich weiss nicht wie (wenn ich die gifs umdrehe, sind sie weg). Ich habe schon jede Möglichkeit in der style.css ausprobiert, aber es geht nicht. Kann mir jemand helfen?

Hier der Code aus der style.css:

Code

/*- Menu Tabs F--------------------------- */


    #tabsF {
      float:left;
      width:95%;
      background:url("/images/kubrickbgwide.jpg") no-repeat left top;
      font-size:125%;
      line-height:normal;
      border-bottom:1px solid #ffffff;
      }
    #tabsF ul {
      margin:0;
      padding:0px 0px 0 25px;
      list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#fff;
      }
    #tabsF a:hover {
      color:#a1a1a1;
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      color:#000000;
      background-position:100% -42px;
      }

Alles anzeigen

und hier der Code aus demr Header:

Code

<div id="tabsF">
  <ul>
    <li><a href="/" title="Homepage Codec-Blog"><span>Home</span></a></li>
    <li><a href="/category/freecodec/" title="Kategorie mit allen News zum Thema 'Codecs'"><span>Codec-News</span></a></li>
    <li><a href="/category/multimedia/" title="Alle News zum Thema 'Multimedia'"><span>Multimedia</span></a></li>
    <li><a href="/category/intern/" title="Alle internen News zu FreeCodec.net, Codec-Blog und Codec-Hilfe.de"><span>Intern</span></a></li>
    <li><a href="/category/offtopic/" title="News mit Off Topic-Themen"><span>Off Topic</span></a></li>
    <li><a href="/impressum/" title="Impressum Codec-Blog"><span>Impressum</span></a></li>
    
  </ul>
</div>

Alles anzeigen

cu,
GTFreak

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

GTfreak

Ich habe jetzt herausgefunden:
- Die gifs um 180° drehen und umbenennen (left= right und umgekehrt)
- alle Bezeichnungen "top" werden werden zu "bottom", dann sieht es fast schon gut aus (zumindest die Tabs stehen auf dem Kopf).

Code

#tabsF {
      float:left;
      width:95%;
      background:url("/images/kubrickbgwide.jpg") no-repeat left bottom;
      font-size:125%;
      }
    #tabsF ul {
      margin:0;
      padding:0px 0px 0 28px;
      list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("tabrightF.gif") no-repeat left bottom;
      margin:0;
      padding:0 0 0 37px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("tableftF.gif") no-repeat right bottom;
      padding:7px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#fff;
      }
    #tabsF a:hover {
      color:#a1a1a1;
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      color:#000000;
      background-position:100% -42px;
      }

Alles anzeigen

Wie mach ich aber nun den Hovereffekt?? Kann mir da je,amd helfen?

cu,
GTFreak

GTfreak

Es wäre schön, wenn mir jetzt jemand helfen könnte, denn ich bin es leid, Alleinunterhalter zu sein. Und vor allen Dingen komme ich nicht mehr weiter!!
Ich habe unter http://www.panik-crew.de nun die Naviagtion einigermassen hinbekommen, aber es fehlen noch ein paar Sachen zum kompletten Glück.

Wenn ich über den Tab fahre, erscheint eine Grafik (die ich mir gebastelt habe). Leider verutscht aber meine Grafik ein paar Pixel nach rechts, so dass links ein weisser Rand entsteht. Kann mir bitte jemand sagen, wie ich diesen Rand wegbekomme? Hier der Code...

Code

#tabsF {
      float:left;
      width:95%;
      background:url("/images/kubrickbgwide.jpg") no-repeat left bottom;
      font-size:125%;
      }
    #tabsF ul {
      margin:0;
      padding:0px 0px 0 28px;
      list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("tabrightF.gif") no-repeat left bottom;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("tableftF.gif") no-repeat right bottom;
      padding:7px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#fff;
      }
    #tabsF a:hover {
      color:#a1a1a1;
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      color:#000000;
      background:url("tabmidF.gif");
      background-position:0% 67px;
      }

Alles anzeigen

Vielken Dank,
GTFreak

Jeriko

Du kannst nicht erwarten dass wenn du hier einen Beitrag mit einem Problem erstellst dass die Leute nur darauf warten, dir dabei zu helfen. Es sieht eigentlich eher so aus dass nur dann geantwortet wird, wenn man spontan eine Lösung hat.

Dann aber pampig zu werden wenn man eben keine Antwort kriegt ist nicht der Sinn der Sache. Daher an dieser Stelle von mir auch keine Lösung.

Gruß Jeriko

GTfreak

Ich bastle nun schon seit Mitte Februar (jeden Tag 2 Std. am Laptop, bin Pendler) an dieser Navi und bin ehrlich gesagt schon genervt, da ich CSS nicht beherrsche. Tut mir leid, wenn es rüberkommt, aber ich bin echt am Ende...

Nochmals sorry,
GTFreak

GTfreak

Next step...
Nach einer langen Nacht am Sonntag habe ich es nun geschafft:

Code

#tabsF {
      float:left;
      width:95%;
      background:url("/images/kubrickbgwide.jpg") no-repeat left bottom;
      font-size:125%;
      }
    #tabsF ul {
   margin:0;
   padding:0 0 0 25px;
   list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("tabrightF.gif") no-repeat left bottom;
      margin:0;
      padding:0 0 0 20px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("tableftF.gif") no-repeat right bottom;
      padding:7px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#fff;
      }
    #tabsF a:hover {
      color:#000000;
      background:url("tabmidF.gif");
      background-position:0% -17px;
      }
    #tabsF a:hover span {
      color:#000000;
      background-position:0% 67px;
      }

Alles anzeigen

Nun versuche ich nur noch, den jeweils aktiven Reiter anders zu markieren, z.B. dass der Reiter dann dauerhaft blau bleibt.

cu,
GTFreak

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Wer kann mir bei dieser Navigation helfen?

Jetzt mitmachen!