Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Trennlinien unteschiedlich gestalten
#1
Ich hab mir gerade den Wolf gesucht.
Es gibt ja den tollen Tag <hr> einen hab ich auch schon definiert.
Nun möchte ich gerne  Eine 2. Trennlinie definieren bzw es würde auch nur eine undefinierte reichen
Eine Katze, die sich im Unterarm fest gebissen hat,
lässt sich leicht unter kaltem Wasser wieder abwaschen. Big Grin
Zitieren
#2
HTML5
  1. <hr class="linie-1">
  2. <hr class="linie-2">
  3. <hr class="linie-3">



CSS
  1.         hr.linie-1 {
  2.             border-top: 6px solid red !important;
  3.             border-bottom: 6px solid black !important;
  4.             display: block;
  5.             margin-top: 0.5em;
  6.             margin-bottom: 0.5em;
  7.             margin-left: auto;
  8.             margin-right: auto;
  9.             border-style: solid;
  10.             border-width: 0px;
  11.  
  12.         }
  13.         hr.linie-2 {
  14.             border-top: 6px solid green !important;
  15.             display: block;
  16.             margin-top: 0.5em;
  17.             margin-bottom: 0.5em;
  18.             margin-left: 10%;
  19.             margin-right: 10%;
  20.             border-style: inset;
  21.             border-width: 0px;
  22.         }
  23.         hr.linie-3 {
  24.             border: none;
  25.  
  26.             width: 90%;
  27.             height: 50px;
  28.             margin-top: 0;
  29.             border-bottom: 1px solid #1f1209;
  30.             box-shadow: 0 20px 20px -20px #333;
  31.             margin: -50px auto 10px;
  32.         }


Zitieren
#3
Ich habe den hr einfach in ein div gesetzt
HTML5
  1. <div class="modal hr"></div>


CSS
  1. .modal hr {
  2. height: 1px;
  3.     width: 90%;
  4.     text-align: center;
  5.     position: relative;
  6.     background: #e6e6e6;
  7. }



aber dein Ansatz ist pfiffiger und gefällt mir besser.
Eine Katze, die sich im Unterarm fest gebissen hat,
lässt sich leicht unter kaltem Wasser wieder abwaschen. Big Grin
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Bilder per Klick vergrößern
Last Post: The-Error
Gestern 15:26
» Replies: 1
» Views: 8
Logo mittig in Navbar
Last Post: The-Error
Gestern 13:35
» Replies: 0
» Views: 6
Switch individueller Style
Last Post: Wolki
21.03.2019 09:19
» Replies: 3
» Views: 50

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 214
» Latest member: Con
» Forum threads: 200
» Forum posts: 833

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Responsive Breakpoints

>