Beiträge von dor557

dor557

Hallo zusammen.

Ich bin dabei einen Shop in PHP selbst zu realisieren, da ich keinen der Vorgefertigen nutzen möchte.

Nun habe ich eine Design Frage.

zur zeit sieht das so aus : html-seminar.de/woltlab/attachment/1168/

ich hätte aber gerne das die Pfeile auch bei geschwärztem hintergrund nur eine linie anzeigen.... hier mal mein CSS und HTML Code :

CSS

#shop-fortschritt {
 height: 30px;
 line-height:30px;
 position: relative;
 box-sizing: border-box;
 margin-top: 10px;
 display: table;
 width: 100%;
 list-style: none;
 border:1px solid rgba(255, 255, 255, 1);
 background-color: #FFFFFF;
 color: #000000;
}

#shop-fortschritt li {
  height: 28px;
  line-height: 28px;
  position: relative;
  padding: 0px 8px 0px 10px;
  margin-left: 15px;
  margin-right: 0px;
  display:inline-table;
}

#shop-fortschritt li:before {
  content : "";
width: 0;
height: 0;
left: -25px;
top: 4px;
position: absolute;
    box-shadow: -1px 1px rgba(0, 0, 0, 0.4) !important;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
  transform: rotate(-135deg);
}

#shop-fortschritt li.done {
  color: #ddd;
  background-color: #000000;
}

#shop-fortschritt li.active:before {
  content : "";
width: 0;
height: 0;

top: 4px;
position: absolute;
border-top: 20px solid transparent;
border-left: 20px solid #000000;
  transform: rotate(-135deg);
}



#shop-fortschritt li.first:before {
  content : "";
  width: 0px;
  height: 0px;
  position: absolute;
  top: -3px;
  border: 0 solid transparent !important;
}

#shop-fortschritt li.first {
  padding-left: 8px !important;
  margin-left :0px !important;
}

Alles anzeigen

und nu der HTML :

Code

<ul id="shop-fortschritt">
  <li class="first done">1. Einkaufwagen &uuml;berpr&uuml;fen</li>
  <li class="second done active">2. Liefer- , Rechnungsadresse</li>
  <li class="third active">3. Zahlmethode</li>
  <li class="fourth">4. Zahlung und Kauf abschliessen</li>
  <li class="last">5. Best&auml;tigung</li>
</ul>

ich hoffe das einer von euch eine lösung Parat hat

gruss Sascha