Problema barretta dinamica

[fradamma]

Ciao a tutti,
Innanzitutto scusate se duplico la discussione, ma credo di aver sbagliato a scrivere nella sezione Html. Vengo subito al dunque. Per prima cosa vorrei sapere se il mio problema è gestibile lato css (html) oppure devo affidarmi a jquery (come credo purtroppo...).
Ho questa situazione:

     <div class="wrap_risp">
            <span class="risposta"><span class="percentuale" style="width: ???"></span></span><span class="percentuale-risultato">100%</span>
     </div>

<style>
div.wrap_risp {
position: relative;
}
span.risposta {
 height: 40px;
 margin: 15px 5px 15px 10px;
 overflow: hidden;
 width: 165px;
display:blocK;
float:left;
}
span.percentuale {
 background: none repeat scroll 0 0 #F37800;
 border-radius: 2px; 
 height: 40px;
 -moz-border-radius: 2px; 
 -webkit-border-radius: 2px;
 margin-right: 10px;
display:blocK;
float:left;
}
</style>

Sto realizzando un sondaggio dinamico e il codice che vedete postato rappresenta graficamente la barretta percentuale della risposta al sondaggio.
Il pezzetto della barra è questo:

"<span class="risposta"><span class="percentuale" style="width: ???"></span></span>"

Lo span "risposta" deve avere una width fissa (ora 165px) in quanto il suo span interno "percentuale" avrà una width immessa inline dinamicamente e percentuale (ecco spiegati i punti interrogativi). Inoltre quest'ultimo prenderà un bg arancione (esempio "style="width: 55%; backgroundrange; " ---> lo span interno prende il 55% dei 165px di "risposta").
Il mio problema riguarda lo span "percentuale-risultato" (<span class="percentuale-risultato">100%</span>) dove ora è stato messo "a mano" un 100% testuale : questo span deve seguire graficamente la barretta/span alla sua sinistra ("percentuale-risultato") e non restare fissa all'estremità destra. La cosa che mi blocca lato css e non mi permette di giocare con i vari position è la width fissa di "risposta" a 165px.

E' possibile far adattare lo span "percentuale-risultato" affinchè sia attaccato a "percentuale" con i css oppure essendo al di fuori dello span risultato non potrà mai seguirlo? Nel caso come potrei farlo con jquery?

Grazie e spero si essere stato chiaro. Buona giornata.

 

[fradamma]

Nessuno può darmi una mano?

 

[criric]

Ciao, mettilo all'interno dello span risposta

<div class="wrap_risp">
    <span class="risposta">
        <span class="percentuale" style="width:70%"></span>      
        <span class="percentuale-risultato">100%</span>      
    </span>
</div>

chiudo l'altra discussione anche se ti eri spiegato meglio li

 

[fradamma]

Ciao, mettilo all'interno dello span risposta

<div class="wrap_risp">
    <span class="risposta">
        <span class="percentuale" style="width:70%"></span>      
        <span class="percentuale-risultato">100%</span>      
    </span>
</div>

chiudo l'altra discussione anche se ti eri spiegato meglio li

Effettivamente hai ragione, mi ero spiegato meglio lì
Cmq avevo già pensato alla soluzione che proponi tu, però non è fattibile perchè lo span contenitore "risposta" ha width fissa e, nel caso in cui la barretta interna ("percentuale") avesse percentuale 100% (ma anche meno, dipende dal width di "percentuale-risultato"), lo span accanto "percentuale-risultato" andrebbe a finire sotto...e questo non deve accadere deve essere tutto su una riga....
è un bel casino...

 

[criric]

lascialo all'interno e aggiungi questa regola

.percentuale-risultato {        
        position:absolute;
    }

 

[fradamma]

lascialo all'interno e aggiungi questa regola

.percentuale-risultato {        
        position:absolute;
    }

Nada, non funziona. Il position absolute serve poco. Il problema è che essendo all'interno dello span "risultato" (a cui ho dato position: relative) la sua posizione è calcolata in base ad esso. Succede che quando l'altro span interno "percentuale" avrà una width del 100% occuperà tutto lo spazio e lo span che lo segue ("percentuale-risultato") va a finire sotto. Devo mettere percentuale-risultato fuori...ma fare in modo che segua lateralmente la posizione di "percentuale" che è all'interno dell'altro span...credo che posso farlo solo con javascript/jquery....

 

[criric]

e lo span che lo segue ("percentuale-risultato") va a finire sotto

sicuro? perchè ho provato così e funziona

<div class="wrap_risp">
    <span class="risposta">
        <span class="percentuale" style="width:100%"></span>
        <span class="percentuale-risultato">100%</span>
    </span>
</div>

<style>
    div.wrap_risp {
        position: relative;
    }
    span.risposta {
        height: 40px;
        margin: 15px 5px 15px 10px;
        overflow: hidden;
        width: 165px;
        display:blocK;
        float:left;
    }
    span.percentuale {
        background: none repeat scroll 0 0 #F37800;
        border-radius: 2px; 
        height: 40px;
        -moz-border-radius: 2px; 
        -webkit-border-radius: 2px;
        margin-right: 10px;
        display:blocK;
        float:left;
    }
    .percentuale-risultato {
        position:absolute;
    }
</style>

 

[fradamma]

Io ho questa situazione:

 <ul>
            <li>
                <div class="domanda">Lorem Ipsum</div>
                <div class="voto"><a href="#" class="">VOTA</a></div>
                <div class="wrap_risp">
                    <span class="risposta"><span class="percentuale"></span><span class="percentuale-risultato">100%</span></span>
                </div>
            </li>
            <li>
                <div class="domanda">Lorem Ipsum</div>
                <div class="voto"><a href="#" class="">VOTA</a></div>
                <div class="wrap_risp">
                    <span class="risposta"><span class="percentuale"></span><span class="percentuale-risultato">100%</span></span>
                </div>
            </li>
            <li>
                <div class="domanda">Lorem Ipsum</div>
                <div class="voto"><a href="#" class="">VOTA</a></div>
                <div class="wrap_risp">
                    <span class="risposta"><span class="percentuale"></span><span class="percentuale-risultato">100%</span></span>
                </div>
            </li>
        </ul>

Praticamente adattando il css che mi hai postato tu non esce...
Ti posto un'immagine per farti capire cosa vorrei (le frecce sono esemplificative su quello che voglio fare)


allo stato attuale, se percentuale-risultato è dentro risultato, quando "percentuale" ha width:100% continua per tutta la larghezza e fa andare a capo "percentuale-risultato"...

 

[criric]

adattando il css che mi hai postato tu non esce...

forse perche il bianco sul bianco non si vede, ma fidati che esce, prova a cambiare colore al testo

 

[criric]

e se invece lo metti all'interno dello span percentuale ?
prova questo esempio non è male

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var p = 10;
        s = setInterval(function() {
            $("#barra").css("width", p + "%");
            $("#percentuale").html(p + "%");
            p++;
            if (p > 100)
                clearInterval(s);
        }, 80);
    });
</script>
<style type="text/css">
    #contenitore {
        position:static;
        height:22px;
        width:250px;
        border:1px solid #333;
        background-color:#666;
        overflow: hidden;
    }
    #barra {
        display: inline-block;
        height:22px;
        background-color:#fad40d;
    }
    #percentuale {
        display: inline-block;
        float: right;
        margin-right: 6px;
    }
</style>
<div id="contenitore">
    <span id="barra">
        <span id="percentuale"></span>
    </span>
</div>

 

[fradamma]

Ok....fammi fare un po di prove....ci aggiorniamo...
grazie per il tempo che dedichi ai miei deliri