28216 sujets

CSS et mise en forme, CSS3

Faire une barre de pourcentage en xhtml

Bonjour,

Je suis tout nouveau ici (bien que je connaisse le site depuis quelques temps déjà), donc milles excuses si mon sujet n'est pas à la bonne place Smiley smile

Je voudrais faire une barre de progression / pourcentage tout bien comme il faut en xhtml (full CSS2 donc).
J'ai déjà fait une version mais avec la vieille méthode des tableaux.

Je m'explique sur la notion de cette barre.
J'ai un pourcentage.. mettons 30%.
Je voudrais représenter ce pourcentage sous forme d'une barre.

Pour compliquer la chose, j'ai une image à gauche et une image à droite (pour rendre la barre plus sympatoche).
La barre proprement dit est composée d'une image début, d'une image de fin et une image de milieu.
C'est cette dernière image qui pourra être aggrandie en fonction du pourcentage.
Il y a biensur une image de fond pour remplir le blanc (dans mon exple .. les 70% restant).

J'aurais donc aimé connaitre votre avis sur la méthode à utiliser pour avoir un code nickel en CSS2.

Je peux utiliser le PHP pour gérer le pourcentage en variable.

Merci d'avance à ceux qui prendront le temps de me lire et de répondre Smiley smile

P.S. : je pourrais donner plus d'info sur le résultat final souhaité avec des images s'il le faut.
Slt,

tu peux faire un div dans lequel tu mettras tes barres et sur lequel tu appliques un background:url(ton-image-de-fond);.
Ensuite, tes barres peuvent être des divs que tu places en absolute et que tu fixe en bas. Ensuite, la hauteur est le pourcentage que tu souhaites.
#mabarre1{
position:absolute;
bottom:0;
width:npx;
height:70%;
}


La tu as une barre.
Mais bon Xhtml/css n'est pas fais pour ça, et tu devrais, si possible, le faire en SVG.

a+
Modifié par SirWam (21 Jun 2005 - 15:09)
Ca devient compliqué !

Pour faire une barre, tu peux envelloper tout ça dans un div. Par exemple :
<div class="barre">
<div class="image-de-gauche">
</div>
<div id="pourcentage1">
</div>
<div class="image-de-droite">
</div>
</div>

.barre{
width:300px;
height:30px;
background:black;
}

.image-de-gauche{
position:abolute;
left:0;
width:30px; /* la longueur de l'image */
height:30px /* idem */
background:url(image-de-gauche.png) no-repeat;
}

.image-de-droite{
position:abolute;
right:0;
width:30px; /* la longueur de l'image */
height:30px /* idem */
background:url(image-de-droite.png) no-repeat;
}

#pourcentage1{
position:absolute;
left:31px;
width:/* 70%*260px par exemple */
height:30px;
background:url(image-répété.png) repeat-x;
}


a+
Sujet clos
Aller à