XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Mehrere Drop-Down-Menüs ordnen (http://xhtmlforum.de/showthread.php?t=74293)

BeBe 22.11.2021 17:20

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?

MrMurphy 22.11.2021 20:52

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.

BeBe 22.11.2021 22:21

Drop-Down-menüs anordnen
 
https://bb-verlag.de/test/Bildschirmcopy.png

Auf meinem Computermonitor sieht es wie im Link aus.


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023