Formato pulsante

[Valeria75_bis]

Ciao a tutti, stavo cercando di replicare il formato di questo pulsante


<ul data-role="listview" data-theme="b" class="ui-listview">
<li data-theme="b" class="ui-btn ui-btn-up-b ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text">TEAM BLOG</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div>
[/list]

visibile al sito

http://www.volvooceanraceabudhabi.com/mobile/

perchè in locale (anche dopo aver scaricato tutto) non funziona?


nei CSS è presente

.ui-btn-up-f {
background: #474747;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 1px #000;
background-image: url(../images/noise.png), -moz-linear-gradient(top, #414141, #3F3F3F);
background-image: url(../images/noise.png), -webkit-gradient(linear, left top, left bottom, color-stop(0, #414141), color-stop(1, #3F3F3F));
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorStr=' #414141', EndColorStr='#3F3F3F')";
}
.ui-btn-up-f a.ui-link-inherit {
color: #fff;
}
.ui-btn-hover-f, .current {
background: #555555;
font-weight: bold;
color: #FC9A18;
text-shadow: 0 -1px 1px #000;
background-image: url(../images/noise.png), -moz-linear-gradient(top, #555555, #555555);
background-image: url(../images/noise.png), -webkit-gradient(linear, left top, left bottom, color-stop(0, #555555), color-stop(1, #555555));
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorStr=' #555555', EndColorStr='#555555')";
}
.ui-btn-down-f {
border:none;
background: #555555;
font-weight: bold;
color: #FC9A18;
text-shadow: 0 -1px 1px #000;
background-image: url(../images/noise.png), -moz-linear-gradient(top, #484848, #484848);
background-image: url(../images/noise.png), -webkit-gradient(linear, left top, left bottom, color-stop(0, #484848), color-stop(1, #484848));
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorStr=' #484848', EndColorStr='#484848')";
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

ovvero non immagini ma l'effetto gradient

il problema è che i pulsanti in locali sono più alti, senza effetto sfumato e con dimensioni ridotte


mi aiutate a capire dove sbaglio?

Grazie

[Valeria75_bis]

Nothing?? :-(

[Valeria75_bis]

[Mich_]

hai sbagliato il modo di chiedere.

Anzitutto il codice si posta inserendolo nei tag CODE (v. pulsante sopra l'area di inserimento testo), altrimenti si perde la formattazione e in qualche caso anche la sintassi.

Poi devi postare un link al codice che NON funziona, non a quello che funziona e che devi replicare.

[Prill]

Il codice che inserisci riguarda il loghetto in alto a destra, che non mi sembra abbia alcun effetto particolare, con i link del menu vedo solo che dovrebbero essere larghi il 25% e cambiano colore del testo e colore di sfondo al passaggio del mouse, non vedo con firefox sfumature. Che effetto devi replicare? Si fa prima a rifarlo daccapo che non a isolarlo in quel codice

[Valeria75_bis]

Quello che mi interessa è essenzialmente questo

http://www.volvooceanraceabudhabi.com/mobile/about.html

Ovvero

- immagine (magari 2 con slider)
- X pulsanti sotto che riempiono in width
- 4 pulsanti sopra come nell'esempio (oppure sotto, non cambia molto)

ero partita da questo link perchè sarebbe stata perfetta come base


Thanks

[Prill]

se qualcosa deve scorrere in quella pagina, a me con Firefox non va, non vedo slider.
In generale, per riprodurre una pagina, magari per studiarsi il codice, non bisogna mai salvarla dal browser che in presenza di script andrà a inserire nel codice anche quanto non dovrebbe esserci. Ma sarà preferibile guardare il sorgente e riprodurlo così com'è copiandolo (stesso discorso per i file js, aprirli dal sorgente e salvarli da lì)
Il codice che inserisci nel tuo primo post ad esempio è più semplicemente

<ul data-role="listview" data-theme="b">[*]TEAM BLOG

Il menu, non vado a guardarmi quello nel dettaglio, potrebbe essere fatto, avendo un elenco di larghezza pari al 100% e con una larghezza minima atta a contenere i link necessari, usando display:block e float:left sulle voci elenco e larghezza in percentuale pari al 25% se i link sono 4, e un display:block sui collegamenti cambiando colore di sfondo sullo stato hover, o usando il gradient o un'immagine di sfondo.

[Valeria75_bis]

Il problema è che non sono riuscita a ricreare la struttura da sola :-(

Per quanto riguarda il salvataggio, avevo prova anche a copiare l'HTML e non salvare la pagina

[Prill]

Ti ho inviato in privato un link da cui scaricare pagina di esempio

[Valeria75_bis]

Oppssss ho visto ora la tua risposta. Controllo subito!

Grazie!!