zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Trennbalken: 50%, abgerundete Ecken, responsive

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.04.2015, 23:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2015
Ort: saarland
Beiträge: 5
forenjunkie befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.04.2015, 07:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Und responsive soll das auch noch sein.

Es geht mir hier wirklich ausschließlich um die Umsetzung des Trennbalken.
Was denn nun?

Zitat:
Hat jemand eine Idee wie ich dies am elegantesten bewerkstelligen kann?
Eine elegante Lösung würde nur auf CSS basieren. So eine sehe ich bei deinen Wünschen (z. B. den abgerundeten Ecken / Schmalseiten) aber nicht.

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.04.2015, 08:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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:"";}
Das CSS ist ungetestet und die position gehört natürlich noch angepasst. Aber so im Prinzip dürfte es doch funktionieren?

Geändert von cloned (23.04.2015 um 10:23 Uhr) Grund: siehe kommentar von Thielo
Mit Zitat antworten
  #4 (permalink)  
Alt 23.04.2015, 10:12
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
  #5 (permalink)  
Alt 23.04.2015, 10:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Stimmt, das ist wichtig. Das kann einen viel Fehlersuche ersparen wenn man das noch dazu nimmt
Mit Zitat antworten
  #6 (permalink)  
Alt 23.04.2015, 11:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2015
Ort: saarland
Beiträge: 5
forenjunkie befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 23.04.2015, 11:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Deinen Ahhang gibt es nicht. Hast du einfach nur copy-paste von meinem CSS gemacht? Wenn ja, dann lies dir auch folgenes durch:
Zitat:
die position gehört natürlich noch angepasst
Wie du ein Element zentrierst findest du mit google heraus.
Auch woran sich ein absolut positioniertes Element orientiert findest du mittels google heraus.
Mit Zitat antworten
  #8 (permalink)  
Alt 23.04.2015, 12:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2015
Ort: saarland
Beiträge: 5
forenjunkie befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #9 (permalink)  
Alt 23.04.2015, 12:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wieso musst du noch ein übergeordnetes div hinzufügen? Du kannst ja jedes Element relativ positionieren.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.04.2015, 12:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2015
Ort: saarland
Beiträge: 5
forenjunkie befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:12 Uhr.