Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
» Profil in beiträgen nur im blog deaktivieren.
von derforumde Gestern um 18:19

» Das Plauderforum ist zurück!
von Eto Mo 25 Nov 2024 - 17:59

» [phpBB2] Javascripte funktionieren nicht mehr
von Miho Mo 25 Nov 2024 - 11:05

» [Invision] Editor über den Bildrand ziehbar + Schriftgrößenproblem
von Skouliki Mi 20 Nov 2024 - 8:06

» Passwort für meinen Adminbereich vergessen.
von Joost Sa 9 Nov 2024 - 10:13

» [Invision] Signatur wird nicht immer eingefügt
von Skouliki Mo 4 Nov 2024 - 16:33

» [Invision]  Schriftgröße Navigationsleiste, Links und Forenbeschreibungen
von Skouliki So 27 Okt 2024 - 13:29

» [Invision] Transparent Logohintergrund/Struktur
von Joost So 27 Okt 2024 - 12:58

» png wird im servimg in ein jpg umgewandelt
von Skouliki Mi 23 Okt 2024 - 20:26

» Passwort Vergessen (SilentHowl)
von Joost Do 17 Okt 2024 - 17:14

» [Invision] Hintergrundbild fixieren
von Skouliki Mo 14 Okt 2024 - 11:30

» Paßwort vergessen
von Joost So 13 Okt 2024 - 17:58

» Anti-Spam-Prüfung
von Hana19 Sa 12 Okt 2024 - 16:59

» Private Nachrichten bleiben im Postausgang hängen
von Skouliki Fr 11 Okt 2024 - 11:11

» [phpBB3] Mittelteil des Forums verschoben
von Eto Mo 7 Okt 2024 - 20:50

» [phpBB3] Farbpalette ändern
von Skouliki Mo 7 Okt 2024 - 10:08

» [Klassische Version] Account löschen
von Joost Sa 5 Okt 2024 - 21:05

» Chatbox einloggen nicht möglich
von Joost So 29 Sep 2024 - 8:01

Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Agorass in Passwort für meinen Adminbereich vergessen.
( 2 )


» Beitrag von Keks in [phpBB2] Unterforen Nebeneinander
( 1 )


CSS Navigation-Rollover

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

navigation - CSS Navigation-Rollover Empty CSS Navigation-Rollover

Beitrag von Gast Do 30 Dez 2010 - 13:19

Hi,

ich verzweifel knock seit einigen Tagen an einem CSS Drop Down Menü das ich gerne bei einer HTML Seite einbauen würde. Es ist oder scheint mir noch komplizierter zu sein als Div Containers zu erstellen aber Learning by doing heißt das sprich Word Lesen.

Ich bräuchte bitte dazu ein wenig Hilfe denn ich würde gerne diesem Menü die Funktion geben das es untereinander aufklappt und nicht nebeneinander wie es noch der Fall ist.

Hab Verschiedene Varianten gesehen nur ich weiß gar nicht was ich da nun ändern soll zum Beispiel display: inline; das inline hab ich mal in Block ersetzt das auch dann funktioniert hat aber nicht so wie ich es mir vorstelle also untereinander auf zu klappen.


Hier ist der Code zu CSS:
<style type="text/css">
<!--
ul {
margin: 0;
padding: 0;
list-style-type: none;
}

ul, li {
display: inline;
}

ul#nav li ul {
display: none;
}

ul#nav li:hover ul {
display: inline;
}

ul#nav li a {
background: #e3e3e3;
padding: 5px;
font-weight: bold;
color: #000;
text-decoration: none;
}
-->
</style>

Der Code zu HTML:
<body>
<ul id="nav">
<li><a href="#">menu 1</a>
<ul>
<li>submenu 1.1</li>
<li>submenu 1.2</li>
</ul>
</li>
<li><a href="#">menu 2</a>
<ul>
<li>submenu 2.1</li>
<li>submenu 2.2</li>
</ul>
</li>
<li><a href="#">menu 3</a>
<ul>
<li>submenu 3.1</li>
<li>submenu 3.2</li>
</ul>
</li>
<li><a href="#">menu 4</a>
<ul>
<li>submenu 4.1</li>
<li>submenu 4.2</li>
</ul>
</li>
</ul>
</body>

Wäre sehr dankbar wenn mir jemand das erklären könnte wie so etwas funktioniert also zumindestens bei der CSS funktion zwar weiß ich wo man Schrift und abstände ändern kann aber ich komm nicht klar mit der display funktion.

Lg
ShaoKahn
Anonymous
Gast
Gast


Nach oben Nach unten

navigation - CSS Navigation-Rollover Empty Re: CSS Navigation-Rollover

Beitrag von #Frank Do 30 Dez 2010 - 17:46

Versuch doch mal bitte das hier
(Komplette HTML Seite mit CSS):
Code:
<html>
<head>
<title>menu 1</title>
<style type="text/css">
<!--
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul, li {
  display: table-row-group;
  float: none;

}

ul#nav li ul {
  display: none;
}

ul#nav li:hover ul {
  display: inline;
}

