zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Mehrere Drop-Down-Menüs ordnen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.11.2021, 17:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.11.2021
Beiträge: 2
BeBe befindet sich auf einem aufstrebenden Ast
Standard Mehrere Drop-Down-Menüs ordnen

Als fast-Anfänger fällt es mir noch schwer, das Aussehen meiner neuen responsiven Testseite richtig zu ordnen.

Auf der Testseite unter https://bb-verlag.de/test/x.html sind die Menüs in der Handy-Ansicht noch fürchterlich. Ich möchte immer nach 2-3 Menüs einen Zeilenumbruch und diese dann mittig haben, aber das geht bei Menüs nicht mit <br/>

HTML-Code in Dreamweaver:

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="dropdown.css">
</head>
<body>
<div id="wrapper"><h1 align="center">
<font face="Arial">BB-Verlag und Fernakademie</font>
<p align="center">
<font face="Arial" <font size="5">Ideen - Denken - Wissen nach offenen Lizensen (GNU/ GPL)</font></p>
<p align="left">
</p>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>x</title>
</head>
<body>
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">Bücher, CD, DVD, Audio, Video</a>
<ul>
<li><a href="">The Team</a></li>
<li><a href="">History</a></li>
<li><a href="">Vision</a></li>
</ul>
<br/>
</li>
<li><a href="">Software,Spiele,Hardware</a>
<ul>
<li><a href="">Cozy Couch</a></li>
<li><a href="">Great Table</a></li>
<li><a href="">Small Chair</a></li>
<li><a href="">Shiny Shelf</a></li>
<li><a href="">Invisible Nothing</a></li>
</ul>
</li>
<li><a href="">Bücher schreiben und veröffentlichen</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
<li><a href="">Maker</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
<li><a href="">Ideenbörse</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
</li>
<li><a href="">Crowdfounding</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
<li><a href="">Kostenlos</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
<li><a href="">Unternehmensberatung</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
<li><a href="">Psych. und pädagogische Beratung</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
<li><a href="">Partnerschaften</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
<li><a href="">Sonstige</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
</ul>
</body>
</html>
--------------------------------------
Code der externen CSS-Datei dropdown css

ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}

ul li
{
display: block;
position: relative;
float: left;
}

li ul
{
display: none;
}

ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}

ul li a:hover
{
background: #617F8A;
}
li:hover ul
{
display: block;
position: absolute;
}

li:hover li
{
float: none;
font-size: 11px;
}

li:hover a
{
background: #617F8A;
}

li:hover li a:hover
{
background: #95A9B1;
}

Das Handbuch von Dreamweaver ist für Anfänger kaum verständlich, da keine Praxisbeispiele für einfache Webseiten benannt werden. Und auch im Netz finde ich zwar Beispiele, die ich entweder nicht verstehe oder bei mir nicht funktionieren.

Kann mir jemand hier im Forum helfen?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.11.2021, 20:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Deine Problembeschreibung ist leider nicht aussagekräftig, so dass dein Problem nicht nachvollziehbar ist. Auch auf breiten Bildschirmen funktioniert die Navigation meiner Meinung nach nicht richtig.

Gibt es eine Seite, auf der die Navigation wie von dir gewünscht funktioniert? Um erst mal rauszubekommen, wie du dir die Navigation überhaupt vorstellst.

Zum Dreamweaver: Das ist kein Seitenerstellungsprogramm, sondern ein HTML-Editor für Profis. In der Gebrauchsanleitung für Autos wird auch nicht die StVO erklärt und in Anleitungen für Nähmaschinen nicht das Nähen gelehrt. Genau so haben HTML- und CSS-Anleitungen nichts im Dreamweaver-Handbuch verloren. Dafür sind die viel zu komplex.

Von daher hast du offensichtlich falsche Erwartungen an Dreamweaver. Der ersetzt kein fehlendes Grundwissen über HTML und CSS, sondern das wird vorausgesetzt um mit dem Dreamweaver arbeiten zu können.

Allgemeiner Hinweis: float und position:absolute haben in aktuellen Menüs, die sich an unterschiedliche Bildschirmbreiten anpassen sollen, eher nichts mehr verloren. Dafür wurden Flexbox und CSS-Grid entwickelt.

Geändert von MrMurphy (22.11.2021 um 20:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.11.2021, 22:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.11.2021
Beiträge: 2
BeBe befindet sich auf einem aufstrebenden Ast
Standard Drop-Down-menüs anordnen



Auf meinem Computermonitor sieht es wie im Link aus.
Mit Zitat antworten
Antwort

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
Drop Down Men Sebastian HH CSS 2 29.10.2014 17:44
Drop down Menü bleibt aktiv nach zurück mit back button vom Firefox gombi CSS 0 18.01.2010 16:34
CSS Drop Down Menü gachet CSS 9 08.11.2009 19:36
IE 6 & 7 Drop Down Navigation Fehler Zak CSS 9 09.07.2009 11:50
Fehler mit Drop Down Menü bei Überschreitung der Container Grenzen! webfabrik CSS 4 16.01.2007 02:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:44 Uhr.