CSS Span Trennlinie

[SourceCoder]

Schönen guten Tag Zusammen,

also ich habe diesen Fortschrittsbalken auf meiner Webseite eingebaut nun würde ich aber gern das alle 25% eine weiße horizontale Trennlinie zu sehen ist, so das Balken zu sehen sind die visualisieren den Lieferfortschritt.

Will das es sieht aussieht wie auf dem ersten Bild, auf dem zweiten Bild ist der aktuelle Stand bei mir.

 

[Ic3HanDs]

Ohne die Lösung zu kennen da noch nie getestet: Soweit ich weiß kann man die noch nicht wirklich animieren oder? Und selbst wenn: Könnte es sein das er einfach 4 gleich große Spans erstellt und die direkt hintereinander setzt und animiert ? Richtig formatiert merkst davon dann nichts ^^

 

[DasBoeseLebt]

Spontan würde ich sagen, dass das entweder gar keine Progressbars sind oder einfach 4 Stück.

Wenn jeder einzelne Schritt eh immer bis zum ,,Rand'' geht, so würde ich erst recht keine Progressbars verwenden. Macht kein Sinn und geht auf älteren Browsern nicht.

 

[Reglohln]

Das Problem ist, dass es für solche Deko kein wirklich geeignetes HTML-Element gibt.

Ich würde es hier vllt so interpretieren, dass die einzelnen Segmente den Status der Lieferung anzeigen. Also "Bestellannahme", "Verpacken", ect. pp. Somit wäre es wohl eine Auflistung von Zuständen und du könntest es mittels einer Liste lösen. Dann schön mit border arbeiten und fertig ist der Lack.

Was ich aber nicht so ganz verstehe ist Folgendes: in deinem anderen Thread geht es offenbar um animierte Fortschrittsbalken, die z.B. das Laden einer Datei ect. anzeigen sollen. Aber es scheint ja doch keine Animation zu sein, sondern eine fixe Anzahl an festen Zuständen. Worum geht es dir denn nun genau?

 

[Daaron]

Wenn du auf alte Krücken aka IE<=8 scheißen kannst dann greif auf multiple backgrounds + background-size zurück.
- "vorderer" BG: eine PNG mit deinen Streifen, entsprechend gestreckt auf die Länge deines Elements
- "hinterer" BG: ein grünes Pixel, gestreckt in Y-Richtung. Über background-size: kannst du dieses Pixel dann in X-Richtung von 0 - 100% entlang des Elements wachsen lassen.

 

[SourceCoder]

Das Problem ist, dass es für solche Deko kein wirklich geeignetes HTML-Element gibt.

Ich würde es hier vllt so interpretieren, dass die einzelnen Segmente den Status der Lieferung anzeigen. Also "Bestellannahme", "Verpacken", ect. pp. Somit wäre es wohl eine Auflistung von Zuständen und du könntest es mittels einer Liste lösen. Dann schön mit border arbeiten und fertig ist der Lack.

Was ich aber nicht so ganz verstehe ist Folgendes: in deinem anderen Thread geht es offenbar um animierte Fortschrittsbalken, die z.B. das Laden einer Datei ect. anzeigen sollen. Aber es scheint ja doch keine Animation zu sein, sondern eine fixe Anzahl an festen Zuständen. Worum geht es dir denn nun genau?

Deine Vermutung ist richtig diese Balken stellen Status dar. Wie gesagt hab ja von dieser Seite übernommen : http://www.blogverdiener.de/2011/03/css3-tutorial-fortschrittsbalken-mit-css-3-progress-bar-ohne-bilder/ dachte mir dann 4 DIVs neben einander und fertig oder habt ihr eine bessere Idee?


PS: Es soll doch keine Animation werden da die Webseite für Mobile Geräte ist und die nicht so viel Power haben.

 

[Reglohln]

