Zur Navigation

css für responsible Seite - ich stehe auf dem Schlauch

1 MarkusWi

Hallo alle zusammen,

Ich bin gerade dabei eine Responsible Seite zu bauen. Und eigentlich dachte ich, ich hätte alles verstanden. Doch mein Entwurf zeigt mir, dass es noch nicht so ist.Habe einen Entwurf gemacht unter https://granit.naturalstone.ch/dummi.html

Dies ist ein Ausschnitt, welcher dann später in die gesamtseite eingebaut wird.

ABER

Wenn ich das Tablett drehe, da passiert nichts... snief...

1.) die Felder sollten auf dem Tablet in zwei Zeilen angeordnet werden, die Bezeichnung sollte raus. Ich dachte, ich hätte das in der CSS mit order:2 gelöst.

2.) würde ich die Spalte Bezeichnung gerne auf 100% vergrössern. Das weiss ich aber noch nicht wie.

Was mache ich nur falsch?

Der relevante Teil des CSS:
/* zuerst kleinere Monitore */

.box {
  display: flex;
  flex-direction: row;
}
.cTitel{margin	: 5pt;border : 1px solid #FF0000;}
.cArtNo{order: 1;display: flex;width: 80px;margin	: 5pt;border : 1px solid #FF0000;}
.cBezei{order: 4;display: flex;width:600px;margin	: 5pt;border : 1px solid #FF0000;}
.cMenge{order: 2;display: flex;width: 30px;margin	: 5pt;border : 1px solid #FF0000;}
.cPreis{order: 3;display: flex;;width: 75px;margin	: 5pt;border : 1px solid #FF0000;}
.cLeerz{clear: both ;margin	: 5pt;border : 1px dotted #FF0000;}
.cBreit{clear: both ;margin	: 5pt;border : 1px solid #FF0000;}
.cUnten{clear: both ;margin	: 5pt;border : 1px solid #FF0000;}

/* grössere Monitore */
@media only screen and (min-width: 600px) {
.cTitel{margin	: 5pt;border : 1px solid #FF0000;}
.cArtNo{float: left ;width: 80px;margin	: 5pt;border : 1px solid #FF0000;}
.cBezei{float: left ;width:900px;margin	: 5pt;border : 1px solid #FF0000;}
.cMenge{float: left ;width: 30px;margin	: 5pt;border : 1px solid #FF0000;}
.cPreis{float: left ;width: 75px;margin	: 5pt;border : 1px solid #FF0000;}
.cLeerz{clear: both ;margin	: 5pt;border : 1px dotted #FF0000;}
.cBreit{clear: both ;margin	: 5pt;border : 1px solid #FF0000;}
.cUnten{clear: both ;margin	: 5pt;border : 1px solid #FF0000;}
}

Der relevante Teil des HTML:
<h2>Simulation Preisliste</h2>
<div class="cBreit"><p>5.1 Schöne Tische</p></div>
<!-- Überschrift -->
<div class="box cArtNo"><p>ArtNr</p></div>
<div class="box cBezei"><p>Bezeichnung</p></div>
<div class="box cMenge"><p>me</p></div>
<div class="box cPreis"><p>Preis</p></div>
<div class="cLeerz"><p></p></div>
<!-- Artikel 1 -->
<div class="box cArtNo"><p>500.569</p></div>
<div class="box cBezei"><p>Donna, die kurvige.</p></div>
<div class="box cMenge"><p>stk</p></div>
<div class="box cPreis"><p>23'583.95</p></div>
<div class="cLeerz"><p></p></div>
<!-- Artikel 2 -->
<div class="box cArtNo"><p>121.171</p></div>
<div class="box cBezei"><p>Bodenplaten für unter die Donna.</p></div>
<div class="box cMenge"><p>lm</p></div>
<div class="box cPreis"><p>114.95</p></div>
<div class="cLeerz"><p></p></div>

<div class="cBreit"><p>Alle Preise exkl. Mwst.</p></div>

Viele sehr liebe Grüsse



27.03.2020 16:58

2 Jörg Kruse

Bevor wir in die Detail gehen: responsive Seiten benötigen eine Viewport-Angabe:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Andernfalls schrumpfen manche kleineren Geräte sich die Seite zurecht.

27.03.2020 17:38

3 MarkusWi

Guten Abend, ok, Viewport im HTML Head eingebaut und dessen Funktion unter https://www.seobility.net/de/wiki/Viewport nachgelesen.

Es dreht sich noch immer nichts...

Es scheint, dass ich noch viele Bildungslücken habe...

Gute Nacht

27.03.2020 20:59 | geändert: 27.03.2020 21:19

4 Jörg Kruse

Das "display: flex" macht eher für übergeordnete Container, also Eltern-Elemente, einen Sinn. "order: 3" ist dagegen die Eigenschaft eines Kindelements.

Dazu positionierst du die einzelnen Elemente auch noch herkömmlich mit float, das ist noch mal eine andere Geschichte. Wenn du die Flexbox zur Positionierung der rot umrandeten Boxen verwenden möchtest, würde ich für jede Zeile noch ein Eltern-Div einbauen:

<div class="zeile">
    <div class="box cArtNo"><p>ArtNr</p></div>
    <div class="box cBezei"><p>Bezeichnung</p></div>
    <div class="box cMenge"><p>me</p></div>
    <div class="box cPreis"><p>Preis</p></div>
</div>

In diesem Fall würde div.zeile die Eigenschaft "display: flex" erhalten. Dann kannst du die einzelnen darin enthaltenen Boxen als Kindelemente positionieren - ohne Zuhilfenahme von float.

Eine gute Übersicht findet sich übrigens auf dieser Seite:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

zwar auf englisch, dafür aber mit anschaulichen Beispielbildern. Auf der linken Seite werden die Eigenschaften der Elterncontainer (flex container) erklärt, auf der rechten Seite der Kindelemente (flex items)

28.03.2020 15:12

5 MarkusWi

Hallo Jörg,
als allererstes vielen lieben Dank für Deine Unterstützung. Du bist gold wert.
Die Webseite css-Tricks, könnte von Dir sein. Sachlich, klar strukturiert, perfekt erklärt. Sie hat mir sehr viel geholfen. Danke vielmals.

Habe meine Dummi Seite entsprechend Deinen Infos und dem Inhalt von css-Tricks angepasst. Und "schweisperlenapputz", nach vielen Stunden der Arbeit passiert jetzt vieles das ich wollte, dass es passiert. Danke Dir.
Eines habe ich noch nicht im Griff: Ich möchte, dass auf Tablets und Smartphones die Bezeichnung auf einer eigenen Linie steht. Ich dachte, dass ich dies mit Flex_end erreichen würde... scheint aber nicht so...

Für grössere Monitore habe ich .Bezeichnung mit justify-content:grow; definiert, und das funktioniert. Aber wenn ich auf dem PC den Browser Opera verkleinere, dann wird das Feld wohl ans Ende gesetzt, nimmt aber nicht mehr die ganze Breite ein... obwohl justify-content:grow;

Ich verlasse mein Büro, #BleibZuhause gehe nur in die Küche schauen ob es noch ein Flasch Wein hat...

/* zuerst für kleinere Monitore */
.cZeile{display: flex;flex-direction: row;margin	: 5pt;border : 1px solid #FF0000;}
.cArtNo{order: 0;width:  80px;margin: 5pt;border : 1px solid blue;}
.cMenge{order: 1;width:  30px;margin: 5pt;border : 1px solid blue;}
.cPreis{order: 2;width:  75px;margin: 5pt;border : 1px solid blue;}
.cBezei{order: 3;margin: 5pt;border : 1px solid blue;align-self:flex-end;justify-content:grow;background-color: lightblue;}/*Breite ausnutzen*/
.cBreit{clear: both ;margin	: 5pt;border : 1px solid #FF0000;}
.cUnten{clear: both ;margin	: 5pt;border : 1px solid #FF0000;}

/* dann für grössere Monitore über 600px breit */
@media only screen and (min-width: 600px) {
.cZeile{margin	: 5pt;border : 1px solid #FF0000;}
.cTitel{margin	: 5pt;border : 1px solid #FF0000;}
.cArtNo{order: 0;width: 80px;margin	: 5pt;border : 1px solid #FF0000;}
.cBezei{order: 1;width:100%;margin	: 5pt;border : 1px solid #FF0000;justify-content:grow;background-color: lightgray;}/* Breite ausnutzen*/
.cMenge{order: 2;width: 30px;margin	: 5pt;border : 1px solid #FF0000;}
.cPreis{order: 3;width: 75px;margin	: 5pt;border : 1px solid #FF0000;}
.cLeerz{clear: both ;margin	: 5pt;border : 1px dotted green;}
.cBreit{clear: both ;margin	: 5pt;border : 1px solid #FF0000;}
.cUnten{clear: both ;margin	: 5pt;border : 1px solid #FF0000;}
}

Und das html:

<h2>Simulation Preisliste</h2>
<!-- Beginn Liste -->
<div class="cBreit"><p>5.1 Schöne Tische</p></div>
<!-- Überschrift -->
<div class="cZeile">
	<div class="cArtNo"><p>ArtNr</p></div>
	<div class="cBezei"><p>Bezeichnung</p></div>
	<div class="cMenge"><p>me</p></div>
	<div class="cPreis"><p>Preis</p></div>
</div>
<!-- Artikel 1 -->
<div class="cZeile">
	<div class="cArtNo"><p>500.569</p></div>
	<div class="cBezei"><p>Donna, die kurvige.</p></div>
	<div class="cMenge"><p>stk</p></div>
	<div class="cPreis"><p>23'583.95</p></div>
</div>
<!-- Artikel 2 -->
<div class="cZeile">
	<div class="cArtNo"><p>121.171</p></div>
	<div class="cBezei"><p>Bodenplaten für unter die Donna.</p></div>
	<div class="cMenge"><p>lm</p></div>
	<div class="cPreis"><p>114.95</p></div>
</div>
<div class="cBreit"><p>Alle Preise exkl. Mwst.</p></div>
<!-- Ende Liste -->
<p>Kontaktieren Sie uns, wir beraten Sie gerne.</p>


Die Seite:
https://granit.naturalstone.ch/dummi.html

29.03.2020 16:20

6 Jörg Kruse

Eines habe ich noch nicht im Griff: Ich möchte, dass auf Tablets und Smartphones die Bezeichnung auf einer eigenen Linie steht.

Da würde ich flex-wrap für den Eltern-Container so einstellen, dass die Elemente umbrechen können und für das betreffende Kind-Element die Breite auf 100% minus Innenabstand setzen und eine Verkleinerung untersagen:

.cZeile {
    flex-wrap: wrap;
}
.cBezei {
    width: calc(100% - 20px);
    flex-shrink: 0;
}

... und bei über 600px Bildschirmbreite die Breite des Divs wieder zurücksetzen:

.cBezei {
    width: auto;
}

30.03.2020 14:33

7 MarkusWi

Guten Abend Jörg.
ich glaube, ich habe es fast geschafft. Danke Dir vielmals. Es passt sich dem hoch und quer Bildschirm auf dem Smartphone an und auf dem PC ist es schön breit. Nur das mit dem Calc, das funktioniert noch nicht so richtig, aber vermutlich ist meine Berechnung falsch... Werde da noch ein bisschen Googeln und die Formel anpassen...
Aber auf jeden fall, danke, ohne Dich hätte ich das nicht geschafft...

Viele liebe Grüsse
Markus

01.04.2020 21:02

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]