Statusleiste in HTML/CSS

Question

dd { 
    /*position: relative; /* IE is dumb */ 
    display: block;     
    float: left;  
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: url("white3.gif"); 
} 

dd div.blue { 
    /*position: relative; */ 
    background: url("blue.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block; 
} 

HTML:

<dd> 
    <div class="blue" style="width:35%;"> 
</dd> 

Dies schafft einen weißen Balken und füllt es mit blau 35%.

Jetzt möchte ich die gleiche Fortschrittsbalken mit zwei verschiedenen Werten füllen. Wenn zum Beispiel der Wert A 30% und der Wert B 40% betrugen, würden 70% des Balkens gefüllt sein, aber der Prozentsatz von jedem könnte durch einen Unterschied in den Farben gesehen werden. Wert A und B können in beliebiger Reihenfolge auf der Leiste stehen, solange ich feststellen kann, dass es zwei verschiedene Dinge gibt und "sehe", wie viel jeder auf nimmt.

Irgendwelche Vorschläge?

Danke.

Answer 1

Sind Sie auf der Suche nach so etwas?

CSS:

div.dd { 
    /*position: relative; /* IE is dumb */ 
    display: block;     
    float: left;  
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: #fff; 
} 

div.dd div.blue { 
    /*position: relative; */ 
    background: #00f; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block; 
    float: left; 
} 
div.dd div.red { 
    /*position: relative; */ 
    background: #f00; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block; 
    float: left; 
} 

HTML:

<div class="dd"> 
    <div class="blue" style="width:35%;"></div> 
    <div class="red" style="width:10%;"></div> 
</div> 

Ich bin nicht sicher, warum Sie den dd-Tag verwenden (für mich, diesen Tag bewirkt, dass die div-Tags unter dem dd-Tag machen , anstatt drinnen).

Answer 2

Ich schlage vor, einen anderen Balken darüber zu legen und nach links/rechts zu verschieben.

Wenn die Balken die Länge des Ansichtsfensters nicht dehnen sollen, können Sie sie in ein div mit Überlauf setzen: versteckt, um die Illusion intakt zu halten.

Edit:

ich gerade herausgefunden, warum ich es so machen wollte und nicht folgen, was du begonnen hatte. Wenn ich etwas Ähnliches vorher gemacht habe, benutzte ich Bilder, bei denen das Ändern der Breite das Bild überlagert hat.

Mit nur einfachen Farben, ich bin sicher, dass Sie mit der Größe einfach durchkommen könnten. Aber ich würde immer noch CSS verwenden, um einen über den anderen zu legen.

Answer 3

<div style="height: 5px; background-color: green; width: 100%;"> 
    <div id="progress_bar" style="height: 5px; background-color: red; width: 10%;"></div> 
</div> 

Und danach:

$('#progress_bar').css('width', '30%'); 

Answer 4

<div class="progressbar"> 
    <div class="inner1" style="width: 30%; background-color: blue;"><b>Value A</b></div> 
    <div class="inner2" style="width: 40%; background-color: red;"><b>Value B</b></div> 
</div> 

Dann wird die CSS:

.progressbar { 
    background-color: #1e1e1e; 
    color: white; 
    height: 25px; 
    width: 115px; 
} 
.inner1, .inner2 { 
    height: 100%; 
    /* Change width with javascript */ 
} 

Wenn Sie nur einen Wert in einem Fortschrittsbalken wollen, gibt es ein Tutorial here.