pto: breite und schmale Navigations-lis

Hallo, kriege es nicht hin, dass in der Navigationsliste nicht nur breitere und schmalere Menüpunkte stehen (das klappt), sondern diese auch korrekt bei :hover funktionieren. Vielleicht kann mal jemand einen Blick werfen. Hier die
testseiteHier der Code für den Bereich:

* {  
 margin:0;  
 padding:0;  
  
 text-decoration:none;  
}  
  
  
  
ul#navi  {  
    position: relative;  
   float: left;/*  
  background:#990000;*/  
  width:100%;   /* geändert von 150px auf 100% */  
/*  min-width:80% !important;  /*  
/*  overflow: hidden;*/  
}  
  
ul#navi a {  
 /*display: inline;  
 padding:14px 5px 15px 14px;  
 */  
  
  
 color:#000;  
 font-weight:bold;  
 text-align:left;  
}  
  
.aktiv  
{background: #fff;}  
  
.small{  
    list-style:none;  
 position:relative;  
 float:left;  
  
 /* hinzugefügt um eine horizontale Ausrichtung zu erzielen */  
/* width:10.975em                   Hinzugefügt 150px / 16 = 9.375em*/  
 width: 70px;  
}  
  
.small:hover{  
    list-style:none;  
 position:relative;  
 float:left;  
  
 /* hinzugefügt um eine horizontale Ausrichtung zu erzielen */  
/* width:10.975em                   Hinzugefügt 150px / 16 = 9.375em*/  
 width: 70px;  
   background:#a33;  
   color:#fff;  
}  
  
  
ul#navi li  {  
    list-style:none;  
 position:relative;  
 float:left;  
  
 /* hinzugefügt um eine horizontale Ausrichtung zu erzielen */  
/* width:10.975em                   Hinzugefügt 150px / 16 = 9.375em*/  
 width: 9.375em;  
}  
  
/* Alle Ebenen ausblenden */  
  
ul#navi ul  ,  
ul#navi  li:hover ul ul ,  
ul#navi  li:hover  ul ul ul  {  
    list-style:none;  
 position:absolute;  
 left:-9999px;  
 background:#000;  
}  
  
ul#navi  li:hover ul {  
    list-style:none;  
         background:#d8d8d8;  
       border-left:1px solid #fff;  
          border-top:1px solid #fff;  
          border-right:1px solid #fff;  
          border-bottom:1px solid #fff;  
  
}  
  
ul#navi  li:hover ul ul {  
    list-style:none;  
  background:#929292;  
  
}  
  
ul#navi  li:hover ul ul ul {  
    list-style:none;  
  background:#696969;  
}  
  
ul#navi ul {  
    list-style:none;  
 top:auto;                    /* Neue Position definiert 16px Schriftgröße + (2 x 5px) padding = 30px / 16 = 1.875em*/  
}  
  
  
/* Einzelne Ebenen einblenden */  
ul#navi li:hover ul  {  
 left:0;  
 }  
  
  
                                 /* Neuer Deklarationsblock um die Unterpunkte präzise zu positionieren */  
ul#navi ul  li:hover  ul ,  
ul#navi ul  ul li:hover  ul  {  
 position:absolute;  
 left:100%;  
 top:0;  
 }  
  
ul#navi li:hover ul li {  
     border-top:1px solid #fff;;  
  
 }  
  
/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */  
ul#navi li:hover > a , ul#navi  ul li:hover  > a, ul#navi ul  ul  li:hover  > a, ul#navi ul  ul ul  li:hover  > a  {  
  background:#a33;  
  width: 103px;  
  color:#fff;  
}  
  
ul#navi a span {  
 float:right;  
  font-weight:normal;  
  }

