CSS Grid - merkwürdiges Verhalten

    Hallo Freunde der Webprogrammierung!

    Ich habe vor kurzem angefangen mit CSS Grid ein responsives Layout zu gestalten...das ging alles recht gut mit der mobilen Ansicht, bei der Ausgabe mit größeren Geräten habe ich dann allerdings Probleme bei denen ich absolut nicht durchblicke.

    Ergebnis und Quellcode wäre hier zu betrachten: http://blechlavine.bplaced.net

    Der Footer hängt da wo er eigentlich nicht sein sollte, mitten im Content.

    Nach vielen Stunden des herumexperimentierens habe ich dem Abhilfe schaffen können indem ich dem .container ein height-Attribut verpasste.
    Funktioniert! ...allerdings verschwindet der Header auf mysteriöse Art und Weise komplett :evil:

    Auch versuche mit Hacks wie overflow: auto und weitere verliefen sich im nichts.
    Wenigstens ließ sich damit der div-Container, mit dem ich das Grid in Form bringe, bis ans tatsächliche Ende der Seite und nicht des Browserfensters vergrößern...hatte dann allerdings einen unschönen Scrollbalken :shock:

    Um besser sehen zu können was mit den ganzen Bereichen passiert habe ich Rahmen verwendet...und wieder ein Phänomen:
    warum ist der Content ohne Rahmen?


    Ich hoffe Ihr könnt mir hier die gröbsten Fehler aufzeigen, ich selber bekomme das nicht gelöst...
    Danke schonmal!

    Mir raucht der Gulliver :smilie085:

    Erledigt!
    Wie bringe ich das Raster jetzt in die Form und Position die ich gerne hätte wenn div kein Elternelement sein darf?
    ...damit funktioniert das Raster doch überhaupt nicht mehr, oder verstehe ich da etwas falsch?

    Mir raucht der Gulliver :smilie085:

    3 Mal editiert, zuletzt von Sysmatic (1. Oktober 2018 um 11:11)

    Die Elemente 'language' und 'content' gibt es nicht im HTML (und meines Wissens auch in keinem anderen HTML Standard).
    Mache daraus jeweils ein <div class="language">...</div> bzw ein <div class="content">...</div> und spreche die Elemente dann im CSS mit .language und .content an.
    Dein <header></header> ist im Code ein Kindelement von einem <a....>...</a>! Damit richtet sich die Header-Höhe nach der Höhe des Elternelements!
    Gib dem <a...> die Höhe, die du für dein Layout brauchst und der Header (in dem <a..>) wird sich entsprechend (mit height: 100%;) dem anpassen.
    Wenn es noch mehr Probleme und Fragen gibt, einfach melden.... hier wirst du geholfen!

    if(!sleep)

    {$sheep++;}

    Ja Danke, die Elemente habe ich vor 5 Minuten noch abgeändert...jetzt sieht das Ganze auch nach einem Rohling aus mit dem man arbeiten kann :idea:
    Ich habe mich seit der HTML4-Ära dummerweise dahingehend nicht mehr weiterentwickelt und die validierung immer für überflüssig gehalten...

    Danke nochmal und evtl. bis später

    Mir raucht der Gulliver :smilie085:

    Ich mal wieder :p (ich hoffe dass ich hier mit meinen Sorgen weiter machen darf)

    Wollte mich daran machen die mobile Ansicht etwas aufzuhübschen.
    Nun stellte ich fest das sämtliche div's überlappen, sobald ich die Höhe des Browserfensters verringere.
    Sieht auf dem Smartphone natürlich genauso aus...

    Ich weiß dass ich da vor allem an den Höhen-Werten rumspielen muss, habe auch lange genug experimentiert und die verrücktesten Ergebnisse erzielt.
    Am Ende hat sich alles wieder zusammen geschoben oder sah gänzlich falsch aus.

    Kann mir hier geholfen werden?
    Danke schonmal! :o

    Mir raucht der Gulliver :smilie085:

    Was mir als Erstes auffällt, ist deine etwas ungeschickte Konfiguration des 'Headers'.. da hast du so was stehen:

    HTML
    <a class="banner-homelink" href="index.php"><header></header></a>


    und dem <header> gibst du ein Hintergrundbild ... dem <a> eine feste Höhe. Ich denke, das ist Teil deines Problems.
    Versuche doch mal, ob du durch eine andere Anordnung der Element und einfügen des Bildes als Bild (nicht als Hintergrund) eine Verbesserung erzielen kannst.

    HTML
    <header><a class="banner-homelink" href="index.php"><img src="hier.dein.Bild.jpg" alt=""></a></header>


    Im CSS muss dann die Höhe für a weg.
    Für den header das Hintergrundbild weg... im header dann 'text-align: center;' notieren.
    und für das Bild... 'header .banner-homelink img {width: 100%; max-width: 488px;}

    Da ich das nicht 'live' testen kann, musst du es einfach mal versuchen.. mehr als schief gehen kann es nicht.

    if(!sleep)

    {$sheep++;}

    Habe ich jetzt mal gemacht...schneidet sich nun zwar mit der Desktop-Ansicht, aber daran muss ich ohnehin noch feilen.
    Ich halte das zwar für eine bessere Lösung, jedoch überlagern sich die Container trotzdem noch.
    Kann man es nicht ermöglichen dass alle dort bleiben wo sie sind und lediglich den Content zusammen schieben?

    Im Augenblick fehlt mir gerade die Zeit um weiter daran herumzuschrauben :?

    Mir raucht der Gulliver :smilie085:

    Also dann sehe ich ein weiteres Problem in deinem CSS für die Klasse .container!

    Lösche da mal die height: 100vh;
    Das scheint das Layout irgendwie zu stauchen!

    if(!sleep)

    {$sheep++;}

    Ich werd' bekloppt :D
    Das war die einzigste Höheneinstellung an die ich gar nicht mehr gedacht habe...dabei weiß ich nicht mal was vh ist :?

    Muss dir erneut meinen Dank aussprechen, vor allem weil du mich immer wieder an die Hand nimmst bis es funktioniert!

    Ich denke ab hier komme ich ohne große Hilfe weiter. Wenn nicht, tauche ich hier wieder auf!

    Tolles Forum, Klasse Leute! :danke2:

    Mir raucht der Gulliver :smilie085:

    :)... viel Erfolg! Und sollte es wieder haken, einfach wieder melden - hier ist immer jemand der dir gerne weiter hilft.

    ... hmm... vh steht für viewport height .... also 100vh ist die Höhe des sichtbaren Bildschirmes.

    if(!sleep)

    {$sheep++;}