Tumblr - post via flickr, miniature photoset appiccicate

[Membro cancellato 26246]

Ciao a tutti, era un po' che non scrivevo

Vorrei il vostro aiuto riguardo una questione inerente il mio blog http://vividischizzi.tumblr.com/. Come potete vedere l'ultimo post (che è un collegamento a flickr), ha la prima foto in bella mostra, e quelle sotto in miniatura. (ho inserito io il boder-radius).

Vorrei però che quelle in miniatura non fossero attaccate al centro, ma avessero tra loro un po' di spazio, così come sopra e sotto. Come posso fare? Il codice di tumblr è un po' particolare perchè blocchi di codice si riferiscono a definite cose in particolare. Questo sembrerebbe il tipico Photoset, ma come potete vedere quello del terzo post non presenta questo "problema".

Come posso fare? Vi ringrazio in anticipo per la risposta.

 

[criric]

Ciao, puoi provare ad aggiungere un margin-right

#content #post .right img {
    border-radius: 10px;
    max-width: 100%;
    margin-right: 10px;
}

 

[Membro cancellato 26246]

Risolto su firefox, ma se apro il blog con IE le miniature sono una sotto l'altra

Ho altre due questioni, approfitto quindi scrivo qui, se devo aprire altro thread ditemelo:

1: Noto un po' di differenza tra come viene renderizzato il font in firefox ed in internet explorer. Non ho mai avuto questi problemi, in firefox sembra più sottile e distanziato

2: Se aprite il blog con IE, notate che le immagini che sono anche link, come il nome del blog, sono circondate da un bordo.. come posso eliminarlo?

Ancora grazie

 

[Membro cancellato 26246]

Risolto su firefox, ma se apro il blog con IE le miniature sono una sotto l'altra

Ho altre due questioni, approfitto quindi scrivo qui, se devo aprire altro thread ditemelo:

1: Noto un po' di differenza tra come viene renderizzato il font in firefox ed in internet explorer. Non ho mai avuto questi problemi, in firefox sembra più sottile e distanziato

2: Se aprite il blog con IE, notate che le immagini che sono anche link, come il nome del blog, sono circondate da un bordo.. come posso eliminarlo?

Ancora grazie

Aggiungendo 'border: none;' ho eliminato i bordi alle immagini/link nei post, e così si sono anche sistemate ai loro posti, risolvendo anche quel problema. L'unico bordo che ancora non sono riuscito ad eliminare è quello intorno al titolo.

E poi c'è la questione font

 

[MAeSI]

L'unico bordo che ancora non sono riuscito ad eliminare è quello intorno al titolo.

Ciao,

hai già provato ad impostare border:none anche all'immagine del titolo?

#header a.title img {
    border:none;
}

 

[Membro cancellato 26246]

Ciao,

hai già provato ad impostare border:none anche all'immagine del titolo?

#header a.title img {
    border:none;
}

Avevo provato tutte le combinazioni, in effetti l'unica che non ho provato era proprio 'a.title img'. Devo capire meglio come funzionano queste cose :book:

Per quanto riguarda il font invece? Come mai adesso mi sembra un po' sbiadito quando lo osservo con firefox?

 

[Membro cancellato 26246]

Il link del blog è nel primo post. Se volessi centrare le miniature al di sotto dell'immagine più grande? Ora come ora sono allineate a sx con a dx 10 px di spazio. Ho provato aggiungendo un margin-left ma non sono riuscito nel mio intento :hammer:

 

[MAeSI]

Ciao, se vuoi centrare ma non allineare le miniature (con l'attuale struttura), potresti provare aggiungendo questa regola:

#content #post .right div img{
    margin-left: 7px;
}

... e rimuovendo questa proprietà/valore:

#content #post .right img {
    margin-right: 10px;
}

Un'alternativa coi CSS3 (compatibilità browser a parte) potrebbe essere questa:

#content #post .right div a:nth-child(2n) {
    float: right;
}

... sempre rimuovendo questa proprietà/valore:

#content #post .right img {
    margin-right: 10px;
}

 

[Membro cancellato 26246]

Ciao, se vuoi centrare ma non allineare le miniature (con l'attuale struttura), potresti provare aggiungendo questa regola:

#content #post .right div img{
    margin-left: 7px;
}

... e rimuovendo questa proprietà/valore:

#content #post .right img {
    margin-right: 10px;
}

Un'alternativa coi CSS3 (compatibilità browser a parte) potrebbe essere questa:

#content #post .right div a:nth-child(2n) {
    float: right;
}

... sempre rimuovendo questa proprietà/valore:

#content #post .right img {
    margin-right: 10px;
}

Ho risolto seguendo il tuo primo consiglio
Mi spieghi cosa fa esattamente questo codice? In particolare, il codice riguardante quei 7px, perché si trova sotto

.right div img

e non sotto

.right img?

dove appunto prima c'era la regola del margin-right?

 

[Membro cancellato 26246]

L'ultima cosa che ho pubblicato è un set di foto, se volessi diminuire lo spazio tra esse, ora ci sono 10px, come devo fare?

 

[MAeSI]

Mi spieghi cosa fa esattamente questo codice? In particolare, il codice riguardante quei 7px...

Il selettore .right div img seleziona solo le miniature, che sono contenute in un div anonimo, mentre .right img applica la regola di stile a tutte le immagini contenute nel div con classe right, quindi anche all'immagine più grande.

L'ultima cosa che ho pubblicato è un set di foto, se volessi diminuire lo spazio tra esse, ora ci sono 10px, come devo fare?

Se ti riferisci al margine superiore

.photoset .photoset_row {
    margin-top: 5px;
   }

Ciao

 

[Membro cancellato 26246]

Il selettore .right div img seleziona solo le miniature, che sono contenute in un div anonimo, mentre .right img applica la regola di stile a tutte le immagini contenute nel div con classe right, quindi anche all'immagine più grande.



Se ti riferisci al margine superiore

.photoset .photoset_row {
    margin-top: 5px;
   }

Ciao

Grazie per le delucidazioni
Stavolta però con il codice che mi hai fornito non sono riuscito a risolvere, per comodità ti linko un esempio di photoset. Tra le foto ci sono 10px di spazio http://vividischizzi.tumblr.com/post/90106076625/julia-garcia-bene-allora-una-mia-amica-ha

 

[MAeSI]

Ciao,

il photoset è richiamato in un iframe. Devi modificare quel valore nella pagina richiamata.

 

[Membro cancellato 26246]

Ciao,

il photoset è richiamato in un iframe. Devi modificare quel valore nella pagina richiamata.

Quindi come posso fare?

 

[MAeSI]

Non conosco la piattaforma Tumblr ma, se puoi, dovresti modificare il CSS indicato, nell'head di QUESTA "pagina".

 

[Membro cancellato 26246]

Non riesco in alcun modo a ridurre questi 10 px. Qualunque modifica faccio mi fa appiccicare le miniature di flickr una sopra l'altra, mentre io devo operare con i photoset :hammer: