Menüleiste im Header

mrssaxobeat_ · 29.09.2021

Hallo,
nach etlichem hin und her probieren komm ich nicht drauf....
Ich hab im DW ein neues Dokument mit header und footer erstellt.

Und ich hätt im header gern links ein Logo und rechts eine Menüleiste.
Wie bekomm ich die Menüleiste (hätte eine Spry Menu bar) IN den header??

Danke schon mal vorab

LG

mrssaxobeat_ · 29.09.2021

owieortho · 03.10.2021

Jetzt noch ein bischen Quelltext Deiner Versuche, dann hätte man was, womit gegebenenfalls geholfen werden könnte.

O.

mrssaxobeat_ · 12.10.2021

ich schaff es zwar die Menu bar IN den header zu bekommen, aber nicht, dass sie am rechten und unteren Rand abschließt und das Logo am linken Rand abschließend bleibt. - das verschiebt sich dann auch.

draupnir · 12.10.2021

dazu braucht es auch etwas CSS(-Zauber)

HTML alleine reicht nicht.

mrssaxobeat_ · 21.10.2021

das heißt jetzt für mich? wie bekomm ich das hin?

draupnir · 21.10.2021

HTML fehlerfreier:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Menü im Web</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
<div class="header">
<div class="logo"> 
<a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background-color: #8090AB; display:block;" /></a>
</div> 
<div class="menu"> 
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Menü1</a> </li>
<li><a href="#">Menü2</a></li>
<li><a href="#">Menü3</a> </li>
<li><a href="#">Menü4</a></li>
</ul>
</div> 
</div> 
</div> 
</body>
</html>

CSS als externe Datei, die oben geladen wird:

/* CSS */
.container {width: 100%;}
.header {width: 100%;}
.menu {float: right; width:40%; background-color: yellow;}
.logo {float: left; width:40%; background-color: yellow;}

Viel Erfolg
– j.

Myhar · 22.10.2021

Floats werden hier gar nicht gebraucht, das kann mit Flexbox gut umgesetzt werden. Oder meinetwegen auch mit grid, aber nicht mit floats.

draupnir · 22.10.2021

Stimmt, CSS bietet viele Möglichkeiten das Problem zu lösen. Float ist die Lösung, die auch in sehr alten Browsern funktioniert. Wir wissen ja nicht, wie kompatibel die Lösung sein soll, gell?

Myhar · 22.10.2021

Flexbox wird auch von "sehr alten" browsern verstanden, sogar von solchen, die schon deprecated sind. Aber ja, wenn IE 6,7,8 9 oder ähnlich unterstützt werden sollen, dann ist float die Lösung. Browser die heute verwendet werden können alle Flexbox (und auch grid)
IE ist der einzige der grid nicht wirklich beherrscht, deshalb mein Zusatz mit "eventuell Grid".
Einerseits weil Flexbox besser für eindimensionale Anordnung geeignet ist. Andererseits weil Grid im IE nicht super funktioniert.

Also ja, Flexbox is the way to go wenn es um ältere Browser geht, da hast du Recht!

mrssaxobeat_ · 05.11.2021

vielen lieben Dank für die Tipps und Tricks

So grob hab ich das jetzt mal hinbekommen, aber nicht so ganz wie ich will....

wie schaff ich es, dass die "Zeile" - rot markiert weg ist? also sprich, das Menü quasi IM Logo-Bild rechts ist.
und Rechts eben so, dass es am Rand abschließt und nicht wenn man den Browser zoomt, das Menü "raushüpft" oder sich "einzieht" :-D

nav ul {
padding-left: 50%;
display: flex;
}

nav li {
list-style-type:none;
margin-right: 1px;
}

nav li a:link {
text-decoration: none;
font-weight: normal;
display: block;
background: #FC9810;
width: 6em;
padding: 0.2em;
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
color: #FFF;
font-size: 18px;

}

<div class="container">
<div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="100%" height="114" id="Insert_logo" style="background-color: #8090AB; display:block;" />
</a>
<nav>
<ul>
<li><a href="index.html">Fotografie</a></li>
<li><a href="ort.html">Portfolio</a></li>
<li><a href="dies.html">über mich</a></li>
<li><a href="das.html">Kontakt</a></li>
</ul>
</nav>
<a href="#"> </a></div>

owieortho · 05.11.2021

