Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren bearbeitet von einsiedler 11.03.2024 22:58 Zu Deiner idee: Du meinst also als oberstes Raster in etwa so: ~~~ HTML body { height:100vh; display grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 16em; } header .main-head { background: tomato; grid-row: 1 / 2; grid-column:1 / 2; } #navigations { background: gold; grid-row: 1 / 2; grid-column:2 / 2; } main #main-content { background: lightgreen; grid-row: 2 / 2; grid-column: 1 / 2; } ~~~ Wäre das so richtig? Oder etwa so: html ~~~ <body id="skip-to-top" class=" "> <header class="main-head"> <h1>Wandzeitung - <span>täglich Neuigkeiten</span></h1> </header> <aside id="navigations"> <nav id="main-nav" class="main-navi" aria-labelledby="mainnav-label"> ... </nav> </aside> <main id="main-content" class="main-content"> </main> ~~~ ~~~ body { display grid; height: calc(100vh - 16px); grid: "main-head navigations" auto "main main" auto / auto; gap: 0; } .main-head { grid-area: main-head; } .navigations { grid-area: navigations; } main #main-content{ grid-area: main; } ~~~ Wie wäre es korrekter um da vorzugehen? Oder müsste ich header und nav (ohne aside) mit einem div zusammenfassen? T.
Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren bearbeitet von einsiedler 11.03.2024 23:28 Zu Deiner idee: Du meinst also als oberstes Raster in etwa so: ~~~ HTML body { height:100vh; display grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 16em; } header .main-head { background: tomato; grid-row: 1 / 2; grid-column:1 / 2; } #navigations { background: gold; grid-row: 1 / 2; grid-column:2 / 2; } main #main-content { background: lightgreen; grid-row: 2 / 2; grid-column: 1 / 2; } ~~~ Wäre das so richtig? Oder etwa so: html ~~~ <body id="skip-to-top" class=" "> <header class="main-head"> <h1>Wandzeitung - <span>täglich Neuigkeiten</span></h1> </header> <aside id="navigations"> <nav id="main-nav" class="main-navi" aria-labelledby="mainnav-label"> ... </nav> </aside> <main id="main-content" class="main-content"> </main> ~~~ ~~~ body { height:100vh; display grid; height: calc(100% - 16px); grid: "main-head navigations" auto "main main" auto / auto; gap: 0; } .main-head { grid-area: main-head; } .navigations { grid-area: navigations; } main #main-content{ grid-area: main; } ~~~ Wie wäre es korrekter um da vorzugehen? Oder müsste ich header und nav (ohne aside) mit einem div zusammenfassen? T.
Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren bearbeitet von einsiedler 11.03.2024 23:25 Zu Deiner idee: Du meinst also als oberstes Raster in etwa so: ~~~ HTML body { height:100vh; display grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 16em; } header .main-head { background: tomato; grid-row: 1 / 2; grid-column:1 / 2; } #navigations { background: gold; grid-row: 1 / 2; grid-column:2 / 2; } main #main-content { background: lightgreen; grid-row: 2 / 2; grid-column: 1 / 2; } ~~~ Wäre das so richtig? Oder etwa so: html ~~~ <body id="skip-to-top" class=" "> <header class="main-head"> <h1>Wandzeitung - <span>täglich Neuigkeiten</span></h1> </header> <aside id="navigations"> <nav id="main-nav" class="main-navi" aria-labelledby="mainnav-label"> ... </nav> </aside> <main id="main-content" class="main-content"> </main> ~~~ ~~~ body { height:100vh; display grid; height: calc(100% - 16px); grid: "main-head navigations" auto "main main" auto / auto; gap: 0; } .main-head { grid-area: main-head; } .navigations { grid-area: navigations; } main #main-content{ grid-area: main; } ~~~ Wie wäre es korrekter um da vorzugehen? T.
Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren bearbeitet von einsiedler 11.03.2024 23:20 Zu Deiner idee: Du meinst also als oberstes Raster in etwa so: ~~~ HTML body { height:100vh; display grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 16em; } header .main-head { background: tomato; grid-row: 1 / 2; grid-column:1 / 2; } #navigations { background: gold; grid-row: 1 / 2; grid-column:2 / 2; } main #main-content { background: lightgreen; grid-row: 2 / 2; grid-column: 1 / 2; } ~~~ Wäre das so richtig? Oder etwa so: html ~~~ <body id="skip-to-top" class=" "> <header class="main-head"> <h1>Wandzeitung - <span>täglich Neuigkeiten</span></h1> </header> <aside id="navigations"> <nav id="main-nav" class="main-navi" aria-labelledby="mainnav-label"> ... </nav> </aside> <main id="main-content" class="main-content"> </main> ~~~ ~~~ body { height:100vh; display grid; height: calc(100% - 16px); grid: "main-head navigations" auto "main main" auto / auto; gap: 0; } .main-head { grid-area: main-head; } .navigations { grid-area: navigations; } main #main-content{ grid-area: main; } ~~~ T.
Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren bearbeitet von einsiedler 11.03.2024 23:19 Zu Deiner idee: Du meinst also als oberstes Raster in etwa so: ~~~ HTML body { height:100vh; display grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 16em; } header .main-head { background: tomato; grid-row: 1 / 2; grid-column:1 / 2; } #navigations { background: gold; grid-row: 1 / 2; grid-column:2 / 2; } main #main-content { background: lightgreen; grid-row: 2 / 2; grid-column: 1 / 2; } ~~~ Wäre das so richtig? Oder etwa so: html ~~~ <body id="skip-to-top" class="mainbox"> <header class="main-head"> <h1>Wandzeitung - <span>täglich Neuigkeiten</span></h1> </header> <aside id="navigations"> <nav id="main-nav" class="main-navi" aria-labelledby="mainnav-label"> ... </nav> </aside> <main id="main-content" class="main-content"> </main> ~~~ ~~~ body { height:100vh; display grid; height: calc(100% - 16px); grid: "main-head navigations" auto "main main" auto / auto; gap: 0; } .main-head { grid-area: main-head; } .navigations { grid-area: navigations; } main { grid-area: main; } ~~~ T.
Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren bearbeitet von einsiedler 11.03.2024 23:16 Zu Deiner idee: Du meinst also als oberstes Raster in etwa so: ~~~ HTML body { height:100vh; display grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 16em; } header .main-head { background: tomato; grid-row: 1 / 2; grid-column:1 / 2; } #navigations { background: gold; grid-row: 1 / 2; grid-column:2 / 2; } main #main-content { background: lightgreen; grid-row: 2 / 2; grid-column: 1 / 2; } ~~~ Wäre das so richtig? T.
nicht angemeldet
