2 - Spaltiges Layout, responsitiv, automatische Breite

dh1sbg · #1 (**permalink**) 11.03.2020, 09:04

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

cloned · #2 (**permalink**) 11.03.2020, 11:01

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;
}

dh1sbg · #3 (**permalink**) 11.03.2020, 11:04

Vielen Dank!

ok ich war 3 Jahre weg von der CSS Entwicklung...

cloned · #4 (**permalink**) 11.03.2020, 11:35

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.

dh1sbg · #5 (**permalink**) 13.03.2020, 10:15

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>
.
.

Symptome:

der Scrollbalken erscheint nicht
Die Fusszeile rutscht nach unten

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

MrMurphy · #6 (**permalink**) 13.03.2020, 10:58

Zitat:

geht das überhaupt?

Ja. Ist es auch sinnvoll? In der Regel nicht.

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.

cloned · #7 (**permalink**) 13.03.2020, 11:52

@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?

dh1sbg · #8 (**permalink**) 13.03.2020, 11:55

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>

cloned · #9 (**permalink**) 13.03.2020, 11:57

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.

dh1sbg · #10 (**permalink**) 13.03.2020, 13:38

vielen Dank!

ich kämpfe noch mit dem seitlichen Scrollbalken s.o.

Liebe Grüße, Bernd

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
3 spaltiges Layout mit CSS	Serpico	CSS	2	20.12.2010 16:53
3 spaltiges CSS Layout mit fixer Breite!?	atmosfear	CSS	1	23.07.2008 11:27
zwei Spalten layout, IE Abstandproblem	paramit	CSS	2	03.07.2008 14:05
3 spaltiges Layout, Außen feste Breite, innen dynamisch	NicolaibassDH	CSS	3	13.06.2007 12:09
Dynamische Layout Breite und Höhe	altes-kind	CSS	7	12.01.2007 12:54