Info: Dieser Blog wurde 2014 eingestellt. Dies hat viele Gründe, die an dieser Stelle jedoch nicht relevant sind. Die meisten der hier veröffentlichten Tutorials sind inzwischen nicht mehr aktuell, verlasst euch also nicht auf das hier geschriebene.
Zusammen mit dem Blog sind auch unsere E-Mail, unser ask.fm und unser facebook eingestellt.

Unterstreichen mit Hilfe von CSS

Unterstreichen, Überstreichen ect. mit CSS geht eigentlich ganz einfach.
Der Grund-Code den ihr braucht ist border (Border = Rand).


Wichtige Begriffe:
border-bottom
= die Unterseite des Rands - somit nötig zum unterstreichen
border-top
= die Oberseite des Rands - somit nötig zum überstreichen
border-left
= die linke Seite des Rands
border-right
= die rechte Seite des Rands
border
= Rand an allen Seiten
solid
= braucht man um eine durchgezogene Linie zu ziehen
dotted
= braucht man für eine gepunktete Linie
dashed
= braucht man für eine gestrichelte Linie
px
= Pixel
pt
= Punkt          

Um nun etwas zu unterstreichen ect. müsst ihr euch euren Code so zusammenstellen, wie ihr ihn wollt und braucht.
Wollen wir nun z. B. eine einfache Linie zum unterstreichen brauchen wir den folgenden Code. 
boder-bottom: 1px solid;
Wie oben erklärt gibt border-bottom an, dass an der Unterseite eine Linie sein soll. 
Die  px Anzahl gibt an wie stark (also dick) die Linie ist.
Das solid gibt -wie schon gesagt- an, dass es eine vollständige Linie ist
Das Semikolon ; ist auch sehr wichtig! Wenn ihr dieses weglasst, funktioniert der gesamte Code nicht.
Und nach diesem Schema sind alle Codes aufgebaut.
Hier ein Beispiel für den Beispielcode von oben:


Würde man anstatt 1px 5px nehmen würde es wie folgt aussehen:



Natürlich kann man die Angaben auch miteinander kombinieren. So sieht zum Beispiel der Code
boder-bottom: 1px dotted;
border-top: 1px dotted;
So aus: 
 

Und wer noch eine andere Farbe dazu haben möchte fügt 
 background: #FARBE;
 dazu. Natürlich ersetzt ihr FARBE durch den Farbcode der Farbe, die ihr wollt.

Bei mir sieht das ganze dann so aus:


Wie schon gesagt, ihr müsst das ganze einfügen wo ihr wollt. 
Wenn ihr den Post-Titel verändern wollt fügt ihr euren Code/eure Codes bei
h3.post-title, .comments h4 {
bzw.
.post h3 {
ein.

Für das Datum sucht ihr nach 
.date-header span {
oder 
.date-header
um die Codes ein zu fügen.

Auch bei der Sidebar, der Zitatbox ect. funktioniert das ganze.

Kommentare:

  1. Nach welcher Stelle für die Codes muss ich nach der Sidebar suchen?

    AntwortenLöschen
  2. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  3. Vielen lieben Dank für deinen hilfreichen Post, endlich hat es auch bei mir geklappt :D

    viele Grüße
    russkaja

    http://russkajas.blogspot.de/

    AntwortenLöschen
  4. Vielen Dank :) Hat mir echt weitergeholfen, aber bei mir ist die Linie nicht bis zum Rand durchgezogen, sondern nur da wo die Schrift ist. Kannst du mir helfen dass sie komplett durchgezogen ist?

    xoxo,
    Julia

    www.marshmallow-glitter.blogspot.de

    AntwortenLöschen
  5. hey wie schaffe ich es, dass die linie im datum nicht nur die schrift umfasst sondern die komplette breite :)?
    http://dedicated-j.blogspot.de/

    AntwortenLöschen
  6. Hallo, mich würde mal interessieren, wie man die Linienbreite einstellen kann. Also, dass die Linie so lang wie die Breite der Seite ist.

    liebe Grüße ^^

    AntwortenLöschen

Wie schon an anderer Stelle dieser Seite bemerkt, ist der Blog eingestellt. Das bedeutet leider auch, dass wir als Blogautoren auf deinen Kommentar nicht eingehen werden.