gesucht: Icon für CSS-Kurs
bearbeitet von
Servus!
> Hello,
>
> > Ja, man kann einen Kasten/ Box / Element verschiedenartig formatieren - oder sind es nur einfach sechs verschiedene Würfel.
> >
> > # Cards als Ersatz für Links und Icons?
> >
> > Ich habe auf der [Wie fange ich an?](https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F#CSS)-Seite mal zwei „***Cards***“ angelegt.
> >
> > @Der Martin @Rolf B @TS Wäre das evtl. etwas?
>
> Nach meinem Empfinden müssten die Cards dann die gleiche Größe haben
Ja, das geht mit grid - leider muss dann wieder ein wrapper-div ins Wiki:
~~~ CSS
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}
~~~
> und sich z. B. farblich unterscheiden.
Ja, im Rahmen unserer [Farbtabelle](https://wiki.selfhtml.org/wiki/Hilfe:Farbtabelle), wobei es imho nicht möglich sein wird, HTML, CSS und JS (gelb?) jeweils eigene Hintergundfarben zu geben
>>Optimalerweise wäre der ganze Kasten ein anklickbarer Link (seit HTML5 erlaubt).
>Und sie müssten in der gesamten Fläche linksensitiv sein. Geht das inzwischen ohne Tricks und ohne dass man die Vorleseeigenschaft (Barrierefreiheit) verliert?
>
Ja, wobei ich mir noch nicht im klaren bin, ob man
~~~ HTML
<a href="....">
<div class="card">
...
</div>
</a>
~~~
oder
~~~ HTML
<div class="card">
<a href="....">
...
</a>
</div>
~~~
nehmen sollte. Es scheint ohne zusätzliche Extension nicht möglich zu sein, einem Wiki-Link eine Klasse mitzugeben. 😟
**[[EDIT]]** Habe mal hier etwas versucht: [**Benutzer:MScharwies/cards**](https://wiki-test.selfhtml.org/wiki/Benutzer:MScharwies/cards)
**Fazit**
* grid geht
* Es ist in Mediawiki unmöglich Links um Block-Elemente zu legen. Es wäre möglich, mit vielen spans zu arbeiten. Bilder können aber nur mit `[[Datei:xxx|link=yyy]]`- eingebunden werden, was aber nicht innerhalb eines wikilinks geht.
* einzelne Bilder (siehe untere Reihe) sehen ok aus.
**[/EDIT]]**
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.“
> Hello,
>
> > Ja, man kann einen Kasten/ Box / Element verschiedenartig formatieren - oder sind es nur einfach sechs verschiedene Würfel.
> >
> > # Cards als Ersatz für Links und Icons?
> >
> > Ich habe auf der [Wie fange ich an?](https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F#CSS)-Seite mal zwei „***Cards***“ angelegt.
> >
> > @Der Martin @Rolf B @TS Wäre das evtl. etwas?
>
> Nach meinem Empfinden müssten die Cards dann die gleiche Größe haben
Ja, das geht mit grid - leider muss dann wieder ein wrapper-div ins Wiki:
~~~ CSS
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}
~~~
> und sich z. B. farblich unterscheiden.
Ja, im Rahmen unserer [Farbtabelle](https://wiki.selfhtml.org/wiki/Hilfe:Farbtabelle), wobei es imho nicht möglich sein wird, HTML, CSS und JS (gelb?) jeweils eigene Hintergundfarben zu geben
>>Optimalerweise wäre der ganze Kasten ein anklickbarer Link (seit HTML5 erlaubt).
>Und sie müssten in der gesamten Fläche linksensitiv sein. Geht das inzwischen ohne Tricks und ohne dass man die Vorleseeigenschaft (Barrierefreiheit) verliert?
>
Ja, wobei ich mir noch nicht im klaren bin, ob man
~~~ HTML
<a href="....">
<div class="card">
...
</div>
</a>
~~~
oder
~~~ HTML
<div class="card">
<a href="....">
...
</a>
</div>
~~~
nehmen sollte. Es scheint ohne zusätzliche Extension nicht möglich zu sein, einem Wiki-Link eine Klasse mitzugeben. 😟
**[[EDIT]]** Habe mal hier etwas versucht: [**Benutzer:MScharwies/cards**](https://wiki-test.selfhtml.org/wiki/Benutzer:MScharwies/cards)
**Fazit**
* grid geht
* Es ist in Mediawiki unmöglich Links um Block-Elemente zu legen. Es wäre möglich, mit vielen spans zu arbeiten. Bilder können aber nur mit `[[Datei:xxx|link=yyy]]`- eingebunden werden, was aber nicht innerhalb eines wikilinks geht.
* einzelne Bilder (siehe untere Reihe) sehen ok aus.
**[/EDIT]]**
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.“
gesucht: Icon für CSS-Kurs
bearbeitet von
Servus!
> Hello,
>
> > Ja, man kann einen Kasten/ Box / Element verschiedenartig formatieren - oder sind es nur einfach sechs verschiedene Würfel.
> >
> > # Cards als Ersatz für Links und Icons?
> >
> > Ich habe auf der [Wie fange ich an?](https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F#CSS)-Seite mal zwei „***Cards***“ angelegt.
> >
> > @Der Martin @Rolf B @TS Wäre das evtl. etwas?
>
> Nach meinem Empfinden müssten die Cards dann die gleiche Größe haben
Ja, das geht mit grid - leider muss dann wieder ein wrapper-div ins Wiki:
~~~ CSS
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}
~~~
> und sich z. B. farblich unterscheiden.
Ja, im Rahmen unserer [Farbtabelle](https://wiki.selfhtml.org/wiki/Hilfe:Farbtabelle), wobei es imho nicht möglich sein wird, HTML, CSS und JS (gelb?) jeweils eigene Hintergundfarben zu geben
>>Optimalerweise wäre der ganze Kasten ein anklickbarer Link (seit HTML5 erlaubt).
>Und sie müssten in der gesamten Fläche linksensitiv sein. Geht das inzwischen ohne Tricks und ohne dass man die Vorleseeigenschaft (Barrierefreiheit) verliert?
>
Ja, wobei ich mir noch nicht im klaren bin, ob man
~~~ HTML
<a href="....">
<div class="card">
...
</div>
</a>
~~~
oder
~~~ HTML
<div class="card">
<a href="....">
...
</a>
</div>
~~~
nehmen sollte. Es scheint ohne zusätzliche Extension nicht möglich zu sein, einem Wiki-Link eine Klasse mitzugeben. 😟
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.“
> Hello,
>
> > Ja, man kann einen Kasten/ Box / Element verschiedenartig formatieren - oder sind es nur einfach sechs verschiedene Würfel.
> >
> > # Cards als Ersatz für Links und Icons?
> >
> > Ich habe auf der [Wie fange ich an?](https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F#CSS)-Seite mal zwei „***Cards***“ angelegt.
> >
> > @Der Martin @Rolf B @TS Wäre das evtl. etwas?
>
> Nach meinem Empfinden müssten die Cards dann die gleiche Größe haben
Ja, das geht mit grid - leider muss dann wieder ein wrapper-div ins Wiki:
~~~ CSS
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}
~~~
> und sich z. B. farblich unterscheiden.
Ja, im Rahmen unserer [Farbtabelle](https://wiki.selfhtml.org/wiki/Hilfe:Farbtabelle), wobei es imho nicht möglich sein wird, HTML, CSS und JS (gelb?) jeweils eigene Hintergundfarben zu geben
>>Optimalerweise wäre der ganze Kasten ein anklickbarer Link (seit HTML5 erlaubt).
>Und sie müssten in der gesamten Fläche linksensitiv sein. Geht das inzwischen ohne Tricks und ohne dass man die Vorleseeigenschaft (Barrierefreiheit) verliert?
>
Ja, wobei ich mir noch nicht im klaren bin, ob man
~~~ HTML
<a href="....">
<div class="card">
...
</div>
</a>
~~~
oder
~~~ HTML
<div class="card">
<a href="....">
...
</a>
</div>
~~~
nehmen sollte. Es scheint ohne zusätzliche Extension nicht möglich zu sein, einem Wiki-Link eine Klasse mitzugeben. 😟
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.“
gesucht: Icon für CSS-Kurs
bearbeitet von
Servus!
> Hello,
>
> > Ja, man kann einen Kasten/ Box / Element verschiedenartig formatieren - oder sind es nur einfach sechs verschiedene Würfel.
> >
> > # Cards als Ersatz für Links und Icons?
> >
> > Ich habe auf der [Wie fange ich an?](https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F#CSS)-Seite mal zwei „***Cards***“ angelegt.
> >
> > @Der Martin @Rolf B @TS Wäre das evtl. etwas?
>
> Nach meinem Empfinden müssten die Cards dann die gleiche Größe haben
Ja, das geht mit grid - leider muss dann wieder ein wrapper-div ins Wiki:
~~~ CSS
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}
~~~
> und sich z. B. farblich unterscheiden.
Ja, im Rahmen unserer [Farbtabelle](https://wiki.selfhtml.org/wiki/Hilfe:Farbtabelle), wobei es imho nicht möglich sein wird, HTML, CSS und JS (gelb?) jeweils eigene Hintergundfarben zu geben
>>Optimalerweise wäre der ganze Kasten ein anklickbarer Link (seit HTML5 erlaubt).
>Und sie müssten in der gesamten Fläche linksensitiv sein. Geht das inzwischen ohne Tricks und ohne dass man die Vorleseeigenschaft (Barrierefreiheit) verliert?
>
Ja, wobei ich mir noch nicht im klaren bin, ob man
~~~ HTML
<a href="....">
<div class="card">
...
</div>
</a>
~~~
oder
~~~ HTML
<div class="card">
<a href="....">
...
</a>
</div>
~~~
nehmen sollte. Es scheint ohne zusätzliche Extension nicht möglich zu sein, einem Wiki-Link eine Klasse mitzugeben. 😟
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.“