Und hier das html

	        <ul id="navi">  
		  
    <li><a class="aktiv small" href="#">Home </a></li>  
    <li><a class="titel" href="#kat1">RESSORTS </a>  
        <ul id="knoten1">  
            <li><a href="#">Aktuelles </a></li>  
            <li><a href="#">Wirtschaft </a></li>  
            <li><a href="#">Kultur </a></li>  
            <li><a href="#">Wissen </a></li>  
            <li><a href="#">Medien </a></li>  
            <li><a href="#">Sport </a></li>  
        </ul>  
    </li>  
    <li><a class="titel"  href="#kat3">REGIONEN </a>  
        <ul id="knoten2">  
            <li><a href="#">Nord </a></li>  
            <li><a href="#">Ost</a></li>  
            <li><a href="#">Süd</a></li>  
            <li><a href="#">West</a></li>  
        </ul>  
    </li>  
    <li><a class="titel"  href="#kat2">AUSLAND </a>  
        <ul id="knoten3">  
            <li><a href="#">EUROPA</a>  
                <ul>  
                    <li><a href="#">ÜBERBLICK </a></li>  
                    <li><a href="#">NORD </a>  
                        <ul>  
                            <li><a href="#">Dänemark </a></li>  
                            <li><a href="#">Schweden </a></li>  
                            <li><a href="#">Norwegen </a></li>  
                        </ul>  
                    </li>  
                    <li><a href="#">OST </a></li>  
                    <li><a href="#">SÜD </a></li>  
                    <li><a href="#">WEST </a></li>  
                </ul>  
            </li>  
            <li><a href="#">NORDAMERIKA </a>  
                <ul>  
                    <li><a href="#">ÜBERBLICK </a></li>  
                    <li><a href="#">USA </a></li>  
                    <li><a href="#">CANADA </a></li>  
                </ul>  
            </li>  
            <li><a href="#">ASIEN </a>  
                <ul>  
                    <li><a href="#">ÜBERBLICK </a></li>  
                    <li><a href="#">INDIEN </a></li>  
                    <li><a href="#">JAPAN </a></li>  
                    <li><a href="#">THAILAND </a></li>  
                </ul>  
            </li>  
            <li><a href="#">AFRIKA </a>  
                <ul>  
                    <li><a href="#">ÜBERBLICK </a></li>  
                    <li><a href="#">ÄGYPTEN </a></li>  
                    <li><a href="#">LIBANON </a></li>  
                </ul>  
            </li>  
        </ul>  
    </li>  
   <li class = "small"><a class="titel"  href="#">S/L/XL </a>  
        <ul id="knoten_4" class="small">  
            <li class="small"><a href="#">S </a></li>  
            <li class="aktiv small"><a href="#">L </a></li>  
            <li class="small"><a href="#">XL </a></li>  
        </ul>  
    </li>

