|
|||
![]()
ich möchte so ein Layout machen:
Kopfzeile Kopfzeile Kopfzeile Kopfzeile Links Menü Rechts Inhalt Links Menü Rechts Inhalt Links Menü Rechts Inhalt Links Menü Rechts Inhalt Fusszeile Fuss Fuss Fuss mit diesen Anforderungen: 1. Die Breite soll sich automatisch anpassen: von 700 px bis "superbreitem Bildschirm 2. Kleiner als 700 px wie z.B. Handy: Kopf Zeile Menü Zeile Inhalts-Zeile Fuss-Zeile 3 Die Breite der Menüzeile, der Inhalszeile soll sich am Menü bzw Inhalt orientieren, abhängig von der Bildschirmbreite Ich habe mich hier orientiert: CSS 4 You - The Finest in Stylesheets: Workshop Layouten ohne Tabellen und experimentiere damit - offensichtlich habe ich Probleme: meine Anforderungen kann ich nicht so umsetzen. Frage: Sind meine Vorstellungen & Anforderungen zu extrem und mit CSS nicht realisierbar? Dieses "einfache Layout" müsste doch grundsätzlich mal umgesetzt worden sein? Wenn ja, wo? ![]() Liebe Grüße Bruno |
Sponsored Links |
|
|||
![]()
Hui, eine Zeitreise. Wie findet man solche uralten Anleitungen? Das war wohl damals einmal aktuell aber heute kann man das vergessen (Ist nicht böse gemeint, bin nur verwundert)
Verwende display: grid; für deine Anforderungen. in etwa so ein Aufbau: Code:
<header class="grid-header"> <p>kopfzeile</p> </header> <nav class="grid-menu"> <ul> <li> item 1</li> <li> item 2 </li> </ul> </nav> <main class="grid-main"> <h1> Best content ever </h1> </main> <footer class="grid-footer"> <ul> <li> item 1</li> <li> item 2 </li> </ul> </footer> Code:
body { display: grid; grid-template-areas: "header header" "navigation main" "footer footer"; grid-template-rows: auto 1fr auto; min-height: 100vh; } .grid-header { grid-area: header; } .grid-menu { grid-area: navigation; } .grid-main { grid-area: main; } .grid-footer { grid-area: footer; } .grid-footer ul { display: flex; list-style-type: none; } |
Sponsored Links |
|
|||
![]()
Ehrlich gesagt ist der von dir verlinkte Artikel schon 10 Jahre veraltet (ist nicht böse gemeint, wenn man nicht Hauptberuflich damit arbeitet gehen viele Sachen an einem vorbei, man kann nicht überall am aktuellen Stand bleiben).
Vor 10 Jahren gab es bereits flexbox, seit 3-5 Jahren schon grid (zugegeben, grid kann man nur verwenden, wenn IE nicht so sehr unterstützt werden soll, bzw man einen fallback für flexbox schreibt) Aber lies dich in die beiden Themen ein (flexbox & grid), damit baut man heutzutage ein Layout. Edit: mein Beispiel zeigt nur einmal einen grundlegenden Aufbau für dein Grundgerüst, mittels mediaqueries kann man das dann zb für Geräte mit kleinem Bildschirm umstellen. Geändert von cloned (11.03.2020 um 11:07 Uhr) |
|
|||
![]()
ich möchte den Container "grid-main" (s.o) mit einem Scrollbalken versehen:
HTML-Code:
<main class="grid-main"> <div style = "overflow-y: scroll;"> <h1> Best content ever </h1> <h1> Best content ever </h1> . . </div> . .
Was muss ich tun, damit der Scrillbalken erscheint UND die Fusszeile auf der Seite bleibt - geht das überhaupt? Das Layout der HTML und CSS ist das von oben. Liebe Grüße Bruno |
|
|||
![]() Zitat:
Zunächst brauchst du einen dafür geeigneten HTML-Quelltext - auch zum Testen. Deiner ist dafür denkbar ungeeignet. CSS dann mit Flexbox oder CSS-Grid. |
|
|||
![]()
@MrMurphy er verwendet da wohl schon mein HTML (+CSS), welches auf CSS-Grid basiert.
Man kann das sehr wohl machen, wo du "grid-template-rows: auto 1fr auto;" definiert kannst du natürlich auch andere werte vergeben. Du könntest so etwas wie 5vh 90vh 5vh als Wert definieren. Aber bitte kopiere das nicht einfach, informiere dihc, was das bedeutet und wieso das definiert wird. Kommt natürlich auch darauf an was dann dein Endergebnis sein soll? Soll es wie ein Frame-Layout aus dem vorigen Jahrtausend wirken? Also header + footer immer sichtbar? |
|
|||
![]()
ich habe einen funktionierenden Quelltext:
HTML-Code:
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Filter</title> <style type="text/css"> body { /* auf Grid umstellen */ display: grid; /* Grid Bereiche festlegen */ grid-template-areas: "header header" "navigation main" "footer footer"; /* Rows Höhe und col Breite festlegen 1fr=> ??*/ grid-template-rows: auto 1fr auto; grid-template-columns: minmax(100px, 200px) 1fr ; min-height: 100vh; } .grid-header { grid-area: header; background-color:#fee; } .grid-menu { grid-area: navigation; background-color: #eef; } .grid-main { grid-area: main; } .grid-footer { grid-area: footer; background-color:#fee; } .grid-footer ul { display: flex; list-style-type: none; } </style> </head> <body> <header class="grid-header"> <p>kopfzeile</p> </header> <nav class="grid-menu"> <ul> <li> item 1</li> <li> item 2 </li> </ul> <?php //include("filter.php"); ?> </nav> <main class="grid-main"> <div style = "overflow-y: scroll;"> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> <h1> Best content ever </h1> </div> </main> <footer class="grid-footer"> <ul> <li> item 1</li> <li> item 2 </li> </ul> </footer> </body> </html> |
|
|||
![]()
Sehe gerade dir ist nicht ganz klar was 1fr ist? Kurz gesagt das steht für "fraction" also 1fr ist eine Unterteilung. Wenn du 1fr 1fr 1fr schreibst dann hast du drei gleich breite Elemente.
Du kannst dann einfach 1fr anhängen und hast vier gleich breite elemente ohne Prozente anpassen zu müssen https://css-tricks.com/introduction-fr-css-unit/ siehe auch hier. |
Sponsored Links |
![]() |
Stichwörter |
2 spaltiges layout, automatische breite, responsitiv |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
3 spaltiges Layout mit CSS | Serpico | CSS | 2 | 20.12.2010 15:53 |
3 spaltiges CSS Layout mit fixer Breite!? | atmosfear | CSS | 1 | 23.07.2008 10:27 |
zwei Spalten layout, IE Abstandproblem | paramit | CSS | 2 | 03.07.2008 13:05 |
3 spaltiges Layout, Außen feste Breite, innen dynamisch | NicolaibassDH | CSS | 3 | 13.06.2007 11:09 |
Dynamische Layout Breite und Höhe | altes-kind | CSS | 7 | 12.01.2007 11:54 |