• G
    User Newbie •

    CSS Positioning: Relative

    Salve a tutti. Ho un problema che ho risolto usando CSS+JavaScript ma volevo sapere se era in qualche modo possibile risolvere la questione col solo uso dei CSS.

    • Cosa voglio ottenere

    Ho una tabella con una serie di righe ed una colonna. In alcune di queste celle, che contengono del testo, voglio sovrapporre una gif con trasparenza che rappresenta una scritta obliqua, in maniera tale da creare un effetto tipo 'timbrato'.

    • Come avevo inizialmente fatto

    Per ottenere questo effetto non avevo fatto altro che aggiungere, alla fine del testo della cella di interesse, una span contenente l' immagine, con position:relative e agendo su left e top di conseguenza per metterla nel posto giusto.
    Tuttavia, essendo la span posizionata relativamente, l'altezza della cella ne viene influenzata risultando più alta del dovuto, come se la span fosse allq fine del testo.

    • Prima soluzione

    Per 'tagliare' l'eccedenza, ho provato a racchiudere tutto il contenuto della cella in una div, dando a questa overflow:hidden e height: Npx. Naturalmente questa soluzione non è ottimale perché, a seconda del browser e della risoluzione, il valore N dell'altezza può cambiare.

    • Soluzione con JavaScript

    A questo punto ho optato per JavaScript. In pratica ho aggiunto, nella OnLoad del body, uno script che ridimensiona automaticamente le celle in oggetto togliendo dalla loro altezza quella della gif.

    //obj è la div che contiene tutto il contenuto della cella
    h=obj.offsetHeight-60; // 60 = altezza bitmap
    obj.style.height=h+'px';
    obj.style.overflow='hidden';

    Così sembra funzionare ma naturalmente sono dipendente da JavaScript, che potrebbe essere disabilitato.

    Esiste quindi un metodo per fare ciò senza ricorrere a scripting ?

    0
  • C
    Super User •

    Ciao benvenuto tra noi 🙂

    Prova a vedere [url=http://www.google.it/search?hs=aQm&hl=it&client=firefox-a&rls=org.mozilla%3Ait%3Aofficial&q=image+replacement+css&btnG=Cerca&meta=]qui su google se trovi qualcosa di interessante. Magari dai prima un'occhiata [url=http://wellstyled.com/css-replace-text-by-image.html]qui se trovi qualche spunto...

    :ciauz:

    0
  • G
    User Newbie •

    Ciao, grazie per la risposta.

    L'image replacement però serve a 'sostituire' un testo con una immagine che ne contiene la sua rappresentazione.
    Il mio problema è, invece, mettere sopra un testo contenuto in una cella, una immagine in modo da ottenere una specie di timbratura, per capirci.

    0
  • C
    Super User •

    Si ma tanto se la gif è trasparente tu intravedi quello che c'è sotto...
    è praticamente la stessa cosa...

    0
  • G
    User Newbie •

    Usando una tecnica derivata dall'image replacement /cioè con background-image in definitiva) posso fare a meno del JavaScript, tuttavia ho un effetto collaterale: il timbro risulta essere sotto il testo piuttosto che sopra.

    0
  • G
    User Newbie •

    Ho risolto senza l'utilizzo di JavaScript.
    Ho utilizzato una div prima del testo che deve apparire sotto l'immagine, usando position: absolute e background-image() e z-index e non specifidando left e top ma solo width e height (uguali a quelli dell'immagine di fondo).

    ....
    <div style="z-index: 1; position: absolute; width:520px; height: 60px; background-image: url(...);background-repeat:no-repeat;background-position: center 0px;">
    </div>
    TESTO TESTO TESTO
    ...
    ...

    0
  • C
    Super User •

    @gorgoroth said:

    Ho risolto senza l'utilizzo di JavaScript.
    Perfetto 😉

    Provalo con i vari browser e cambiando risoluzione... Spero sia tutto ok 🙂

    Ciao :ciauz:

    0
Effettua l'accesso per rispondere