La barre de progression en HTML/CSS

 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>

Cela crée une barre blanche et le remplit avec du bleu de 35%.

Maintenant, je voudrais remplir la MÊME barre de progression avec deux valeurs différentes. Par exemple, si Une valeur a été de 30% et la valeur de B est de 40%, 70% de la barre se remplit, mais le pourcentage de chacun d'entre eux pourrait être vu par une différence de couleurs. La valeur de A et de B peuvent venir dans n'importe quel ordre sur le bar, aussi longtemps que je peux dire qu'il y sont deux choses différentes et de "voir" combien chacun est prise.

Des suggestions?

Grâce.

OriginalL'auteur T.T.T. | 2009-02-25

Vous cherchez quelque chose de ce genre?

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>

Je ne suis pas sûr de savoir pourquoi vous êtes à l'aide de dd tag (pour moi, cette balise causes des divs pour rendre sous le dd tag, plutôt qu'à l'intérieur).

Oui. Je Vous Remercie. C'est très propre façon de le faire.

OriginalL'auteur jennyfofenny

0

Je suggère la superposition d'une autre barre de dessus et de le déplacer à gauche/droite en tant que de besoin.

Si les barres ne sont pas censés l'étirement de la longueur de la fenêtre d'affichage, vous pouvez les mettre dans un div avec overflow:hidden pour garder l'illusion intacte.

Edit:

Je viens de comprendre pourquoi je voulais le faire de cette façon et de ne pas suivre ce que tu avais commencé. Quand j'ai fait quelque chose de semblable auparavant, il a été à l'aide d'images, où la modification de la largeur du cours ont mutilé la superposition de l'image.

Avec de simples couleurs, je suis sûr que vous pourriez sortir avec juste l'aide de la taille. Mais je préfère encore utiliser CSS pour la couche de l'un sur l'autre.

Exemple? Les valeurs vont changer toutes les quelques minutes pour le déplacement de la deuxième de plus de droite ne fonctionne pas quand dire la 1ère valeur descend à 5%, j'aurais besoin de la valeur de B "annexer".

OriginalL'auteur Trevor Bramble

<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>

Puis le CSS:

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

Si vous souhaitez simplement une valeur dans une barre de progression, il y a un tutoriel ici.

OriginalL'auteur IamGuest

-1

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

Et après que:

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

OriginalL'auteur Dalibor

Vous devez vous connecter pour publier un commentaire.