1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

CSS-Pulldown

  • The User
  • 27. März 2008 um 16:16
  • The User
    Forum Guru
    Beiträge
    4.044
    • 27. März 2008 um 16:16
    • #1

    So, ich wollte das jetzt mal ausprobieren mit einem CSS-basierten Pulldown-Menu.
    Also:
    CSS:

    Code
    div.submenu a {display: none;}
    div.navibutton a.main {height: 20px; font-size: 15px; width: 100px; background-color: #ff0000; }
    div.navibutton a.main:hover+div.submenu a, div.submenu a:hover+div.submenu a {display: block; height: 25px; font-size: 20px; width:100px; background-color: #0000ff;}


    HTML:

    Code
    <div class="navibutton">
    [url='#']Hallihallo[/url]
    <div class="submenu">
    [url='#']Hallo[/url]
    [url='hallo']Halli[/url]
    </div>
    </div>

    So und das "div.submenu a:hover+div.submenu a" funktioniert eben nicht.
    Es wirkt einfach nicht.
    Es soll dafür sorgen, dass das Menu nicht wieder weggeht, wenn man über die Sublinks fährt.
    Ohne das +div.submenu a wirkt es natürlich nur auf einen der Links, soll aber ja auf alle wirken.
    Hat jemand eine Idee, wie ich das ohne große Änderungen hinbekomme, auf das bisherige bin ich nämlich recht stolz. ;)

    Viele liebe Grüße
    The User

    Freiheit bedeutet mehr.

    "Mir ist die gefährliche Freiheit lieber als eine ruhige Knechtschaft."
    (Jean Jacques Rousseau)
    Mein Blog zum Programmieren, GNU/Linux etc.
    Free Chelsea Manning!
    Stolzer Nutzer von KDE, openSUSE und Qt.

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 27. März 2008 um 17:09
    • #2

    Eine solche Angabe mit Plus-Zeichen

    Code
    div.submenu a:hover+div.submenu a

    ist mir bisher nicht bekannt. Wenn ein Style für mehrere Klassen gelten soll, dann schreib es so mit Komma:

    Code
    div.submenu a:hover, div.submenu a

    Der Effekt ist aber auch nicht zufriedenstellend.
    Versuch es nach dieser Anleitung.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • jojo87
    der/die Göttliche
    Reaktionen
    6
    Beiträge
    3.131
    • 27. März 2008 um 17:43
    • #3

    auch noch eine Möglichkeit:

    Code
    <ul id="navi">
    [*][url='#']Link>[/url]
    <ul>
    [*][url='#']Link[/url]
    [*][url='#']Link[/url]
    [*][url='#']Link[/url]
    [/list]
    
    
    [/list]

    css:

    Code
    #navi, #navi ul {
    margin:0;
    padding:0;
    list-style:none;
    }
    
    
    #navi a {
    display: block;
    width: 100px;
    }
    
    
    #navi li {
    float: left;
    width: 100px;
    }
    
    
    #navi li ul {
    position: absolute;
    left: -999em;
    }
    
    
    #navi li:hover ul {
    left:auto;
    }
    Alles anzeigen


    von: http://www.htmldog.com

    Gruß,
    Jojo


  • The User
    Forum Guru
    Beiträge
    4.044
    • 27. März 2008 um 17:49
    • #4

    Sejuma, dass es ausfährt, funktioniert ja, dank plus-Zeichen.
    http://www.drweb.de/trickkiste/tricks226.shtml
    Das Menu erscheint.
    Allerdings geht es wieder weg, wenn ich in das Submenu gehe.
    So jetzt habe ich etwas probiert:

    Code
    div.navibutton a.main:hover+div.submenu a, div.submenu a:hover, div.submenu a:hover+a {display: block; height: 25px; font-size: 20px; width:100px; background-color: #0000ff;}

    Dann bleibt das Menü allerdings nur bis zum ersten Unterpunkt, beim zweiten hält es nicht mehr.

    Viele liebe Grüße
    The User

    Edit:
    Sejuma, Sejuma, ich hab´s geschafft:
    CSS:

    Code
    li.submenu a {display: none;}
    li.submenu {list-style-type: none;}
    div.navibutton ul {padding: 0; margin: 0;}
    div.navibutton a.main {height: 20px; font-size: 15px; width: 100px; background-color: #ff0000; }
    div.navibutton a.main:hover+ul li.submenu a, ul li.submenu:hover a {display: block; height: 25px; font-size: 20px; width:100px; background-color: #0000ff;}


    HTML:

    Code
    <div class="navibutton">
    [url='#']Hallihallo[/url]
    <ul>
    <li class="submenu">
    [url='hallo']Hallo[/url]
    [url='hallo']Halli[/url]
    
    
    [/list]
    </div>

    Halleluja!
    Es musste halt eine Hover-Bedingung fürs ganze Menü angegeben werden!
    Juhuu!

    Freiheit bedeutet mehr.

    "Mir ist die gefährliche Freiheit lieber als eine ruhige Knechtschaft."
    (Jean Jacques Rousseau)
    Mein Blog zum Programmieren, GNU/Linux etc.
    Free Chelsea Manning!
    Stolzer Nutzer von KDE, openSUSE und Qt.

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 27. März 2008 um 19:27
    • #5

    Sieht auf den ersten Blick gut aus, muss ich mal näher unter die Lupe nehmen.
    Wie schaut's aber, wenn da noch mehrere Hauptlinks mit Unternavi daneben oder darunter kommen?

    Jojo's Lösung klappt m.W. im IE nicht, weil der Hovern bei li/ul nicht kann. Deshalb die Erweiterung wie bei drweg mit der csshover.htc

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • jojo87
    der/die Göttliche
    Reaktionen
    6
    Beiträge
    3.131
    • 27. März 2008 um 20:14
    • #6
    Zitat von sejuma


    Jojo's Lösung klappt m.W. im IE nicht, weil der Hovern bei li/ul nicht kann. Deshalb die Erweiterung wie bei drweg mit der csshover.htc

    Oder mit nem kleinen Javascript für den ie6

    @The_User:
    Die display: none Technik hat allerdings einen Nachteil


  • The User
    Forum Guru
    Beiträge
    4.044
    • 27. März 2008 um 21:03
    • #7

    Naja, so viele mit Screenreader gibt es nun auch wieder nicht, wichtiger sind eigentlich alte IE-Versionen und google-bots.
    Screenreader werden wohl auch eher auf spezielleren Seiten angewandt, unter Javascript hat man doch dasselbe Problem, und Bots sowie das Deaktivieren kommen noch dazu.

    Freiheit bedeutet mehr.

    "Mir ist die gefährliche Freiheit lieber als eine ruhige Knechtschaft."
    (Jean Jacques Rousseau)
    Mein Blog zum Programmieren, GNU/Linux etc.
    Free Chelsea Manning!
    Stolzer Nutzer von KDE, openSUSE und Qt.

  • Elvis
    Kaiser(in)
    Beiträge
    2.536
    • 27. März 2008 um 21:08
    • #8
    Zitat von The User

    Naja, so viele mit Screenreader gibt es nun auch wieder nicht, wichtiger sind eigentlich alte IE-Versionen und google-bots.


    Wenn Deine Eltern blind wären würdest Du es vermutlich anders sehen.... Wobei alte Menschen sollte eh nicht mehr ins Internet. Ist viel zu gefährlich.

    Bitte nicht klicken!
    Fighting for Webstandards!
    Du bist Terrorist

  • The User
    Forum Guru
    Beiträge
    4.044
    • 27. März 2008 um 22:25
    • #9

    ;)
    Ja komm, wie viele Blinde kennst du?

    Freiheit bedeutet mehr.

    "Mir ist die gefährliche Freiheit lieber als eine ruhige Knechtschaft."
    (Jean Jacques Rousseau)
    Mein Blog zum Programmieren, GNU/Linux etc.
    Free Chelsea Manning!
    Stolzer Nutzer von KDE, openSUSE und Qt.

  • Elvis
    Kaiser(in)
    Beiträge
    2.536
    • 27. März 2008 um 22:54
    • #10

    Eine und das reicht mir um so eine Einstellung scheiße zu finden.

    Bitte nicht klicken!
    Fighting for Webstandards!
    Du bist Terrorist

  • gelöschter User
    Gast
    • 28. März 2008 um 01:08
    • #11

    ich kenn auch jmd der fast blind ist ;)
    ein auge 5% das andere 8% ...

    mfg

  • yeti66
    König(in)
    Beiträge
    1.152
    • 28. März 2008 um 07:01
    • #12

    The User,

    jo, eine Webseite wird ja auch nicht nur für eine bestimmte Gruppe erstellt und die anderen werden ausgeschlossen. Etwa ab IE5.5 sollte es in jedem IE funktionieren und das in jeder Hinsicht. In diesem Fall ist es immer gut es mit eine geordnete Liste (<ul>[*][*]</ul) zu lösen. Bsp.: http://www.cssplay.co.uk/menus/dropdown.html

    Gruß yeti66 :wink:
    ___________________________________________
    :info:http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de/ Freiberuflicher Musiker für individuelle Musikdienstleistungen

  • The User
    Forum Guru
    Beiträge
    4.044
    • 28. März 2008 um 20:56
    • #13

    Naja, ok, sachte:
    1. Mit Javascript sind Screenreader auch ausgeschlossen
    2. Ich kann ja einfach den Hauptpunkt verlinken, und auf der Seite sind dann die Unterpunkte, die anderen haben immernoch den Hover
    3. Ich benutze <ul>
    4. Mag ja sein, dass es Millionen IE4 und Netscape sowieso-User gibt, aber ich möchte halt auch gerne Webstandards benutzen, und IE4 lässt sich (leider) einfacher beheben als Blindheit

    Achso und Sejuma, mit mehreren Hauptpunkten habe ich es auch probiert.

    Viele liebe Grüße
    The User

    Freiheit bedeutet mehr.

    "Mir ist die gefährliche Freiheit lieber als eine ruhige Knechtschaft."
    (Jean Jacques Rousseau)
    Mein Blog zum Programmieren, GNU/Linux etc.
    Free Chelsea Manning!
    Stolzer Nutzer von KDE, openSUSE und Qt.

  • Elvis
    Kaiser(in)
    Beiträge
    2.536
    • 28. März 2008 um 22:14
    • #14
    Zitat von The User

    1. Mit Javascript sind Screenreader auch ausgeschlossen


    Nicht nur die. Auch Suchmaschinen und bekloppte wie ich die JAvascript erst mal deaktiviert haben. Deshalb sollte man auf Javascript bei sowas wichtigem wie einer Navigation auch verzichten, bzw. Alternativen für Non-Javascript-User anbieten.

    Zitat von The User

    3. Ich benutze <ul>


    Und genau das ist ja richtig!

    Zitat von The User

    4. Mag ja sein, dass es Millionen IE4 und Netscape sowieso-User gibt


    Wichtig ist es dass die Seiten auf aktuellen Standardkonformen Browsern laufen. Ein bischen Abwärtskompabilität ist auch nicht schlecht, aber den Luxus gebe ich mir nicht, weil ich als Laie schon so genug zu kämpfen habe und als Standardfetischist Browserweichen versuche den Mittelfinger zu zeigen.
    Abwärtskompabilität sollte aber an der Grenze der Webstandards beherrschenden Browser aufhören. Das wäre beim Explorer die Version 5 (allerdings nur für Mäc; für Windoof fängt es erst bei 6 an).

    Zitat von The User

    aber ich möchte halt auch gerne Webstandards benutzen


    Das solltest Du auch!!! Warum schreibt Jeffrey Zeldman sehr gut in einem seiner Bücher.

    Zitat von The User

    und IE4 lässt sich (leider) einfacher beheben als Blindheit


    Und genau das macht bei mir den Unterschied aus. Kann ich keine barrierefreien Seiten machen (es ist immerhin noch kein Meister vom Himmel gefallen) oder will ich es einfach nicht. Das ist der kleine aber feine Unterschied zwischen meinem Verständnis weil ich es auch nicht besser kann und einem dicken Hals.

    Bitte nicht klicken!
    Fighting for Webstandards!
    Du bist Terrorist

  • The User
    Forum Guru
    Beiträge
    4.044
    • 28. März 2008 um 22:32
    • #15

    Wie meinst du jetzt das letzte? Nicht verstanden, was mein Zitat mit Können und Wollen zu tun hat?
    Ich meinte halt einfach, dass ich nicht bereit bin, auf Standards zu verzichten, nur für ein paar IE4s, die müssen dann halt mal auf ein kleines Feature verzichten, oder mal updaten, am besten auf Webstandards. Wer Dillo oder Textbasiertebrowser benutzt, nimmt das ja genauso in Kauf.

    Freiheit bedeutet mehr.

    "Mir ist die gefährliche Freiheit lieber als eine ruhige Knechtschaft."
    (Jean Jacques Rousseau)
    Mein Blog zum Programmieren, GNU/Linux etc.
    Free Chelsea Manning!
    Stolzer Nutzer von KDE, openSUSE und Qt.

  • Elvis
    Kaiser(in)
    Beiträge
    2.536
    • 29. März 2008 um 00:00
    • #16

    Mein letzter Kommentar bezog sich eher auf die Barrierefreiheit von Sebseiten.

    Bitte nicht klicken!
    Fighting for Webstandards!
    Du bist Terrorist

  • The User
    Forum Guru
    Beiträge
    4.044
    • 29. März 2008 um 15:01
    • #17

    So, jetzt hab ich abe rnoch eine Frage dazu:
    Wie verhinder ich, dass andere Elemente, das Pulldown umfließen?
    Ich habe verschiedene z-indexs gesetzt und den andern Sachen float: none; gegeben, vielleicht irgendwie auf die falsche Weise, hier mal die Grundstruktur:

    Code
    <div>
    mehrere <div class="navibutton">s
    </div>
    <div style="float: none;">
    das was nicht umfließen soll!
    </div>


    Ich hab jetzt allen <div>s, und dem li.submenu verschiedene z-index gegeben, außerdem dem li.submenu und dem letzten div float: none
    Was mach ich da falsch?

    Freiheit bedeutet mehr.

    "Mir ist die gefährliche Freiheit lieber als eine ruhige Knechtschaft."
    (Jean Jacques Rousseau)
    Mein Blog zum Programmieren, GNU/Linux etc.
    Free Chelsea Manning!
    Stolzer Nutzer von KDE, openSUSE und Qt.

  • jojo87
    der/die Göttliche
    Reaktionen
    6
    Beiträge
    3.131
    • 29. März 2008 um 18:10
    • #18

    probiers doch mal mit

    Code
    <div style="clear:both;"></div>

    Gruß,
    Jojo


  • The User
    Forum Guru
    Beiträge
    4.044
    • 30. März 2008 um 20:48
    • #19

    Danke, das hat gewirkt, erst hat sich zwar dadurch dann der ganze div verschoben, aber das lag am position: relative, was ich schnell ersetzt habe, und der Inhalt machte dadurch kein Verschieben mehr mit.

    Freiheit bedeutet mehr.

    "Mir ist die gefährliche Freiheit lieber als eine ruhige Knechtschaft."
    (Jean Jacques Rousseau)
    Mein Blog zum Programmieren, GNU/Linux etc.
    Free Chelsea Manning!
    Stolzer Nutzer von KDE, openSUSE und Qt.

  • The User
    Forum Guru
    Beiträge
    4.044
    • 8. April 2008 um 21:21
    • #20

    Ich habe jetzt eine neue Version, ohne Pluszeichen und so:
    Jetzt wollte ich fragen, ob ihr das für mich mal ganz kurz im IE testen könntet.
    Ich hab jetzt keinen zur Hand, habs getestet in Konqueror, FF, Safari und Opera.

    Code
    div.submenu a {display: none; background-color: #dddd00;}
    div.submenu a:hover {background-color: #ffff00;}
    div.submenu { position: absolute;}
    div.navibutton { width: 100px; float: left;}
    div.navibutton a.main { background-color: #00dddd; margin:0; text-align: center; height: 25px; display:block; font-size:16px; text-decoration:none; color: #000000; width: 100px; display: block; z-index: 80; }
    div.submenu {z-index: 80; float: none; }
    div.navibutton a.main:hover {background-color: #00ffff; color: #000000; height: 25px;}
    div:hover.navibutton div.submenu a {display: block; height: 25px; font-size: 16px; width:100px; text-decoration: none; text-align: center; color: #000000}

    Einfach den Anhang ausprobieren!

    Danke für Tester!
    The User

    Edit:
    Ich darf leider kein .htm anhängen, also mal als .txt.

    Dateien

    newnavi.txt 1,11 kB – 75 Downloads

    Freiheit bedeutet mehr.

    "Mir ist die gefährliche Freiheit lieber als eine ruhige Knechtschaft."
    (Jean Jacques Rousseau)
    Mein Blog zum Programmieren, GNU/Linux etc.
    Free Chelsea Manning!
    Stolzer Nutzer von KDE, openSUSE und Qt.

Tags

  • www
  • html
  • ie
  • internet
  • http
  • klasse
  • links
  • style
  • webseite
  • code
  • anleitung
  • zeichen
  • div
  • auge
  • lösen
  • google
  • liste
  • gruppe
  • eltern
  • hover
  • dropdown

Benutzer online in diesem Thema

  • 1 Besucher
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™