Gruß und Dank
pto

  1. Hallo

    Hallo, kriege es nicht hin, dass in der Navigationsliste nicht nur breitere und schmalere Menüpunkte stehen (das klappt), sondern diese auch korrekt bei :hover funktionieren.

    Ich vermute, dass deine Links beim hovern nicht gleich breit erscheinen. Wenn ich richtig liege …

    Vielleicht kann mal jemand einen Blick werfen. Hier die

    testseiteHier der Code für den Bereich:

    ul#navi a {

    /*display: inline;
    padding:14px 5px 15px 14px;
    */

    color:#000;
    font-weight:bold;
    text-align:left;
    }

      
    … ist das richtig so. Links (`<a>`{:.language-html}) sind per Definition Inline-Elemente. Sie nehmen also nur den für ihren Inhalt (meist Text) benötigten Platz ein. …  
      
    
    > ~~~css
    
    /* Hover Hinter- und Vordergrundfarbe für alle Ebenen */  
    
    > ul#navi li:hover > a , ul#navi  ul li:hover  > a, ul#navi ul  ul  li:hover  > a, ul#navi ul  ul ul  li:hover  > a  {  
    >   background:#a33;  
    >   width: 103px;  
    >   color:#fff;  
    > }
    
    

    … Keine deiner CSS-Regeln ändert am Inline-Status des Inline-Elements <a> etwas.
    Um eine gleichmäßige Größe der Links zu erreichen, müssen Inline-Elemente zu (Inline-)Blockelementen werden (siehe dazu: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=Doku, Wiki). Damit kannst du ihnen eine vom Inhalt abweichende Dimensionierung zuweisen.

    Zum stöbern: Listamatic: one list, many options

    Tschö, Auge

    --
    Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
    Terry Pratchett, "Wachen! Wachen!"
    ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
    Veranstaltungsdatenbank Vdb 0.3
  2. Om nah hoo pez nyeetz, pto!

    … finde ich sehr gelungen.

    Ich wünsche mir, dass man (zur Not auch erst nach einer Anmeldung) die angezeigten Nachrichten konfigurieren kann.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rad und Radar.

    1. Om nah hoo pez nyeetz, pto!

      … finde ich sehr gelungen.

      Ich wünsche mir, dass man (zur Not auch erst nach einer Anmeldung) die angezeigten Nachrichten konfigurieren kann.

      Matthias

      Danke! Es wird inzwischen auch recht ordentlich genutzt. Der Wunsch nach einer individuellen Konfigurierbarkeit kam schon mal von einem Nutzer. Aber da ich das Ganze vor ca. zwei Jahren nur mit ein bisschen HTML-Kenntnissen begonnen habe, um mir und vielen Nachrichten-Kollegen den Überblick zu erleichtern (was machen eigentlich die anderen so?), kann ich nur sehr langsam voranschreiten. Schon der jetzige "Relaunch" mit schönen Tooltips und möglichst responsivem Design kostet den größten Teil meiner Freizeit. Aber ich weiß, ich werde das dann auch mal demnächst in Angriff nehmen - und hier mit vielen Fragen zu Datenbanken, Sessions etc. auftauchen...

      Bis dann,
      Qapla'

    2. Ich wünsche mir, dass man (zur Not auch erst nach einer Anmeldung) die angezeigten Nachrichten konfigurieren kann.

      Matthias

      Wäre es so recht?

      http://www.fastix.org/news.php

      1. Ich wünsche mir, dass man (zur Not auch erst nach einer Anmeldung) die angezeigten Nachrichten konfigurieren kann.

        Matthias

        Wäre es so recht?

        http://www.fastix.org/news.php

        Ja, ist doch auch sehr gut. Lassen sich die Einstellungen speichern und lässt sich die Reihenfolge ändern? Für meine mehr beruflichen Zwecke brauche ich halt viele News auf einen Blick in der schnellen Übersicht nebeneinander, deswegen habe ich mich dann selbst rangemacht. Es gab ja auch noch diverse feedreader und newstral.com und die verdienen (weil sie in den Niederlanden sitzen, wo andere Urheberrechtsregelungen herrschen) über die Werbung sogar Geld damit...

        1. http://www.fastix.org/news.php

          Lassen sich die Einstellungen speichern

          Ja. Ein einfaches Cookie.

          und lässt sich die Reihenfolge ändern?

          Noch nicht. Wenn ich eine brauchbare Lösung finde, wie man mit Drag & Drop und Javascript lösen kann und Zeit finde, dann wäre das eine Idee.

          Die nächste wäre dann "was mit Login" zu machen um die gespeicherten Kanäle auf mehreren Geräten zur Verfügung zu haben.

          Die übernächste wäre dann daran zu arbeiten, dass man selbst Feeds (oder Webseiten, die dann den Metalink enthalten) eintragen kann...

          Jörg Reinholz

      2. Om nah hoo pez nyeetz, Jörg Reinholz!

        Wäre es so recht?
        http://www.fastix.org/news.php

        Ja, so wäre es recht. Schade, dass das CSS nicht so ganz frisch aussieht.

        Wie ist das eigentlich auf der Serverseite umgesetzt?

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Dia und diabolisch.

        1. Moin moin!

          Wie ist das eigentlich auf der Serverseite umgesetzt?

          Konfiguration: simple Textdatei in ini-Format.
          Daten: aus Feeds mit Bibliothek (magpierss)
          Filter/Verarbeitung: pures PHP
          Caching: Ja. Ein HTML-Sniplet pro Quelle (Feed). Gilt 5 Minuten.
          Auswahl wird in Cookie gespeichert.

          Schade, dass das CSS nicht so ganz frisch aussieht.

          Ich bin Tekki und gerade kein "Designer".

          Jörg Reinholz

  3. Om nah hoo pez nyeetz, pto!

    Inzwischen habe ich auch die »mehr«–Links entdeckt. Die sollten eine andere Farbe bekommen.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Dia und Diakonie.