Hallo zusammen,
ich würde gern meine Sidebar-Box "sanieren" 
, mir fehlt es jedoch an der Umsetzung, da es via WYSIWYG-Editor nicht möglich ist. Habe ich mich versucht an HTML nur ich komme zu keinem Ergebnis. 
Würde mir hier evtl. eine/einer unter die Arme greifen 
?
Derzeit sieht sie so aus:
und enthält (bitte mich nicht erschlagen 
) folgenden HTML-Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aktueller Progress</title>
</head>
<table width="100%" style="margin:0px;padding:0px;" >
<tr valign="top">
<td width="35" height="34" rowspan="2"><img src="https://kotoc.de/download/progress/nf.jpg" width="40" height="38"></td>
<td><strong>Nighthold</strong></td>
<td align="right" nowrap><font size="1" color="#009916">Heroic</font></td>
</tr>
<tr>
<td colspan="2">
<table width="100%" cellspacing="1" cellpadding="0" style="border: 1px solid #cccccc">
<tr>
<td width="100%" nowrap>
<div style="font-size:10px;color:#FFFFFF;background-image:url('https://kotoc.de/download/progress/progress_line.jpg');background-repeat:repeat-x;height:12px;width=100%;"><center>100% (10/10 clear)</center></div>
</td>
<td width="0%" nowrap>
<div style="font-size:10px;color:#000000;"></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="height:3px"></td>
</tr>
</table>
<table width="100%" style="margin:0px;padding:0px;">
<tr valign="top">
<td width="35" height="34" rowspan="2"><img src="https://kotoc.de/download/progress/tov.jpg" width="40" height="38"></td>
<td><strong>Trials of Valor</strong></td>
<td align="right" nowrap><font size="1" color="#009916">Heroic</font></td>
</tr>
<tr>
<td colspan="2">
<table width="100%" cellspacing="1" cellpadding="0" style="border: 1px solid #cccccc">
<tr>
<td width="100%" nowrap>
<div style="font-size:10px;color:#FFFFFF;background-image:url('https://kotoc.de/download/progress/progress_line.jpg');background-repeat:repeat-x;height:12px;width=100%;"><center>100% (3/3 clear)</center></div>
</td>
<td width="33%" nowrap>
<div style="font-size:10px;color:#000000;"></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="height:3px"></td>
</tr>
</table>
<table width="100%" style="margin:0px;padding:0px;">
<tr valign="top">
<td width="35" height="34" rowspan="2"><img src="https://kotoc.de/download/progress/en.jpg" width="40" height="38"></td>
<td><strong>Em. Nightmare</strong></td>
<td align="right" nowrap><font size="1" color="#009916">Heroic</font></td>
</tr>
<tr>
<td colspan="2">
<table width="100%" cellspacing="1" cellpadding="0" style="border: 1px solid #cccccc">
<tr>
<td width="100%" nowrap>
<div style="font-size:10px;color:#FFFFFF;background-image:url('https://kotoc.de/download/progress/progress_line.jpg');background-repeat:repeat-x;height:12px;width=100%;"><center>100% (7/7 clear)</center></div>
</td>
<td width="0%" nowrap>
<div style="font-size:10px;color:#000000;"></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="height:3px"></td>
</tr>
</table>
<body>
</body>
</html>
Jetzt würde ich gerne eine Moderne-Box erstellen, die sich mit CSS ansprechen lässt. Sie sollte ungefähr so aussehen:
Die Box ist mit dem Editor erstellt um diesen Ausklapp-Effekt des Spoilers zu erhalten. Leider lässt sich in ihm keine HTML Progressbar erstellen. Und nun stehe ich vor einem Problem, da ich noch nicht weiß wie ich das umsetzen kann. Ich würde gern in dem "button" gerne noch das kleine Bild links haben und ganz rechts soll "heroic" stehen.
Wegen dem CSS würde ich gern vom Aussehen in diese Richtung gehen:
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}Quelle: https://css-tricks.com/html5-progress-element/
Grüße
