| |
 Suchen
 Registrieren
 Profil  Einloggen, um private Nachrichten zu lesen  Login
Border-Style an HTML-Elementen
|
|
| Autor |
Nachricht |
Coolplace
Neuankömmling
Anmeldungsdatum: 16.02.2007
Beiträge: 3
Wohnort: USB - United States of Bücken
|
 Verfasst am: 30.08.2009, 01:28 Titel: Border-Style an HTML-Elementen |
|
|
Wie erstellt man Ränder an Elementen auf der Homepage?[/u]
Wenn Ihr zum Beispiel eine Tabelle oder einen Container( <div> ) erstellen wollt, dann könnt Ihr das ganz einfach verschönern.
Ich möchte das anhand eines Div-Elementes demonstrieren:
Der Grundcode für ein Container sieht so aus:
Das bringen wir erstmal auf eine gewisse Größe, damit man auch was sehen kann:
| Zitat: |
| <div style="height:100px;width:300px;">Inhalt</div> |
Jetzt haben wir eine Breite von 300 Pixeln und eine Höhe von 100 Pixeln.
Jetzt kümmern wir uns mal um die Ränder.
Ein einfacher Rand:
| Zitat: |
| <div style="height:100px;width:300px;border:4px solid #000000;">Inhalt</div> |
Gestrichelt:
| Zitat: |
| <div style="height:100px;width:300px;border:4px dashed #000000;">Inhalt</div> |
Gepunktet:
| Zitat: |
| <div style="height:100px;width:300px;border:4px dotted #000000;">Inhalt</div> |
Ein erhabener Rand (ähnlich Bildrahmen)
| Zitat: |
| <div style="height:100px;width:300px;border:4px ridge #000000;">Inhalt</div> |
Groove:
| Zitat: |
| <div style="height:100px;width:300px;border:4px groove #000000;">Inhalt</div> |
inset (ähnlich groove):
| Zitat: |
| <div style="height:100px;width:300px;border:4px inset #000000;">Inhalt</div> |
outset (auch ähnlich)
| Zitat: |
| <div style="height:100px;width:300px;border:4px outset #000000;">Inhalt</div> |
Oder mal gemischt:
| Zitat: |
| <div style="height:100px;width:300px;border-left: 1px solid #000000;border-top: 5px double #ff0000;border-right: 1px dotted #ff00ff;border-bottom: 1pxdashed #0000ff;">Inhalt</div> |
Farbcodes könnt Ihr hier bekommen.
Da man das hier im Forum leider nicht richtig darstellen kann, könnt Ihr das hier noch mal Live begutachten 
Klick
Das geht natürlich mit allen HTML-Elementen
_________________
 |
|
| Nach oben |
|
 |
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
|
| |