Wenn du auf alte Krücken aka IE<=8 scheißen kannst dann greif auf multiple backgrounds + background-size zurück.

Bei solch einer Leiste würde ich das aber nicht machen, sonst sehen User mit Browsern, die das nicht unterstützen, irgend ne komische Leiste und wundern sich. Wenn mal ein Content falsch positioniert ist oder sonstige kleinere Designmacken auftreten, ist das nicht so wild, aber bei sowas würde ich älter Browser nicht immer gleich ausschließen.

dachte mir dann 4 DIVs neben einander und fertig oder habt ihr eine bessere Idee?

Warum wollen alle immer alles über DIVs lösen? DIV ist garnichts. DIV ist, wie es ein anderer User in einem anderen Thread treffend formuliert hat, einfach nur da.

Fakt ist: Dekoelemente haben grundsätzlich nichts im Markup verloren. Dein Problem ist natürlich jetzt, dass du kein vorhandenes Markup hast, was diese Dekoelemente via CSS bekommen könnte, weil es eben 4 "unabhängige" Bereiche sind.

Und ich habe dir ja bereits einen Tipp gegeben. Ich würde es wohl mit einer Liste erstellen. Du kannst in jedes Listenelement auch einen Inhalt einfügen. Also z.B. <li>Auftragsannahme</li> und den aktuelle Bearbeitungszustand könnte man mit <strong> oder <b> hervorheben. Wobei <b> auch wieder semantisch nicht ganz korrekt ist. <strong> wäre da wohl am geeignetstenm (bin aber in Sachen semantisches Markup nicht ganz so bewandert, weil ich selten mit Webdesign zu tun habe).

Diesen Inhalt kannst du dann per CSS ausblenden. Ein Client ohne CSS sieht dann die Liste (vllt ne Überschrift hinzufügen <hx>Ihr Auftragsstatus</hx>) und der aktuelle Bearbeitungsschritt ist fett gedruckt.

 

[SourceCoder]

@Reglohln
Klingt besser, könntest du vielleicht ein Beispiel zeigen wie es aussehen könnte?

 

[Reglohln]

Schlicht eine Liste.

<h1>Ihr Auftragsstatus</h1>

<ul id="processbar">
  <li class="process">Auftragsannahme</li>
  <li class="process"><strong>Verpacken</strong></li>
  <li>Versand</li>
  <li>Zugestellt</li>
</ul>

In diesem Beispiel ist der Prozess also gerade beim Verpacken, sodass die Balken für "Auftragsannahme" und "Verpacken" gefüllt sind. Man kann natürlich eine weitere Klasse einführen, womit man nur abgeschlossene Prozesse z.B. grün ausfüllt und der aktuelle Prozess z.B. gelb oder sowas. Die Prozesse, welche in der Zukunft liegen bekommen dann keine eigene Klasse zugewiesen und bleiben somit grau oder whatever.

Die Klasse "process" ist dann einfach der gefüllte Teilbereich.

Mittels PHP musst du halt vorher abklären, welcher Status gerade der aktive ist und allen vorherigen Schitten diese Klasse zuweisen, sodass der Balken "länger" wird.

Die Liste und die Listenelemente bearbeitest du mit CSS so, dass sie einen Rand bekommen, damit die Unterteilungen zu sehen sind, wie du sie möchtest. Zudem lässt du mit CSS den Inhalt ausblenden (gibt es verschiedene Möglichkeiten), sodass bei aktivem CSS der Text nicht sichtbar ist.

Der Klasse process gibst du dann eine entsprechende Hintergrundfarbe.

Ob das nun wirklich der Weisheit letzter Schluss ist und es ggf. bessere Wege gibt, bleibt natürlich noch offen. Weitere Tipps sind sicher gern gesehen

P.S.: Und wenn du mit deinem Code Probleme haben solltest, dann bitte am Besten den Problemcode online stellen und dann hier verlinken. Da kann man vieles besser erklären/erkennen.