Und was ist der aktuelle Quelltext (HTML und CSS)? Anhand der Bildchen kann doch bloß Wahrsagerei betrieben werden.

O.

mrssaxobeat_ · 14.11.2021

nav ul {
padding-left: 50%;
display: flex;
}

nav li {
list-style-type:none;
margin-right: 1px;
}

nav li a:link {
text-decoration: none;
font-weight: normal;
display: block;
background: #FC9810;
width: 6em;
padding: 0.2em;
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
color: #FFF;
font-size: 18px;

}

<div class="container">
<div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="100%" height="114" id="Insert_logo" style="background-color: #8090AB; display:block;" />
</a>
<nav>
<ul>
<li><a href="index.html">Fotografie</a></li>
<li><a href="ort.html">Portfolio</a></li>
<li><a href="dies.html">über mich</a></li>
<li><a href="das.html">Kontakt</a></li>
</ul>
</nav>
<a href="#"> </a></div>

mrssaxobeat_ · 05.12.2021

konnte leider beide Probleme noch nicht lösen :confused:

draupnir · 05.12.2021

Das kann ich verstehen, denn Dein ist unvollständig/fehlerhaft:
Du hast ein schliessendes </div> zu wenig.
Im CSS könntest Du es mit "float: left" und "float: right" probieren, statt dem neuen Befehl "display".
– j.

greatblock · 02.02.2023

Hm. Ist das Thema erledigt? Du packst das Logo in ein <div class="logo" >

Du gibst dem Logo ein
"Float: left"
und der

<nav>
"Float: right"
</nav>

Wenn du's verstanden hast, schreib ich dir den CSS Code. Ich würde generell ohne <UL> und ohne Flexen

von der Verschachtelung wuerde ich's so machen:

<header>
<div class="nav-bar">

<div class="logo"> </div>
<nav>
<a href="#" class="btn">Fotografie</a>
<a href="#" class="btn">Portfolio</a>
<a href="#" class="btn">Über mich</a>
<a href="#" class="btn">Kontakt</a>
</nav>

</div>
</header>

greatblock · 01.03.2023

Myhar schrieb:
Floats werden hier gar nicht gebraucht, das kann mit Flexbox gut umgesetzt werden. Oder meinetwegen auch mit grid, aber nicht mit floats.

Ich mag deswegen keinen Thread erstellen, drum versuche ich es hier.

Ist das Floaten mittlerweile out? Kommt doch, wenn man richtig coded, auf das Gleiche hinaus.

Myhar · 06.03.2023

greatblock schrieb:
Ist das Floaten mittlerweile out? Kommt doch, wenn man richtig coded, auf das Gleiche hinaus.

Es ist seit einigen Jahren out. Floats werden nur noch dort verwendet, wo etwas "gefloated" werden muss. zB Wenn Text um ein Bild fließen soll.
Ansonsten ist flexbox für eindimensionale Layouts und Grid für zweidimensionale Layouts zu bevorzugen. Es ist einfacher zu coden und weitaus weniger fehleranfällig als floats.

greatblock · 06.03.2023

Ja, ich seh's auch in den Instagram Trends. Die sind jetzt mittlerweile alle am "flexen" und sind begeistert. Aber die meisten Codes sind nicht clean und es entstehen Browserabweichungen.

Edit: Für die Jenigen die mitlesen:
https://css-tricks.com/is-css-float-deprecated/

Ich bin's gewohnt noch zu "floaten" und dann füge ich media queries hinzu und es läuft am Schnürchen. Ich glaube meine Seiten lassen sich sogar auf dem IE6 aufrufen.

Myhar · 06.03.2023

greatblock schrieb:
Ja, ich seh's auch in den Instagram Trends. Die sind jetzt mittlerweile alle am "flexen" und sind begeistert. Aber die meisten Codes sind nicht clean und es entstehen Browserabweichungen.

Was meinst du damit? Ist jetzt aber sehr abseits vom Thema, können dazu auch gerne einen eigenen Thread aufmachen. Ist ja sonst nicht viel los hier

Ich habe meine Seiten früher auch mit floats und für IE6 gebaut. Aber heutzutage geht das alles doch ein wenig einfacher und mit weniger Code als noch zu IE6 Zeiten.

Obwohl dank der neuen Features ist es im Endeffekt dann doch mehr Code als zu IE6 Zeiten. Das wird dann aber doch sehr Philosophisch