ul#nav li a {
  background: #e3e3e3;
  padding: 5px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
}
-->
</style>
</head>
<body>
<ul id="nav">
    <li><a href="#">menu 1</a>
            <ul>
                <li><a href="www.harzfuchsforum.com" target="_blank">Harzfuchsforum</a></li>
                <li><a href="www.harzfuchs.de/stadtbilder" target="_blank">Harzfuchs Stadtbilder</a></li>
            </ul>
    </li>
    <li><a href="#">menu 2</a>
            <ul>
                <li>submenu 2.1</li>
                <li>submenu 2.2</li>
            </ul>
    </li>
    <li><a href="#">menu 3</a>
            <ul>
                <li>submenu 3.1</li>
                <li>submenu 3.2</li>
            </ul>
    </li>
    <li><a href="#">menu 4</a>
            <ul>
                <li>submenu 4.1</li>
                <li>submenu 4.2</li>
            </ul>
    </li>
</ul>
</body>
</html>
#Frank
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34614
Anmeldedatum : 13.08.08
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

navigation - CSS Navigation-Rollover Empty Re: CSS Navigation-Rollover

Beitrag von Gast Do 30 Dez 2010 - 18:53

#Frank schrieb:Versuch doch mal bitte das hier
(Komplette HTML Seite mit CSS):
Code:
<html>
<head>
<title>menu 1</title>
<style type="text/css">
<!--
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul, li {
  display: table-row-group;
  float: none;

}

ul#nav li ul {
  display: none;
}

ul#nav li:hover ul {
  display: inline;
}

ul#nav li a {
  background: #e3e3e3;
  padding: 5px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
}
-->
</style>
</head>
<body>
<ul id="nav">
    <li><a href="#">menu 1</a>
            <ul>
                <li><a href="www.harzfuchsforum.com" target="_blank">Harzfuchsforum</a></li>
                <li><a href="www.harzfuchs.de/stadtbilder" target="_blank">Harzfuchs Stadtbilder</a></li>
            </ul>
    </li>
    <li><a href="#">menu 2</a>
            <ul>
                <li>submenu 2.1</li>
                <li>submenu 2.2</li>
            </ul>
    </li>
    <li><a href="#">menu 3</a>
            <ul>
                <li>submenu 3.1</li>
                <li>submenu 3.2</li>
            </ul>
    </li>
    <li><a href="#">menu 4</a>
            <ul>
                <li>submenu 4.1</li>
                <li>submenu 4.2</li>
            </ul>
    </li>
</ul>
</body>
</html>

Hallo Frank,

zwar sind die Navigationen untereinander aber die Rollover Funktion ist futsch...
Smile aber troztdem vielen dank fürs versuchen ich probiere es auch noch einwenig.
Bitte noch nicht schließen.... Werde mich melden wens geklappt hat.

Also hauptsache jemand hat noch Tipps dazu wie man als Anfänger das einwenig kapiert wäre damit auch total zufrieden... Oder super wäre auch einfach ein normales Navi in CSS mit 4 Buttons.
Wenn möglich ansonsten ich freue mich über jegliche hilfe dazu...

Mfg
ShaoKahn
Anonymous
Gast
Gast


Nach oben Nach unten

navigation - CSS Navigation-Rollover Empty Re: CSS Navigation-Rollover

Beitrag von #Frank Do 30 Dez 2010 - 20:24

Merkwürdig, bei mir ist es offline aber richtig, so das Die Hauptebene Untereinander ist und die Sub Menüs dann daneben erscheinen.
Hier habe ich das mal Online gestellt:
http://frank.forumieren.de/h23-klappmenue
#Frank
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34614
Anmeldedatum : 13.08.08
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

navigation - CSS Navigation-Rollover Empty Re: CSS Navigation-Rollover

Beitrag von Gast Do 30 Dez 2010 - 22:32

Hi Frank,

ja soweit ist das Richtig müsste noch einwenig selbst damit rum experimentieren damit ich das selber auch verstehe was da nun geändert wurde.

Ich hab diesen Code bei Phase 5 ausgetestet und der hat mir die funktion nicht weiterhin angezeigt aber nun sehe ich auch das es auf der extra seite aufeinmal klappt super.

Nur mal noch ein paar fragen welche änderung hast du nun gemacht ich sehe bei display aufeinmal eine art tabel code drin.

Und vorallem das die Submenüs so sorgfälltig untereinander sind wo bestimmt man den abstand genau??

Wenn eine seite hättest wo ich das nachlesen könnte wäre das auch total inordnung. Vielen dank für das alles schon mal...

Mfg
ShaoKahn
Anonymous
Gast
Gast


Nach oben Nach unten

navigation - CSS Navigation-Rollover Empty Re: CSS Navigation-Rollover

Beitrag von #Frank Do 30 Dez 2010 - 22:40

Das einzige was ich nun verändert habe ist im CSS Teil das hier:
Code:
ul, li {
  display: table-row-group;
  float: none;
}
Bei dir war das so:
Code:
ul, li {
display: inline;
}
Das ist das was ich eingesetzt habe.
#Frank
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34614
Anmeldedatum : 13.08.08
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

navigation - CSS Navigation-Rollover Empty Re: CSS Navigation-Rollover

Beitrag von Gast Fr 31 Dez 2010 - 17:28

Hi vielen dank fürs helfen ich habs nun hinbekommen mit desen umänderung von dir und weiteres dazu...top

Und habs so einiger massen geblickt wo welche funktion genau ist.

Damit kann man nun dieses Topic dann schließen...

Lg
ShaoKahn
Anonymous
Gast
Gast


Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten