grid, 1. areas, 2. text-positionierung
bearbeitet von Matthias ScharwiesServus!
>> (Setz mal #wowie {grid-column: -3 / -1; grid-row: 3 / 5;}. Wenn dir der Text(inhalt) an den Rand stößt, kannst du padding, text-align, etc verwenden.)
> Mein Hauptproblem bleibt leider unbeantwortet: Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts?
Dein Hauptproblem war imho a. das fehlende Verständnis von Grid und b. eine chaotische Vorgehensweise (nicht ohne Grund heißt dein Beispiel Michaahs Gridchaos 😀).
Ich hatte dir einen Weg gezeigt, wie man mit wenigen Selektoren ein Grid aufbaut und dann dieses peu à peu gestaltet.
# Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts?
Wenn Du dafür nicht padding, text-align etc, sondern grid verwenden willst, benötigst du für `#wowie`ein ***zweites*** Grid Layout und dann noch zwei Deklarationen für `#wowie p`:
~~~ CSS
#wowie {
...
display: grid;
}
#wowie p {
align-self: end;
justify-self: end;
}
~~~
(Du hattest in Michaahs Grid-Chaos align-**items** und justify-**items** auskommentiert. Das hätte sich aber auf den Grid-Container, nicht auf das Grid-Element bezogen.)
Live-Beispiel: [michaah.html (mit #wowie p unten rechts)](https://jsr-hersbruck.de/apps/michaah.html)
SELF-Wiki: [CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items (Kapitel 6)](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items)
# Entwerfen von CSS-Layouts
> Im weiteren fand ich dein Beispiel eher verwirrend, auch weil du mir ja auch eine andere Gestaltung nahelegst.
Ich hatte extra drauf geachtet, mein Beispiel von Anfang an ausgehend zu entwickeln, so dass du die Schritte nachvollziehen und dann dein eigenes Ding machen kannst.
Ich fand **Dein Beispiel** verwirrend, weil du in deinem CSS mehrere ungültige Selektoren (div #wowie), sowie ungültige Werte (%em) hattest.
Beim Testen einer solchen Webseite solltest du
1. Überlegen, welche Eigenschaft du in die Seite einfügen möchtest
2. mit möglichst wenig HTML und wenig CSS-Regelsätzen anfangen
3. den Seiteninspektor verwenden:
- SELFWiki: [HTML/Tutorials/HTML_&_CSS_mit_dem_Seiteninspektor_untersuchen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML_%26_CSS_mit_dem_Seiteninspektor_untersuchen)
- codemakery.ch: [Teil 4: Entwicklertools im Browser](https://code.makery.ch/de/library/html-css/part4/)
Dann hättest Du gesehen, dass dein CSS-Markup aus einem Chaos sich widersprechender und fehlerhafter Regeln besteht:
~~~ CSS,bad
body {
display: grid;
margin: 3em;
border: 0px solid;
border-color: #cbcbcb;
padding: 0%em;
gap: 0em;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
"graphik-1 graphik-2 angebot-1 angebot-1 zugang zugang"
"graphik-3 graphik-4 angebot-1 angebot-1 zugang zugang"
"head head head head plan plan"
"graphik-5 graphik-6 angebot-2 angebot-2 wowie wowie"
"graphik-7 graphik-8 angebot-2 angebot-2 wowie wowie";
/* grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
"aside aside aside aside aside aside"
"aside aside aside aside aside aside"
"foot foot foot foot foot foot"; */
font-size: 1.2em;
position: relative;
}
~~~
Auskommentieren ist schon mal gut, lösche aber alles was du nicht für dein Problem brauchst.
Ich habe so mit dem Grid-Container angefangen:
~~~ CSS,good
body {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: min-content auto auto auto auto auto;
grid-template-areas:
"h1 h1 h1 h1 h1 h1 "
"graphik-1 graphik-2 angebot-1 angebot-1 zugang zugang"
"graphik-3 graphik-4 angebot-1 angebot-1 zugang zugang"
"head head head head plan plan"
"graphik-5 graphik-6 angebot-2 angebot-2 wowie wowie"
"graphik-7 graphik-8 angebot-2 angebot-2 wowie wowie";
gap: 1em;
min-height: 90vh;
}
~~~
Ich habe die Bereiche im ASCII-Schema mit Leerzeichen aufgefüllt, damit das Grid erkennbar ist.
Jetzt müssen die einzelnen Grid-Elemente im Raster positioniert werden:
~~~ CSS, bad
div #wowie {
grid-area: wowie;
grid-column: 5 / 7;
grid-row: 4 / 6;
}
~~~
Du überschreibst die grid-area ja wieder. Das ist dir selbst aufgefallen, also muss der Fehler irgendwo vorher liegen.
Im Seiteninspektor hättest du sehen können, dass **keine** CSS-Formatierung auf wowie angewandt wird - warum?
Weil du jeden **Selektor** (außer header) falsch angelegt hattest:
~~~ CSS,bad
aside #graphik-1 {
...
}
~~~
Meine Version:
~~~ CSS,good
h1 {
grid-area: h1;
background: gold;
height: min-content;
}
#wowie {
grid-area: wowie;
background: lime;
}
~~~
1. Ich färbe die gewünschten Elemente mit einer Signalfarbe, damit ich gleich erkenne, ob der Selektor auch greift.
2. Ich fange mit h1 an, weil ich das schon mal gemacht habe und dann das Prinzip ausprobiere.
Live-Beispiel: [michaah-2.html (mit grid-template-area)](https://jsr-hersbruck.de/apps/michaah-2.html)
Ich habe nicht alle Elemente so formatiert, das kannst du jetzt tun. Ob man alle img in aside-Elemente packt, ohne das es einen Inhalt gibt, könnte man auch diskutieren, aber das war ja nicht Deine Frage.
> Vor allem aber sehe ich nach wie vor das Grundprinzip nicht, aber meine Fragen will ich hier jetzt nicht weiter ausführen weil ich sie nicht mit dem hier oben genannten Problem vermischen möchte.
Ich habe jetzt die oben genannten Fragen beantwortet, hoffe aber, dass du auch das Grundprinzip bald siehst.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“
grid, 1. areas, 2. text-positionierung
bearbeitet von Matthias ScharwiesServus!
>> (Setz mal #wowie {grid-column: -3 / -1; grid-row: 3 / 5;}. Wenn dir der Text(inhalt) an den Rand stößt, kannst du padding, text-align, etc verwenden.)
> Mein Hauptproblem bleibt leider unbeantwortet: Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts?
Dein Hauptproblem war imho a. das fehlende Verständnis von Grid und b. eine chaotische Vorgehensweise (nicht ohne Grund heißt dein Beispiel Michaahs Gridchaos.
Ich hatte dir einen Weg gezeigt, wie man mit wenigen Selektoren ein Grid aufbaut und dann dieses peu à peu gestaltet.
# Wie positioniere ich den Text in der Box, nicht die Box selbst, unten rechts?
Wenn Du dafür nicht padding, text-align etc, sondern grid verwenden willst, benötigst du für `#wowie`ein ***zweites*** Grid Layout und dann noch zwei Deklarationen für `#wowie p`:
~~~ CSS
#wowie {
...
display: grid;
}
#wowie p {
align-self: end;
justify-self: end;
}
~~~
(Du hattest in Michaahs Grid-Chaos align-**items** und justify-**items** auskommentiert. Das hätte sich aber auf den Grid-Container, nicht auf das Grid-Element bezogen.)
Live-Beispiel: [michaah.html (mit #wowie p unten rechts)](https://jsr-hersbruck.de/apps/michaah.html)
SELF-Wiki: [CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items (Kapitel 6)](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items)
# Entwerfen von CSS-Layouts
> Im weiteren fand ich dein Beispiel eher verwirrend, auch weil du mir ja auch eine andere Gestaltung nahelegst.
Ich hatte extra drauf geachtet, mein Beispiel von Anfang an ausgehend zu entwickeln, so dass du die Schritte nachvollziehen kannst.
Ich fand **Dein Beispiel** verwirrend, weil du in deinem CSS mehrere ungültige Selektoren (div #wowie), sowie ungültige Werte (%em) hattest.
Beim Testen einer solchen Webseite solltest du
1. Überlegen, welche Eigenschaft du in die Seite einfügen möchtest
2. mit möglichst wenig HTML und wenig CSS-Regelsätzen anfangen
3. den Seiteninspektor verwenden:
- SELFWiki: [HTML/Tutorials/HTML_&_CSS_mit_dem_Seiteninspektor_untersuchen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML_%26_CSS_mit_dem_Seiteninspektor_untersuchen)
- codemakery.ch: [Teil 4: Entwicklertools im Browser](https://code.makery.ch/de/library/html-css/part4/)
Dann hättest Du gesehen, dass dein CSS-Markup aus einem Chaos sich widersprechender und fehlerhafter Regeln besteht:
~~~ CSS,bad
body {
display: grid;
margin: 3em;
border: 0px solid;
border-color: #cbcbcb;
padding: 0%em;
gap: 0em;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
"graphik-1 graphik-2 angebot-1 angebot-1 zugang zugang"
"graphik-3 graphik-4 angebot-1 angebot-1 zugang zugang"
"head head head head plan plan"
"graphik-5 graphik-6 angebot-2 angebot-2 wowie wowie"
"graphik-7 graphik-8 angebot-2 angebot-2 wowie wowie";
/* grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
"aside aside aside aside aside aside"
"aside aside aside aside aside aside"
"foot foot foot foot foot foot"; */
font-size: 1.2em;
position: relative;
}
~~~
Auskommentieren ist schon mal gut, lösche aber alles was du nicht für dein Problem brauchst.
Ich habe so mit dem Grid-Container angefangen:
~~~ CSS,good
body {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: min-content auto auto auto auto auto;
grid-template-areas:
"h1 h1 h1 h1 h1 h1 "
"graphik-1 graphik-2 angebot-1 angebot-1 zugang zugang"
"graphik-3 graphik-4 angebot-1 angebot-1 zugang zugang"
"head head head head plan plan"
"graphik-5 graphik-6 angebot-2 angebot-2 wowie wowie"
"graphik-7 graphik-8 angebot-2 angebot-2 wowie wowie";
gap: 1em;
min-height: 90vh;
}
~~~
Ich habe die Bereiche im ASCII-Schema mit Leerzeichen aufgefüllt, damit das Grid erkennbar ist.
Jetzt müssen die einzelnen Grid-Elemente im Raster positioniert werden:
~~~ CSS, bad
div #wowie {
grid-area: wowie;
grid-column: 5 / 7;
grid-row: 4 / 6;
}
~~~
Du überschreibst die grid-area ja wieder. Das ist dir selbst aufgefallen, also muss der Fehler irgendwo vorher liegen.
Im Seiteninspektor hättest du sehen können, dass **keine** CSS-Formatierung auf wowie angewandt wird - warum?
Weil du jeden **Selektor** (außer header) falsch angelegt hattest:
~~~ CSS,bad
aside #graphik-1 {
...
}
~~~
Meine Version:
~~~ CSS,good
h1 {
grid-area: h1;
background: gold;
height: min-content;
}
#wowie {
grid-area: wowie;
background: lime;
}
~~~
1. Ich färbe die gewünschten Elemente mit einer Signalfarbe, damit ich gleich erkenne, ob der Selektor auch greift.
2. Ich fange mit h1 an, weil ich das schon mal gemacht habe und dann das Prinzip ausprobiere.
Live-Beispiel: [michaah-2.html (mit grid-template-area)](https://jsr-hersbruck.de/apps/michaah-2.html)
Ich habe nicht alle Elemente so formatiert, das kannst du jetzt tun. Ob man alle img in aside-Elemente packt, ohne das es einen Inhalt gibt, könnte man auch diskutieren, aber das war ja nicht Deine Frage.
> Vor allem aber sehe ich nach wie vor das Grundprinzip nicht, aber meine Fragen will ich hier jetzt nicht weiter ausführen weil ich sie nicht mit dem hier oben genannten Problem vermischen möchte.
Ich habe jetzt die oben genannten Fragen beantwortet, hoffe aber, dass du auch das Grundprinzip bald siehst.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“