Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Si può applicare una classe css ad un iframe?

541 views
Skip to first unread message

Fulmine

unread,
Mar 28, 2012, 7:18:47 AM3/28/12
to
Io ho <iframe style="overflow: hidden; width: 230px; height: 35px;
padding: 10px;[...]" src="...

Potrei trasformarlo in qualcosa come <iframe class="stile" src="...?

Ho provato a modificare così il codice (dopo aver creato nel css .stile
{overflow: hidden; width: 230px;...}) ma non funziona.

Vi ringrazio per l'aiuto :-)
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

Fulmine

unread,
Mar 28, 2012, 7:25:04 AM3/28/12
to
Io ho un iframe con numerosi attributi style, volevo evitare di scrivere
gli attributi creando una classe css, ma non funziona. È possibile
applica ad un iframe una classe per non dover riscrivere ogni volta
tutti gli attributi style?

Alessandro Pellizzari

unread,
Mar 28, 2012, 12:35:13 PM3/28/12
to
Il Wed, 28 Mar 2012 13:25:04 +0200, Fulmine ha scritto:

> Io ho un iframe con numerosi attributi style, volevo evitare di scrivere
> gli attributi creando una classe css, ma non funziona. È possibile
> applica ad un iframe una classe per non dover riscrivere ogni volta
> tutti gli attributi style?

Non c'e` molta roba che puoi applicare a un iframe. Giusto dimensioni,
position, forse border.

Cosa stai cercando di fare?

Bye.

Fulmine

unread,
Mar 28, 2012, 4:45:28 PM3/28/12
to
Il 28/03/2012 18.35, Alessandro Pellizzari ha scritto:
> Il Wed, 28 Mar 2012 13:25:04 +0200, Fulmine ha scritto:
>> Io ho un iframe con numerosi attributi style, volevo evitare di scrivere
>> gli attributi creando una classe css, ma non funziona.
[cut]
> Non c'e` molta roba che puoi applicare a un iframe. Giusto dimensioni,
> position, forse border.
>
> Cosa stai cercando di fare?
>
> Bye.


Allora io ho un blog e in fondo ad ogni articolo metto il social plugin
di facebook che è tipo questo:

<iframe
src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.google.it%2F&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35"
scrolling="no" frameborder="0" style="border:none; overflow:hidden;
width:450px; height:35px;" allowTransparency="true"></iframe>

(Sì so che potrei usare html5 o xfbml, ma se fosse possibile vorrei
continuare ad utilizzare questo approccio semplice in iframe)
Non credo importi, comunque l'editor di wordpress lo riordina così:

<iframe style="overflow: hidden; width: 450px; height: 35px;"
src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.google.it%2F&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35"
frameborder="0" scrolling="no" width="320" height="240"></iframe>

Ora per motivi estetici generalmente faccio alcune modifiche cioè in
style modifico l'height da 35px a 40px e aggiungo: "padding: 10px;
border: 1px dashed grey; background-color: #333333;". Tutto ciò funziona
perfettamente per i miei scopi,il risultato finale è così (ovviamente
colori e dimensioni sono diverse, è un esempio):

<iframe style="overflow: hidden; width: 450px; height: 40px; padding:
10px; border: 1px dashed grey; background-color: #333333;"
src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.google.it%2F&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35"
frameborder="0" scrolling="no" width="320" height="240"></iframe>

Quello che vorrei fare è sostituire tutta la parte style con qualcosa di
simile alle class del css, in maniera tale ad esempio da poter
modificare in tutte le pagine il valore height senza dover editare ogni
singola pagina (ovviamente una volta sostituiti tutti gli style). Mi
chiedevo se è possibile.
Ti ringrazio infinitamente per l'interesse :-)

Bye

Alessandro Pellizzari

unread,
Mar 30, 2012, 8:51:26 AM3/30/12
to
Il Wed, 28 Mar 2012 22:45:28 +0200, Fulmine ha scritto:

