Vielen Dank!
Genau so ein Schema hatte ich gesucht. Vor allem sind die Kommentare für mich sehr informativ.
Im augenblick habe ich noch keine lösung gefunden das hintegrundbild responsiv zumachen damit es in der Mobilansicht mittig und etwas kleiner erscheint.
Jetzt passt die Größe nicht und obwohl background-position: right;
hängt das bild übergroß nur halb links.
Dann hatte ich da wohl eine falsche Vorstellung ist noch von html4
<head></head>
<body>
<div id="header">meist eine grafik</header>
<div id="nav"></nav>
<div id="content"></conten>
<div id="footer"><footer<
</body<Davon muss ich mich wohl verabschieden.
Eigentlich wusste ich das schon deshalb habe ich angefangen mittel Bootstrap snippets und copy & paste was zusammen zu basteln.
Merke aber gerade jetzt, dass ich vieles lesen kann aber nicht unbedingt die Hirachie versteh.
Da komm ich mir ziemlich blöd vor.
Was ich vorhabe
start mit bildschirmfüllende Grafik (welches vielleicht auch durch ein Slider (Carousel) umgebaut werden kann).
Die Navigation soll oben angesiedelt sein und z-index mäßig überdem Bild fixiert sein.
Wenn mann runterscrollt kommt etwas info und blabla.
darauf folgen einige Galerien
Dann Impressum Datenschutz und letztendlich footer mit einigen Infos.
Das soll die Hierachie sein.
Wie das bei html4 aussah habe ich ja mal kurz als Sources gezeigt
Wie würde das bei meinem Vorhaben mit Html5 aussehen?
Ein schema würde reichen.
Jetzt hab ich mich schon wieder vergaloppiert
Step by Step
Erst das Nav/Header (oder wie man es nennt) zum Erfolg bringen.
Du meinst sicherlich beim OnePager, dass das Bild nur im ersten "Part" füllend ist. Wenn man dann weiter runter scrollt, kommt dann der nächste Part, ohne das Bild. Das meinst du wohl mit "header".
Dann gehört das Bild aber weder in den body, noch in der header, sondern als Hintergrundbild in den ersten Part.
ich glaube es genau so zu meinen. Hast du dazu eine Idee?
Wobei ich immer Dachte Nav oder Header wäre der erste Part?
Ich glaub wir haben ein verständigungs problem.
Ich mach aber jetzt jetzt mal Sonntag und melde mich später wieder.
Vielen Dank für eure Unterstüzung
so soll es sein. ich habe dafür Stunden investiert schwamm drüber.
Doch wenn als nächstes darunter einen content anlegen will sollte ich das doch am besten mit <sections> machen oder?
Aber erst muss das bei der mobil ansicht in die mitte rücken.
Meine Idee wäre das Bild (bzw das sichtare) mittel Gimp auf kleinste Breite zuschneiden und dann den Body schwarz hinterlegen und das in den Header einzufügen.
Doch dazu müsste der Header aus dem Body raus. Oder
Achso es läuf auf einen Onepager raus
Ich versuch das nochmal genau zu beschreiben.
Wenn ich die Index.html aufrufen soll ein lustige Bild von mir Flächenfüllend erscheinen auf dem Bild ober nicht über dem Bild oben soll die navigation sein.
Ich habe dazu ein Youtube tutorial gefunden. Will die Sache aber selbst mit euch hier lösen
Ich hoffe ihr versteht was ich meine
Also meinst du ein Flächenfüllendes Hintergrundbild?
Ja, dein header-Tag hat im CSS ja kein "display:flex".
Wenn du es jetzt mit dem Code von Sempervivum einfügst, müsstest du dann noch der nav "width:100%" geben.
Flächenfüllend genau
Ich lade es mal hoch
Ich geh noch mal mein Html durch
@Netuser mit deinem css ändert sich nichts
@Sempervivium dein css rückt meine navigation nach links und wenn ich die Hintergrundfarbe von nav wegnehme ist die natürlich weg
zb so hab ich mir das gedacht ohne den schnickschnack
Deine Vorgehensweise ist richtig, aber deine nav hat einen schwarzen Hintergrund und überdeckt das Hintergrundbild des header. Wenn Du das löschst wird sofort das Hintergrundbild sichtbar, jedenfalls wenn ich es im Seiteninspektor hinzu füge:
Codeheader { background-image: url(img/header.png); background-size: auto; display: flex; align-items: center; background-size: contain; }Also keine Klasse nötig, ich musste aber background-size: contain; nehmen, damit das Bild sichtbar wird, denn das meiste dieses Bildes ist ja schwarz
das seh ich auch gleich an
Auch da passiert garnix
Stand lokal
<body>
<header class="header">
<nav>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span></a>
<div class="brand">Michael Schlegel</div>
<div class="list-container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Fischen</a></li>
<li><a href="#">Kulinarisches</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Datenschutz</a></li>
</ul>
</div>
</nav>
</header>
<main></main>
<footer></footer>
<script type="text/javascript" src="js/script.js" ></script>
</body>.header{
background: url(/img/header.png) no-repeat center;
background-size: cover;
}Aber auch hier passiert absolut nix
Ich habe hier 1900x800 großes Bild mit schwarzen Hintergrund welches ich Bildschirmfüllend hinter die Navigation legen würde.
In meinem Code liegt die Navigation ja schon im Header
<body>
<header>
<nav>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span></a>
<div class="brand">Michael Schlegel</div>
<div class="list-container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Fischen</a></li>
<li><a href="#">Kulinarisches</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Datenschutz</a></li>
</ul>
</div>
</nav>
</header>
<main></main>
<footer></footer>
<script type="text/javascript" src="js/script.js" ></script>
</body>Jetzt bin ich mir nicht sicher ob das eine gute Idee war
ich habe mal etwas probiert
.header {
background-image: url("img/header.png");
background-size: auto;
display: flex;
align-items: center;
}dann habe ich dem Header die class .header geben. nix passier
Dann habe ich den Header unter das <nav> gesetzt . nix passier
Dann habe ich den Header in ein div gesetzt. das halbiert mir die navigation aber ohne Bild.
Ich hoffe das Problem gut genug beschrieben zu haben.
was wäre die richtige vorgehensweise?
für den Header mach ich besser einen neuen Thread
Habe noch etwas Fintuning gemacht und jetzt erstmal zufrieden.
die neue @mediaquery
@media(max-width:750px){
.list-container ul {
flex-direction: column;
}
.list-container{
display: none;
width: 100%
}
.toggle-button{
flex-direction: column;
display: flex;
}
.brand {
align-self: center;
}
nav{
flex-direction: column;
}
.list-container ul{
/* flex-direction: column; */
width: 100%;
}
.list-container li{
text-align: center;
border-bottom: 4px solid transparent;
}
.list-container li:hover{
border-bottom: 4px solid purple;
width: auto;
align-self: center;
}
.list-container.active{
display: flex;
}
}Ab Morgen wird es dann interessant . Ich will die Navigation über ein im Header befindliches Bild legen.
Jetzt erstmal vielen Dank und Gute Nacht.
Auch hier hilft "align-self" weiter: Einfach auf "flex-start" ändern und das Logo rutscht nach oben.
Ich schäme mich schon aber seht selbst
desktop vertikal zu weit oben
Mobil soll alles Mittig sein. aber!
Nun beruhigt euch mal wieder Habe mir den Code von Netuser angeschaut und der sieht auch sehr übersichtlich und nachvollziehbar aus.
Und es ist auch gut wenn mal ein fertiger Code gezeigt wird
Aber ich will es tatsächlich step by Step selbst (natürlich mit eurer Hilfe) zu erarbeiten
Jetzt sieht es desktop mässig super aus aber mobil Sollte das logo bzw brand oben stehen
Langsam kommen wir der Sache näher.
align-self: center;
hier klappt das nicht. Ich mach mal lad mal neu hoch und mach screeshot
Screenshot_20220707_123845.png
Der Brand bzw. könnte auch ein Logo sein soll links vertikal ausgerichtet sein und die Navigation rechts mittig .
Das müsste ja schon volle breite sein. Aber mir ist aufgefallen dass meine css 2x die Regel nav hat.
1. am Anfang dann in der @media.
nav{
min-height: 80px;
display: flex;
justify-content: space-between;
align-items: flex-end;
background-color: rgb(56, 54, 54);
color: white;
}
.brand{
margin: 20px;
/* align-items: flex-start; */
font-size: 1.2em;
font-weight: bold;
color: aqua;
}
nav ul{
display:flex;
align-items: flex-end;
}
nav ul li{
/* height: calc(100% - 64px); */
padding: 30px;
list-style-type: none;
border-bottom: 4px solid transparent;
}
nav ul li:hover{
border-bottom: 4px solid purple;
}
nav ul li a{
color: white;
text-decoration: none;
font-size: 1em;
font-family: sans-serif;
}
.toggle-button{
position: absolute;
top: 25px;
right: 25px;
display: none;
justify-content: space-between;
width: 30px;
height:23px;
}
.toggle-button .bar{
height:4px;
width:100%;
background-color: white;
border-radius: 100px;
}
@media(max-width:750px){
.list-container ul {
flex-direction: column;
}
.list-container{
display: none;
width: 100%
}
.toggle-button{
flex-direction: column;
display: flex;
}
}
nav{
/* flex-direction: column; */
align-items: 100%;
}
.list-container ul{
/* flex-direction: column; */
width: 100%;
}
.list-container li{
text-align: center;
}
.list-container.active{
display: flex;
}Vielleicht sollte ich es alles noch mal von Anfang an machen. Denn irgendwo habe ich einen Fehler gemacht. 
Bei mir sieht das dann so aus
Es scheint jetzt zu funktionieren.
Habe es geschaft das menü rechts auszurichten. doch wie bekomme ich den .brand (Michael Schlegel) nach links mit einfach display:flex-start;
klapp es nicht.
Meiner Meinung nach musste dass doch auch in die <ul> was ich aber auch nicht hinbekommen habe