XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Site- und Layoutcheck (http://xhtmlforum.de/forumdisplay.php?f=77)
-   -   2 - Spaltiges Layout, responsitiv, automatische Breite (http://xhtmlforum.de/showthread.php?t=74056)

dh1sbg 11.03.2020 09:04

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

cloned 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 11.03.2020 11:04

oha!
 
Vielen Dank!

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

cloned 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 13.03.2020 10:15

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

MrMurphy 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 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 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 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 13.03.2020 13:38

vielen Dank!

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

Liebe Grüße, Bernd


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:38 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020