css "sliding doors"

[aleritty]

Ciao a tutti!

Ho un piccolo problema con la tecnica "sliding doors", ovvero con la creazione di pulsanti dalla larghezza variabile in base al testo.

Come potete vedere qui:
http://unitech.aleritty.net

Se scorrete con il mouse sul pulsante vi trovate in una posizione nella quale è visibile solo il bordo sinistro dell'immagine di sfondo e questo non fa proprio bellissimo!

Sapete come posso risolvere?

Grazie!

[evan75]

pensavo di avertelo già scritto nel thread che hai aperto nel subforum di grafica.

qui hai diviso l'immagine in 3 parti: sin centro e ds.

se usassi un'immagine singola (come ti dicevo, una png 24 una gif con sfondo trasparente.. meglio ancora se utilizzassi uno sprite) ti risparmieresti un sacco di rogne sia su cambiamenti cromatici che su tempi di caricamento dello stato hover del mouse..

in bocca al lupo!

[aleritty]

Si, nella sezione grafica mi hai consigliato di usare uno sprite, ma io non ho idea del testo che potrebbe finire in quei pulsanti quindi mi serve un modo di creare un pulsante di lunghezza "variabile" automaticamente! Ora, o uso GD ogni volta (ma mi sembra uno spreco) oppure mi tocca usare questo metodo!

In ogni caso sono solo due immagini, quella di destra (lunga oltre 100px) e quella di sinistra che fa l'effetto del bordo a sinistra.

Lo sprite in questo caso non mi sarebbe utile purtroppo in quanto tramite sprite non posso far "ridimensionare" la lunghezza del bottone.

Ho seguito il tuo consiglio sulle trasparenze per sistemare il problema cromatico, ora però il problema non è più quello ma l'adattamento del pulsante al testo contenuto!

Ti ringrazio per l'aiuto!

[miki003]

Se non hai il problema di un'immagine di sfondo del pulsante con dimensioni fisse ma puoi usare un'immagine ripetibile, non vedo problemi usando una lista + css

[aleritty]

Originariamente inviato da miki003
Se non hai il problema di un'immagine di sfondo del pulsante con dimensioni fisse ma puoi usare un'immagine ripetibile, non vedo problemi usando una lista + css

Temo di non aver capito...

[miki003]

Voglio dire che è possibile con solo html (liste) + CSS creare dei pulsanti che si adattano al testo inserito

[aleritty]

Si ok, fino a dare un background al pulsante tramite css ci sono arrivato anche io!
Però se volessi una immagine (cosa che rende graficamente più appetibile il tutto, considerando che il tizio mi ha fornito le immagini e vuole proprio quelle...) dovrei utilizzare questa tecnica! Se guardi il sito noterai che il pulsante rende bene e può diventare di diverse lunghezze. Il fatto è che c'è una posizione del mouse che lascia visibile solo un pezzo di immagine e questo sta male. E' a questa cosa che sto cercando di dare una soluzione.

[evan75]

puoi usare javascript o jquery se vuoi un movimento e ridimensionamento fluido, oppure i nifty corners visto che hai solo degli angoli arrotondati


ciao

[aleritty]

In realtà non volevo andare sul javascript ma tanto mi sa che il tizio vorrà poi metterci un menu a discesa e con javascript ci metto di meno a farlo che con css (ed è più compatibile).

Insomma non si riesce a trovare una soluzione al problema dell'angolo dell'immagine che sparisce...