zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden 2 - Spaltiges Layout, responsitiv, automatische Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.03.2020, 09:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.04.2019
Beiträge: 5
dh1sbg befindet sich auf einem aufstrebenden Ast
Standard 2 - Spaltiges Layout, responsitiv, automatische Breite

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.03.2020, 11:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.03.2020, 11:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.04.2019
Beiträge: 5
dh1sbg befindet sich auf einem aufstrebenden Ast
Standard oha!

Vielen Dank!

ok ich war 3 Jahre weg von der CSS Entwicklung...
Mit Zitat antworten
  #4 (permalink)  
Alt 11.03.2020, 11:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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 12:07 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 13.03.2020, 10:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.04.2019
Beiträge: 5
dh1sbg befindet sich auf einem aufstrebenden Ast
Standard overflow-y:scroll;

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:
  1. der Scrollbalken erscheint nicht
  2. 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
Mit Zitat antworten
  #6 (permalink)  
Alt 13.03.2020, 10:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 13.03.2020, 11:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

@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?
Mit Zitat antworten
  #8 (permalink)  
Alt 13.03.2020, 11:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.04.2019
Beiträge: 5
dh1sbg befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #9 (permalink)  
Alt 13.03.2020, 11:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.03.2020, 13:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.04.2019
Beiträge: 5
dh1sbg befindet sich auf einem aufstrebenden Ast
Standard

vielen Dank!

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

Liebe Grüße, Bernd
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
2 spaltiges layout, automatische breite, responsitiv

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:09 Uhr.