5202

ein Blog über technische Fragen zu Blogger

And the winner is ...

von

Der CSS Wettbewerb ...

... von letzter Woche hat heute Mitternacht geendet und unter allen richtigen (fünf sic!) Einsendungen habe ich jetzt mit einem Online Generator die Siegerin gezogen und es ist zoozee von Berlinstadtbaby - Gratuliere!

Der Amazon Gutschein geht heute noch raus (wenn ich kapiere, wie ich den Amazon Code umschreiben kann ... kriege ich aber hin!)

Die Frage ...

Die Frage war ja, wie kann man nur mit CSS/HTML einen Begriff 'doppelt' durchstreichen ... ihr habt das mit verschiedene Ansätze gelöst - hier meine eigene Lösung, die mir nach wie vor am einfachsten vorkommt:

Das ist der Satz - das letzte Wort soll doppelt durchgestrichen werden:

Schreiben einfach durchgestrichen!

Wir setzen den Begriff durchgestrichen in eine Span-Container und geben ihm eine Klasse:
Schreiben einfach <span class="double">durchgestrichen</span>!
Den Rest machen wir mit CSS. Zuerst geben wir der Klasse double eine relative Position (das ist nötig, weil wir die Linie anschließend absolut positionieren):
.double{
   position: relative
}
Die doppelte Linie selber bauen wir als Pseudoelement - wir brauchen dabei nur ein Element und nicht zwei:
.double::before { 
    content: "";
    display: block;
    border-top: double 6px #333;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    z-index: -1;
}
Der doppelte Unterstrich platzieren wir absolut mit top: 50% genau in der Mitte - der Strich geht mit width: 100% über die volle Länge des Elements ... schaut alles zusammen so aus:

Schreiben einfach durchgestrichen!

Man könnte es mit zwei Pseudoelemente lösen und einen Strich oben und einen Strich unten machen ... man könnte eine zusätzlichen Span Container nehmen und darüber ein Element einfügen ... vieles ist möglich, aber so kommt es mir am einfachsten vor.

Danke an alle Teilnehmer

Noch mal vielen herzlichen Dank an alle Teilnehmer - wer sich auch immer an dem Problem versucht und jetzt entweder keine Lösung gefunden oder nicht gewonnen hat ... es war ja nur ein kleines Spiel! Mir hat's auf jeden Fall Spass gemacht und ich fand alle Ansätze spannend, weil ihr eben anders gedacht habt, als ich es vielleicht tun würde.

Es gibt in CSS für viele Problem ja kein 'richtig' und kein 'falsch', sondern verschieden Wege.