Navigation + Bild
1 
at
0 0
Navigation + Bild
HenryHallo,
ich möchte gerne auf meiner neuen Webseite so eine Navigation inkl. Logo auf der Linken Seite gestallten? Wenn es geht ohne großes Float. Ist dieses möglich?
Beispielseite: http://sport1media.de/
Das Menü wird auf der oben genannten Seite etwas kleiner und größer. Das möchte ich nicht, das kann gerne so "klein" bleiben wie wenn man auf der Seite etwas nach unten scrollt.
Darunter möchte ich gerne ein Bild platzieren, wie es auf dieser Seite zu sehen ist https://www.dieberater.de/projekte/
Ich habe so angefangen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="robots" content="index,follow">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="themes/herbst/css/style.css">
<title>Startseite - Example.com</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Wir über uns</a></li>
<li><a href="#">Magazin</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Und das CSS dazu
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
border-top: 5px solid #117092
}
.container {
max-width: 75.000em;
margin: 0 auto;
}
Das Bild unterhalb der Navigation, packe ich dieses mit in den <header> oder soll ich darunter ein extra Bereich aufmachen mit einer <section>? Den Text darin packe ich in ein <div> oder? Und das Bild als <img> oder lieber als Background-Image?
Ich habe noch ein Online-Beispiel https://codepen.io/anon/pen/xLgrBe
-
Hallo Sophie.
Das Bild unterhalb der Navigation, packe ich dieses mit in den <header> oder soll ich darunter ein extra Bereich aufmachen mit einer <section>?
Wenn du die Navigation und dieses Bild als Einheit betrachtest oder das Bild seinen Sinn nur oberhalb des übrigen Seiteninhaltes entfalten kann, gehört es in das
<header>-Element. Anderenfalls sollte es separiert werden.Den Text darin packe ich in ein <div> oder?
Wenn du meinst, dass kein anderes passendes Element wie eine Überschrift oder ein Absatz dafür besser geeignet ist, ja.
Und das Bild als <img> oder lieber als Background-Image?
Wenn dein Bild einen im Kontext der Seite nennenswerten Informationsgehalt hat, gehört es ins HTML, anderenfalls ins CSS.
MfG, at
-
Hallo an alle,
ich habe bisschen gebastelt, bin ich auf dem richtigen Weg?
* { box-sizing: border-box; } a { text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } body, html{ font-size: 100%; font-family: "Helvetica", sans-serif; } body,html{ margin:0; padding: 0; } .container { max-width: 75.000em; margin: 0 auto; } nav{ display: flex; justify-content: space-between; align-items: center; } nav ul{ display: flex; align-items: center; } nav div:first-child h1{ padding: 0; margin:0; } nav div:first-child img{ max-height: 100%; } nav ul li{ flex: 1 0 auto; position: relative; } nav ul li a{ padding:1.2em 1em; }Und mein HTML
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="robots" content="index,follow"> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/css" href="themes/herbst/css/style.css"> <title>Startseite - Example.com</title> </head> <body> <header> <div class="container"> <nav> <div> <h1><a href="#"><img src="http://placehold.it/100x40" alt="logo"></a></h1> </div> <ul> <li><a href="#">Startseite</a></li> <li><a href="#">Leistungen</a></li> <li><a href="#">Wir über uns</a></li> <li><a href="#">Magazin</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> </div> </header> </body> </html>Auch gibt es wieder ein Online Beispiel https://codepen.io/anon/pen/GvrvQM
-
Hallo Sophie,
Auch gibt es wieder ein Online Beispiel https://codepen.io/anon/pen/GvrvQM
ich kann dieses Beispiel im IE, genau wie das andere von dir, nicht öffnen. Es geschieht dann auf Codepen so etwas wie eine Endlosschleife, fängt an zu laden, dann Abbruch, fängt an zu laden, Abbruch...usw...
Dachte zuerst, liegt an meinem System, aber andere Codepenbeispiele zeigt mir der Browser problemlos an. Kann das bitte mal jemand mit IE11 nachprüfen?
Nachtrag:
Im FF geht's, zeigt aber sehr viele Fehler an.
Gruss
Henry-
Hallo Henry,
jetzt bin ich sprachlos. Der Fehler produziert aber nicht mein Code? Unterm Google Chrome ist alles ruhig, siehe Screenshot
-
Hallo Sophie,
jetzt bin ich sprachlos. Der Fehler produziert aber nicht mein Code? Unterm Google Chrome ist alles ruhig, siehe Screenshot
neee, denke nicht, liegt wahrscheinlich an dem was Codepen daraus macht... Gruss
Henry
-
-
-
-
Hallo
Die beiden Navigationen taugen nicht als Vorlage.
Wenn du dich für Navigationen interessierst solltest du einfach mal ausprobieren ob sie sich per Tastatur komplett bedienen lassen. Wenn nicht - gleich wieder vergessen. Ein einfacher aber wirkungsvoller Test.
Gruss
MrMurphy
-
Hallo MrMurphy1,
dann bin ich mit meinem Beisiel schon besser dran? https://forum.selfhtml.org/self/2017/aug/6/navigation-plus-bild/1701054#m1701054
-
