HpBk-TemplateWorld | Alles für dich.

Trennlinie individuell anpassen

Einleitung
Wer kennt sie nicht? Die Trennlinie auf der eigenen Homepage. Eine Trennlinie dient dazu, bestimmte Abschnitte von einem anderen optisch zu unterbrechen. Wenn ihr eine Seite auf eurer Homepage kommentierbar gemacht habt, seht ihr ebenfalls eine Trennlinie sowohl zwischen den Kommentaren, als auch über dem Kommentar absenden Feld. Ich zeige euch, wie ihr mit wenigen Tricks eure Trennlinie individuell gestalten könnt.

Schwierigkeitsstufe: Anfänger

Als allererstes begeben wir uns in den Editor unter "Eigene Seiten editieren" und legen nun eine neue Seite an oder ihr editiert einfach eine bereits vorhandene Seite. Im Editor gibt es nun die Möglichkeit, eine eigene Trennlinie einzufügen. Dies passiert, wenn ihr das rot eingekreiste Symbol anklickt.



Nachdem ihr dieses Symbol angeklickt habt, erhaltet ihr eine Trennlinie, die ganz genau so aussieht.

Es ist zwar ein kleines, aber dennoch feines Merkmal für eure Homepage, die Seite weiter zu verschönern. Um jetzt diese Trennlinie zu verändern, fügt ihr folgenden CSS-Code unter "Design" - "Erweiterte Designeinstellungen" im Feld "Text über dem Design" ein.

Die Zahlenwerte könnt ihr natürlich individuell anpassen, wie es euch am besten gefällt. Wenn ihr diesen Code so übernehmt, sehen alle Trennlinien so aus, wie auf HpBk-TemplateWorld.

Jetzt kann diese Trennlinie noch viele weitere Eigenschaften bekommen. Zum Beispiel eine andere Farbe, sagen wir einmal Schwarz. Der Code für die Farbe Schwarz ist #000000. Diesen Code fügen wir einfach an Stelle von Grau #CCCCC; ein. Dann sieht unsere Linie so aus:

Um die Trennlinie noch dicker darzustellen, verändern wir einfach den Wert bei
border-top:1px solid #000000; in 5px. Dann sieht diese Linie so aus:

Wie ihr seht, gibt es sehr viele Möglichkeiten, eure Trennlinie anzupassen. Probiert es einfach einmal aus!

Legende zum CSS-Code:
border: Bestimmt die Höhe und somit die Dicke der Trennlinie; zudem wird hier auch die Farbe des Rahmens bestimmt.

margin: Die Werte bei "margin" bestimmen den Abstand von der Trennlinie zum Beispiel zu eurem Text.


background-color:
Hier könnt ihr eine Farbe für den Hintergrund der Trennlinie eintragen. Nicht zu verwechseln mit der Rahmen-Farbe!



Kommentare zu dieser Seite:
Kommentar von blup( ), 21.05.2012 um 19:45 (UTC):
hammer smileys!
:-

Kommentar von:30.03.2012 um 18:57 (UTC)
i-hubba
i-hubba
Offline

LOL, die Smileys sind von Spielaffe

Kommentar von:25.03.2012 um 10:01 (UTC)
toppages
toppages
Offline

Is zwar alles schön und gut aber, die Style tags müssen weg



Kommentar zu dieser Seite hinzufügen:
Dein Name:
Deine E-Mail-Adresse:
Deine Homepage:
Deine Nachricht:

Du bist der 397886 Besucher.

Information

HpBk-TemplateWorld ist seit Januar 2011 die neue Design-Zentrale im Homepage-Baukasten. Mit über 100 Designs ist und soll HpBk-TemplateWorld auch mit eurer Hilfe noch weiter ausgebaut werden und somit zu einer zentralen Anlaufstelle für Designs, Templates und Tutorials im HpBk werden.

Partner werden

Möchtest du auch Partner von HpBk-TemplateWorld werden? Dann schreibe mich an. Gerne sehe ich mir deine Seite genauer an und werde dich dann zu den offiziellen Partnerseiten hinzufügen.