1
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:
Der relevante Teil des HTML:
Viele sehr liebe Grüsse
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