|
|||
Trennbalken: 50%, abgerundete Ecken, responsive
Hallo Leute,
will mittels HTML5/CSS (evt JavaScript) eigene Portfolio-Webseite aufbauen, die in Textabschnitte aufgeteilt ist. Habe mir folgendes vorgestellt: Textabschnitte können nacheinander und nebeneinander stehen, jedes Textabschnitt soll mit einem Trennbalken ein Mal unten und ein Mal an der Seite abgetrennt werden. Das letzte Textabschnitt soll diesen Trennbalken nicht anzeigen. Die Trennbalken sollen je ca 50% der Länge bzw Höhe des Textabschnittes betragen und abgerundete Ecken haben. Soll prinzipiell so aussehen: Forumanfrage_trennlinie.png Und responsive soll das auch noch sein. Es geht mir hier wirklich ausschließlich um die Umsetzung des Trennbalken. Hat jemand eine Idee wie ich dies am elegantesten bewerkstelligen kann? Bin für Fragen/Anregungen offen. Viele Grüße forenjunkie |
Sponsored Links |
|
|||
Hallo
Zitat:
Zitat:
Du kannst entweder Vordergrund-Grafiken verwenden oder leere Boxen so formatieren, das sie wie die Trennlinien aussehen. In beiden Fällem müsstest du im HTML-Quellcode zusätzlich Elemente ohne Information / Inhalt unterbringen. Das hat mit einem aktuellen Quellcode wenig zu tun. Bei einem responsive Design sind solche nur der Optik dienenden Elemente zudem hinderlich. Eventuell gibt es auch eine Lösung mit Hintergrundgrafiken (background-image), aber da kenne ich mich zu wenig aus. Danach kannst du ja mal googeln, falls nicht noch jemand eine bessere Lösung für dich hat. Gruss MrMurphy |
Sponsored Links |
|
|||
Es gibt noch eine Lösung, wie man ohne Grafiken und ohne zusätzliche HTML Elemente auskommt. Mit CSS ist das möglich, indem man mit :before und/oder :after Selektoren arbeitet. So in etwa:
Code:
.box:after{position:absolute;bottom:0px; width:50%;height:3px;border-radius:10px;background-color:black; content:"";} Geändert von cloned (23.04.2015 um 10:23 Uhr) Grund: siehe kommentar von Thielo |
|
||||
Man bräuchte wahrscheinlich noch ein content: ''; damit das Ding gerendert wird.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
Vielen Dank an alle!
habe das mit :after gerade ausprobiert, die Trennlinie wird auch tatsächlich angezeigt, allerdings ganz unten im Browserfenster und nicht am Ende des Blockes: Und die Trennlinie beginnt ganz links. Habe auch die Trennlinie rechts ausprobiert, ist der selbe Effekt: wird rechts am Rand angezegt. Hier zur Ansicht: 20150423 - css trennlinien.JPG Habt ihr ne Idee? Nur zu Info: Der Grüne Bereich ist der, wo ich versucht habe das ganze als Plan B mit img Elementen zu lösen: den Balken in 3 Teile geteilt, der mittlere Teil ist skalierbar. Ich lasse es hier erstmal aussen vor, kann aber später gerne darauf eingehen, wenn es jemand interessiert. Geändert von forenjunkie (23.04.2015 um 12:46 Uhr) |
|
|||
Deinen Ahhang gibt es nicht. Hast du einfach nur copy-paste von meinem CSS gemacht? Wenn ja, dann lies dir auch folgenes durch:
Zitat:
Auch woran sich ein absolut positioniertes Element orientiert findest du mittels google heraus. |
|
|||
Hmm... Ich kann auf den Anhang klicken und wird auch angezeigt...
Danke für den Wink, habe den Fehler mit der Zentrierung gefunden und positionierung funzt halbwegs. Musste noch ein übergeordnetes div hinzufügen und diesen relativ positionieren. Ist ein solches Vorgehen üblich in HTML-Umfeld oder gibt es da alternative Ansätze? |
|
|||
habe bisher keine position gebraucht, so nimmt er standardmäsig den gesammten Browserbereich, da sonst kein übergeordetes element positioniert wurde => brauche ein übergeordnetes div. Aber aus deiner Aussage entnehme ich, dass das mit position relative tatsächlich die übliche Herangehensweise ist.
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
abgerundete ecken - problem: außenabstand nach rechts | marc0o | CSS | 2 | 09.08.2011 23:05 |
css abgerundete Ecken Problem mit Safari | -=ED=- | CSS | 2 | 09.03.2009 16:10 |
Abgerundete Ecken | workingguy | CSS | 8 | 29.06.2008 10:47 |
abgerundete ecken? | celine@23 | CSS | 1 | 07.02.2007 10:23 |
abgerundete ecken als hintergrund in css menü | gollib | CSS | 3 | 18.07.2006 01:44 |