zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css-Problem unterschiedlich breite MenüPunkte

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.03.2014, 18:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard css-Problem unterschiedlich breite MenüPunkte

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.03.2014, 22:23
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.03.2014, 23:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Thielo Beitrag anzeigen
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
Mit Zitat antworten
  #4 (permalink)  
Alt 31.03.2014, 15:54
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von glupto Beitrag anzeigen
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
Mit Zitat antworten
Antwort

Stichwörter
css menue

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:48 Uhr.