Gib dem header mal folgendes:
Code
height: calc(100vh - 80px);
padding-top: 80px;Die 80px bezogen auf deine nav-Leiste.
Und dein "margin-bottom" weg.
Beiträge von nextuser
-
-
Gibt es für mein CSS eine elegantere Möglichkeit. Stichwort "margin-bottom!?
Wozu dient denn bei dir der Abstand von 300px?
-
das "min-width" hat in beiden fällen keine Auswirkung.
Ich schrieb ja auch "dem Bild...", nicht dem header.
-
doch wie bekomme ich das Bild in der Smartphone Ansicht eingepasst
Indem du dem Bild z.B. "min-width:200px" gibst, skaliert es automatisch mit.
-
Doch obwohl der header tag unter der Navigation angesiedelt sein Soll, scheint dieser über oder besser unter der Navigation zu liegen...
Ja, und das ist auch das normale Verhalten, wenn du nav als "position:absolute" setzt. Dann wird die nav ja aus dem normalen Fluss genommen und der header hat über sich "nichts".
-
Ok das werde ich probieren aber Geduld habe auch noch andere Lebensbaustellen.
Jo hab doch garnichts in diese Richtung gesagt...
Ich bin hier auch nicht ständig präsent.
-
Im augenblick habe ich noch keine lösung gefunden das hintegrundbild responsiv zumachen...
Mach es doch so, wie du es Tage zuvor schonmal erwähnt hast.
Einfach nur das sichtbare aus dem Bild ausschneiden und als Hintergrundbild mit schwarzem Hintergrund nutzen.
So kannst du das Bild dann auch wunderbar mobil skalieren...
-
Ich möchte eine zugeschnittene Version einer Website in eine eigene Website einbetten.
Mal ganz von der Umsetzung & evtl. Problemen (sofern es eine fremde Webseite ist) abgesehen...
Darf ich fragen, wo da der Sinn ist?
-
Auch wenn ich bei deinem Background mit einer kleineren Erweiterung starten würde...
Infos zum Erstellen lassen sich doch recht leicht finden.
Für eine Chrome-Erweiterung ist der offizielle Leitfaden sicherlich ein guter Start.
Auch Mozilla nimmt dich an die Hand.
-
Ja, die "div-Container mit ID"-Zeiten um die Seite zu strukturieren sind lange vorbei!
Wie würde das bei meinem Vorhaben mit Html5 aussehen?
Ein schema würde reichen.
Bei einer OnePage mit deinen Angaben würde ein simples
HTML
Alles anzeigen<html> <head></head> <body> <nav></nav> <!-- Falls Menü über (nicht auf) dem Bild sein soll. Oder mit z.B. "position:absolute/fixed", falls Menü fest sein soll. --> <!-- Ansonsten, falls Menü nicht fix, aber auf dem Startbild sein soll, dann die nav lieber mit in den header-Tag! --> <header></header> <!-- Start / bildschirmfüllende Grafik / Slider (+ evtl. Menü...) --> <main> <!-- Eigentlicher Inhalt --> <section></section> <section></section> <!-- Abschnitte (Je nach Inhalt der Parts kann hier auch "article" passender sein...) --> <section></section> <!-- Deine Parts (Info, Gallerien, Impressum & Datenschutz) sind eher unabhängig zueinander. Da kann man auch "article" verwenden. --> </main> <footer></footer> <!-- Footer mit deinen Infos --> </body> </html>reichen.
-
Wobei ich immer Dachte Nav oder Header wäre der erste Part?
nav ist eher für die Navigation / das Menü einer Seite. Der header-Tag ist für Header-Bereiche, z.B. wenn man in einem "article" oder "section" neben einer Überschrift noch andere Elemente als "Kopf" zusammenfassen möchte.
Die Tags header & footer sind selbstbezeichnend und können auch mehrfach in einer Seite, z.B. jeweils in entsprechenden Abschnitten auftauchen.
Ich würde es ganz simpel mit "main >section > ..." machen, wobei die section jeweils ein Abschnitt darstellt.
Edit:
Wobei du es durchaus auch mit dem header machen kannst, wenn dein erster Part wie in deinem Beispiel-Screenshot nur aus wenigen, einleitenden Elementen wie einer Überschrift & einem Button besteht.
Ein simpler Aufbau wäre z.B.:
HTML
Alles anzeigen<main> <header> <h1></h1> <!-- Globaler Seiten-Header --> </header> <section> <h2></h2> <!-- Abschnitt 1 --> </section> <section> <h2></h2> <!-- Abschnitt 2 --> </section> <!-- ... --> </main>Je nachdem, wie groß & "eigenständig" deine Parts sind, wäre hier durchaus auch der article-Tag anstatt section angebracht...
-
Ich glaub wir haben ein verständigungs problem.
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.
-
Doch wenn als nächstes darunter einen content anlegen will sollte ich das doch am besten mit <sections> machen oder?
Den eigentlichen Content-Bereich würde ich in den main-Tag setzen.
Für die weitere Gliederung dann entsprechend mit article, section, aside, header, footer ect... arbeiten.
Aber erst muss das bei der mobil ansicht in die mitte rücken.
Du könntest z.B. noch folgendes setzen:
CSSbackground-position: right;So würde man zumindest auf bei der mobilen Ansicht das eigentliche Bild und nicht nur die schwarze Fläche sehen.
Wäre aber auch nicht optimal.
Meine Idee wäre das Bild (bzw das sichtare) mittel Gimp auf kleinste Breite zuschneiden...
Das wäre deutlich besser.
... und dann den Body schwarz hinterlegen und das in den Header einzufügen.
Doch dazu müsste der Haeder aus dem Body raus. Oder
Warum jetzt wieder in den header? Ich dachte, du willst das Bild flächenfüllend haben?
Und header aus dem body raus geht nicht. Der header-Tag ist != der head-Tag.
-
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.
Ja, dann gehört das Bild aber nicht in den header, sondern in den body.
Soll dass das header-Bild sein? Ist von dem Seitenverhältnis dann nicht so optimal...
Also so?
-
Ich lade es mal hochJa, wie ich gesagt habe. Du musst die Bild-Url mit einem Schrägstrich beginnen, sonst sucht er das Bild, wegen relativem Pfad, in deinem css-Ordner.
-
Flächenfüllend genau
Also dann müsste das Bild ja nicht in den header. Oder meintest du nur, wie bereits geschehen, flächenfüllend IM header?
-
@Netuser mit deinem css ändert sich nichts
Wird kein Bild angezeigt oder was meinst du damit? In der Entwicklerkonsole, wenn du mit dem Mauszeiger über das "background: url..." fährst, erhälst du dann die Info, das die Grafik nicht geladen werden konnte?
zb so hab ich mir das gedacht ohne den schnickschnack
Also meinst du ein Flächenfüllendes Hintergrundbild?
@Sempervivium dein css rückt meine navigation nach links...
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.
-
Aber auch hier passiert absolut nix
Was genau passiert nicht? Wird kein Bild angezeigt?
Ich muss auf deiner Seite die Bild-Url mit einem Schrägstrich beginnen (/img/header.png), um ein Bild zu erhalten.
Ohne versucht er das Bild in deinem css-Ordner zu finden.
Hier:
-
Sofern das Bild auch auf die volle Seitenbreite gedehnt werden darf, wäre auch folgendes möglich:
CSSbackground: url(/img/header.png) no-repeat center; background-size: cover; -
BTW: Bei dem Posting #19 frage ich mich, wo die Mitglieder sind, die ständig das Posten von fertigem Code beanstanden. In diesem Fall gibt sich der Fragesteller große Mühe, sich das Verständnis für die Dinge zu erarbeiten und es ist fraglich, ob das Copy&Paste von fertigem Code dabei zielführend ist. Der Lernfortschritt wird dabei gleich null sein.
Wer redet denn hier von Copy&Paste?
Der größte Teil davon ist doch SEIN CODE!
Ich habe nur paar Anpassungsmöglichkeiten aufgezeigt, die er sich anschauen kann wenn er will.
Hier geht doch keiner davon aus, das er HIER jetzt C&P macht, wo es doch seinem Code entnommen ist und er sich Schritt für Schritt voranbringen möchte!
Außerdem bin ich paar Sätze vor dem geposteten Code ja darauf eingegangen, wie sein eigentliches Problem in seiem Code zu lösen ist, also so what?
