css-Problem unterschiedlich breite MenüPunkte

glupto · #1 (**permalink**) 30.03.2014, 18:25

Hallo, nur mal so vorweg. Dieser Link hier xhtmlwiki.de wird bei mir im FF28 nicht angezeigt, im ie11 schon. Vielleicht liegts an meinen Einstellungen, aber an welchen...?

So, aber mein CSS-Problem - (aber nee: noch was vorweg, bevor mich jemand des Doppelpostings bezichtigt: ich habe schon in einem anderen css-Forum gefragt, aber keine Antwort bekommen). So, nun aber: Ich schaffe es nicht, in meinem Navigations-Menü die einzelnen Oberpunkte unterschiedlich breit hinzubekommen, es klappt immer nicht für das :hover, da wird immer die breite Breite genommen, obwohl ich schon manches versucht habe. Es ist wohl nur eine Kleinigkeit, aber manchmal ist man eben blind. Hier der CSS-Code:

Code:

    * {
     margin:0;
     padding:0;
     
     text-decoration:none;
    }



    ul#navi  {
        position: relative;
       float: left;
      width:100%;   /* geändert von 150px auf 100% */
    }

    ul#navi a {
     color:#000;
     font-weight:bold;
     text-align:left;
    }

    ul#navi small a {
    width: 2.895em;
     color:#000;
     font-weight:bold;
     text-align:left;
    }


    .aktiv
    {background: #fff;
      }

    .small{
        list-style:none;
     position:relative;           
     float:left;   
        width: 4.975em;           
    }


    ul#navi li  {
        list-style:none;
     position:relative;           
     float:left;   
     
     /* hinzugefügt um eine horizontale Ausrichtung zu erzielen */
       width: 9.375em           /*        Hinzugefügt 150px / 16 = 9.375em*/
    }


    ul#navi .small li   {
        list-style:none;
     position:relative;           
     float:left;   
       width: 4.975em !important;
    }


    /* 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: 7.395em;
    /*  width: 103px;
      */ color:#fff;
    }

    /* Hover Hinter- und Vordergrundfarbe für schmale Ebenen */
    ul#navi .small li:hover > a , ul#navi .small ul li:hover  > a, ul#navi ul  ul .small li:hover  > a, ul#navi ul  ul ul .small li:hover  > a  {
      background:#a33;
      width: 2.895em;
    /*  width: 103px;
      */ color:#fff;
    }

    ul#navi a span {
     float:right;
      font-weight:normal;
      }

Hier das HTML:

HTML-Code:

         <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>
        <li class="datumzeit">
     
     <?php
        date_default_timezone_set('Europe/Berlin');
        $timestamp = time();
        $datum = date("d.m.Y",$timestamp);
        $zeit = date("H:i",$timestamp);
        echo $datum." - ".$zeit;
    ?>

    </li>

    </ul>

Und hier der Link, es betrifft den ersten (Home) und den letzten (S/L/XL) Menüpunkt in der LeisteNachrichtentisch

Danke für Tipps und Hilfe,
Gruß
glupto

Thielo · #2 (**permalink**) 30.03.2014, 22:23

So heißt die Anweisung im CSS, die den Elementen eine Breite beim Hovern gibt:

Code:

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

glupto · #3 (**permalink**) 30.03.2014, 23:21

Zitat:

Zitat von Thielo

So heißt die Anweisung im CSS, die den Elementen eine Breite beim Hovern gibt:

Code:

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

Ja, und damit das auch bei der Klasse .small mit anderer Breite klappt, habe ich ja das eingerichtet:

Code:

    /* Hover Hinter- und Vordergrundfarbe für schmale Ebenen */
    ul#navi .small li:hover > a , ul#navi .small ul li:hover  > a, ul#navi ul  ul .small li:hover  > a, ul#navi ul  ul ul .small li:hover  > a  {
      background:#a33;
      width: 2.895em;
    /*  width: 103px;
      */ color:#fff;
    }

Dabei habe ich aber wohl was falsch gemacht, aber was

K.Roland · #4 (**permalink**) 31.03.2014, 15:54

Zitat:

Zitat von glupto

Ich schaffe es nicht, in meinem Navigations-Menü die einzelnen Oberpunkte unterschiedlich breit hinzubekommen, es klappt immer nicht für das :hover, da wird immer die breite Breite genommen, obwohl ich schon manches versucht habe.

Bedenke bei den Oberpunkten haben alle li Elemete eine feste Breite von ca. 150 Pixel so.

Code:

}
ul#navi li {
    float: left;
    list-style: none outside none;
    position: relative;
    width: 9.375em;
}

Und du möchtest daran was ändern, richtig?

Fehler:

Code:

}
    ul#navi small a {
    width: 2.895em;
     color:#000;
     font-weight:bold;
     text-align:left;
    }

Richtig:

Code:

}
   ul#navi li.small a { }

MfG___________
Roland

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem Browserweiche IE CSS	00001	CSS	5	24.09.2010 10:23
Problem mit CSS relative, absolute & float	FrageHabe	CSS	3	13.08.2010 14:40
Css Styleswitcher Problem	just4download	(X)HTML	11	20.06.2010 21:09
2 Tabellen via CSS unterschiedlich bestimmen	philogyn	CSS	2	21.05.2010 10:33
CSS Greybox Problem - HILFE!	vsa	CSS	9	12.01.2010 20:33