> <iframe style="overflow: hidden; width: 450px; height: 35px;"
> src="//www.facebook.com/plugins/like.php?href=https%3A%2F%
2Fwww.google.it%
2F&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35"
> frameborder="0" scrolling="no" width="320" height="240"></iframe>
>
> Ora per motivi estetici generalmente faccio alcune modifiche cioè in
> style modifico l'height da 35px a 40px e aggiungo: "padding: 10px;
> border: 1px dashed grey; background-color: #333333;". Tutto ciò funziona
> perfettamente per i miei scopi,il risultato finale è così (ovviamente
> colori e dimensioni sono diverse, è un esempio):

Tieni conto che gli stili piu` vicini al tag hanno il sopravvento su
quelli piu` lontani.

Quindi se tu definisci una class (in un file esterno o anche solo
nell'head), comunque width e height vengono presi dal tag, e diventano
320x240 (almeno in teoria).

Fossi in te wrapperei l'iframe in un div a cui applicherei gli stili che
vuoi, toglierei style dall'iframe e userei width e height del tag:

<div class="fb-iframe">
<iframe width="450" height="35" src="blabla" frameborder="0"
scrolling="no"></iframe>
</div>

Frame e iframe sono brutte bestie, non cercherei di forzare troppo lo
stile.

Bye.

Fulmine

unread,
Mar 30, 2012, 10:05:06 AM3/30/12
to
Il 30/03/2012 14.51, Alessandro Pellizzari ha scritto:

> Quindi se tu definisci una class (in un file esterno o anche solo
> nell'head), comunque width e height vengono presi dal tag, e diventano
> 320x240 (almeno in teoria).

In pratica però funziona, penso che sia legato a come Facebook gestisce
l'iframe, però non ne sono sicuro.

>
> Fossi in te wrapperei l'iframe in un div a cui applicherei gli stili che
> vuoi, toglierei style dall'iframe e userei width e height del tag:
>
> <div class="fb-iframe">
> <iframe width="450" height="35" src="blabla" frameborder="0"
> scrolling="no"></iframe>
> </div>

Ho fatto così anche se ho dovuto faticare un po' di più per centrare
l'iframe (che prima veniva centrato con un semplice text-align: center
nel div precedente. Adesso invece ho (ovviamente nell'originale uso una
class):

<div><div style="...margin:0 auto;"><iframe....

L'unico problema mi si presenta con Internet Explorer 8 già prima non
supportava il colore nell'iframe, però ora si vede una riga colorata
all'esterno dell'iframe che rende tutto spiacevole, c'è un modo per dire
con i css che se c'è IE8 il colore di sfondo deve essere bianco?

Grazie mille per l'aiuto :-)

Fulmine

unread,
Mar 30, 2012, 10:31:47 AM3/30/12
to
Il 30/03/2012 16.05, Fulmine ha scritto:
>
> L'unico problema mi si presenta con Internet Explorer 8 già prima non
> supportava il colore nell'iframe, però ora si vede una riga colorata
> all'esterno dell'iframe che rende tutto spiacevole, c'è un modo per dire
> con i css che se c'è IE8 il colore di sfondo deve essere bianco?

Ho aggiunto:

background-color: #fff\9; /* IE8 e inferiori */

e pare funzioni, ci sono controindicazioni?
Grazie ancora.

Fulmine

unread,
Mar 30, 2012, 10:41:43 AM3/30/12
to
Il 30/03/2012 16.31, Fulmine ha scritto:
> Il 30/03/2012 16.05, Fulmine ha scritto:
>>
>> L'unico problema mi si presenta con Internet Explorer 8 già prima non
>> supportava il colore nell'iframe, però ora si vede una riga colorata
>> all'esterno dell'iframe che rende tutto spiacevole, c'è un modo per dire
>> con i css che se c'è IE8 il colore di sfondo deve essere bianco?
>
> Ho aggiunto:
>
> background-color: #fff\9; /* IE8 e inferiori */
>
> e pare funzioni, ci sono controindicazioni?
> Grazie ancora.
> --

Una l'ho già trovata, ha effetto anche su IE9, qualcuno mi sa dire come
evitare?
0 new messages