• Hallo,


    ich hoffe man kann mir hier helfen.
    Bin gerade dabei ein Dropdownmenü unserer Internetseite ein wenig zu ändern. Bin leider nicht so fit damit.
    Ich habe im Internet ein Tutorial gefunden und dieses mit unserem alten Dropdownmenü ein wenig kombiniert. Leider hat sich ein kleiner Fehler eingeschlichen.


    Hier mein CSS Code:

    Zitat

    Und das ist mein HTML Code:

    Zitat


    Mein eigentliches Problem habe ich auf diesem Bild kenntlich gemacht:


    #mce_temp_url#


    Es geht um den kleinen Weißen Pfeil nach unten. Wenn ich auf die Felder gehe, die kein Submenü haben, bleibt der Weiße Pfeil ganz normal fix stehen.


    #mce_temp_url#


    Wenn ich aber jetzt auf eines der Submenüfelder gehe, dann bewegt sich der kleine Weiße Pfeil nach rechts. Ich weiß nicht wie ich das fixieren kann.


    Kann mir dabei jemand helfen? Sorry für die blöde Frage.

  • Hallo,


    das bewirkt das


    CSS
    left: 50%;


    in



    Einfach mal löschen oder auskommentieren.


    Gruss


    MrMurphy

  • Hallo


    indem du die "left: 50%;" nur den li zuweist, auf die es sich auswirken soll. Dafür gibt es die Pseudoklassen nth-child, nth-last-child u.s.w.


    In deinem Fall löscht zu zunächst die "left: 50%;" aus dem Block und fügst zusätzlich ein


    CSS
    nav > ul > li:nth-last-child(1n+4) > a:hover:after {
       left: 50%;
    }


    oder (stilmäßig nicht so schön, aber für Anfänger leichter nachzuvollziehen):


    CSS
    nav > ul > li:nth-child(1) > a:hover::after,
    nav > ul > li:nth-child(2) > a:hover::after,
    nav > ul > li:nth-child(3) > a:hover::after,
    nav > ul > li:nth-child(4) > a:hover::after,
    nav > ul > li:nth-child(5) > a:hover::after,
    nav > ul > li:nth-child(6) > a:hover::after {
       left: 50%;
    }


    Gruss


    MrMurphy

  • Habe leider noch ein anderes Problem, vielleicht kann ich dafür auch noch eine kleine Hilfe bekommen. :whistling:


    Betrifft nochmal den kleinen Weißen Pfeil für die Submenüs.
    Und zwar wird der im Internet Explorer irgendwie nicht richtig dargestellt. Bei Firefox & Chrome ist alles top.


    Betrifft dann diesen Teil des Codes:

    CSS
    nav ul li.submenu > a:after {  position: relative;  float: right;  content: '';  display: inline-block;  margin-left: 10px;  margin-top: 5px;  border-left: 5px solid transparent;  border-right: 5px solid transparent;  border-top: 5px solid #fff;  border-bottom: 5px solid transparent;}



    Um das ganze in Firefox richtig zu positionieren habe ich noch display:inline-block; hinzugefügt ... Für den Internet Explorer hat das nicht gereicht. Gibt es noch etwas dass ich da einstellen kann?


    Vielen Dank im Voraus.

  • Hallo


    Zitat

    für den IE kannst du am besten eine Website nach dem Standart von 1850 programmieren


    Die Zeiten sind schon lange vorbei.


    Sauberen HTML-/CSS-Code zeigt der IE in der Regel auch sauber an.


    Das Problem ist eher der überregelnde Quellcode, hauptsächlich das CSS. Ich hatte mir bereits bei meiner ersten Antwort überlegt darauf hinzuweisen, aber solche Informationen kommen häufig schlecht oder als Bevormundung an, wenn nicht direkt danach gefragt wird.


    Also: Mache den Quellcode einfacher, wähle direkte Lösungen und überlasse so weit möglich den Browsern die Darstellung. Zu viele Eingriffe schaffen mehr Probleme als sie beseitigen.


    Gruss


    MrMurphy

  • Diese Zeiten sind leider nicht vorbei..
    Bei aktuellen IE bzw edge oder wie der neue sich schreit, hast du recht
    Da aber generell mindestens IE9 (eher IE8 ) supporting angesagt ist, sind die Zeiten leider noch eine ganze Weile so.. :(

  • Hallo


    Zitat

    hat da noch einer einen Tipp?


    Schwierig. Zunächst reicht ein Tipp allein nicht aus. Der Quellcode (speziell das CSS) ist so verbastelt dass er nur komplett neu erstellt werden kann.


    Zitat

    bin leider nicht so fit mit der ganzen Sache


    Und dann wirst du mit den Tipps wenig anfangen können da dir das erforderliche Grundlagenwissen fehlt.


    Was sollen zum Beispiel die span-Elemente in jedem a-Element? Die sind nicht erforderlich - weglassen.


    CSS
    nav {
       height: 37px;
       ...
    }


    Oder was soll hier das height? Die einzelnen Elemente sollen in Webseiten ihre Höhe selbst bestimmten. height-Angaben sind in der Regel nicht erforderlich.


    CSS
    background: -moz-linear-gradient(top, #242424 50%, #000000 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #242424), color-stop(50%, #000000));
    background: -webkit-linear-gradient(top, #242424 50%, #000000 50%);
    background: -o-linear-gradient(top, #242424 50%, #000000 50%);
    background: -ms-linear-gradient(top, #242424 50%, #000000 50%);
    background: linear-gradient(to bottom, #242424 50%, #000000 50%);


    Für linear-gradient sind keine Prefix-Angaben mehr erforderlich.



    Wenn du Zeichen darstellen willst und die als Text eingefügt werden können solltest du das auch tun. Inhaltsleere Elemente sind dafür gänzlich ungeeignet. Sinnvoll könnte das Dreieck folgendermaßen eingefügt werden:


    CSS
    nav>ul>li:nth-child(n+7)>a::after {
             content: 'DU'; /* UTF-Zeichen Dreieck nach unten*/
             margin-left: 0.4rem;
          }


    Das Forum hier kann leider keine UTF-Zeichen darstellen. DU ist direkt ein Dreieck-Zeichen mit der Spitze nach unten. DO im folgenden Quelltext ein Dreieck mit der Spitze nach oben.


    Zwei Anweisungen mit dem gleichen Ergebnis wie deine neun, mit dem die Browser auch noch besser zurechtkommen. Und erzähl mir nicht, das die leicht unterschiedlichen Winkel zu "deinen" Dreiecken irgendeinen Besucher interessiert oder auch nur auffällt.


    Natürlich müssen für ein stabiles Layout auch noch andere CSS-Anweisungen gelöscht oder angepasst werden. Aber dafür müsstest du Schmerzensgeld zahlen.


    Ich habe mal ein Beispiel erstellt. Wobei es für die Listen auch bessere Möglichkeiten gibt. Die will ich dir aber auch nicht noch wegnehmen:



    Gruss


    MrMurphy

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!