Tumblr - post via flickr, miniature photoset appiccicate

  • Creatore Discussione Membro cancellato 26246
  • Data di inizio
M

Membro cancellato 26246

Guest
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, puoi provare ad aggiungere un margin-right
Codice:
#content #post .right img {
    border-radius: 10px;
    max-width: 100%;
    margin-right: 10px;
}
 
M

Membro cancellato 26246

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

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 :confused:

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 :)
 
Ultima modifica di un moderatore:
M

Membro cancellato 26246

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

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 :confused:

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
 
M

Membro cancellato 26246

Guest
Ciao,

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

Codice:
#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?
 
M

Membro cancellato 26246

Guest
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

Utente Attivo
13 Apr 2014
71
1
8
quellidelcucuzzolo.blogspot.it
Ciao, se vuoi centrare ma non allineare le miniature (con l'attuale struttura), potresti provare aggiungendo questa regola:

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

... e rimuovendo questa proprietà/valore:

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

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


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

... sempre rimuovendo questa proprietà/valore:

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

Membro cancellato 26246

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

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

... e rimuovendo questa proprietà/valore:

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

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


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

... sempre rimuovendo questa proprietà/valore:

Codice:
#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
Codice:
.right div img
e non sotto
Codice:
.right img?
dove appunto prima c'era la regola del margin-right?
 
M

Membro cancellato 26246

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

MAeSI

Utente Attivo
13 Apr 2014
71
1
8
quellidelcucuzzolo.blogspot.it
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

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

Ciao
 
M

Membro cancellato 26246

Guest
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

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

Ciao
Grazie per le delucidazioni :eek:
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
 
M

Membro cancellato 26246

Guest
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:
 
Discussioni simili
Autore Titolo Forum Risposte Data
PimeWebService Vendo Incrementi Instagram, Facebook, Youtube, Telegram,Musically, Linkedin, Spotify, Tumblr Annunci servizi di Social Media Marketing 0
S Tumblr e tag automatizzati HTML e CSS 1
M Dubbio su risoluzione immagini Tumblr via Flickr HTML e CSS 6
M Problema visualizzazione immagini su blog Tumblr HTML e CSS 2
J Problemi grafici con un html tumblr HTML e CSS 1
C Aiutatemi a modificare il mio blog su Tumblr! HTML e CSS 0
AngiolettoNero impaginazione Tumblr HTML e CSS 0
M Tumblr - Problema con bordi arrotondati delle immagini, nei photoset HTML e CSS 0
M Tumblr - Rendere cliccabili tutte le immagini HTML e CSS 4
J Problema con tema tumblr HTML e CSS 0
B gestione html tumblr HTML e CSS 1
P Netsons + Tumblr DNS Hosting 1
S passare un valore da un form a un file .php con metodo post PHP 4
D [COMPRO/CERCO] GUEST POST o scambio link per sito di Spiritualità ed Esoterismo. Vendere e Acquistare pubblicita' online 0
J [Vendo] Guest post a fini Posizionamento organico Vendere e Acquistare pubblicita' online 0
T [VENDO] Guest Post su siti di Proprietà Offerte e Richieste di scambio links 0
T [VENDO] Guest Post su siti di Proprietà Vendere e Acquistare pubblicita' online 0
A Vendo Guest post Offerte e Richieste di scambio links 0
T [VENDO] Guest Post su siti di Proprietà con IP diversi Offerte e Richieste di scambio links 0
T Segnalazione post PHP 4
P inserire due voci in un titolo post wp WordPress 1
S Variabile in post su altra pagina PHP 2
A recuperare i dati passati nel post PHP 1
R [C#] Scrivere un post in grassetto con Selenium su FB Mobile .NET Framework 0
T Vendo Guest Post Offerte e Richieste di Lavoro e/o Collaborazione 1
G cerco: traffico sito, pubblicità condividente post su pagine gruppi Vendere e Acquistare pubblicita' online 0
R Distribuire uno Script "Facebook Auto Post" PHP 0
D VENDO Guest Post ZA 45 su sito dedicato agli influencer italiani Vendere e Acquistare pubblicita' online 0
D [VENDO] Guest Post/Banner su sito Offerte e Richieste di scambio links 0
R [C#] Automatizzare un inserimento di un Post su un Gruppo Facebook .NET Framework 0
MarcoGrazia Se non sai se riceverai da GET o da POST, puoi verificarlo e far scegliere allo script. Snippet PHP 0
A php metodo post jquery non da mai errore jQuery 4
Fendo59 Passare parametri con metodo POST a una pagina in un frame PHP 0
T [VENDO] Guest post su 16 siti ZA 39 Vendere e Acquistare pubblicita' online 0
F Post [VENDO] articoli in vari siti tematici e testate giornalistiche Vendere e Acquistare pubblicita' online 0
moustache text box + post php con IE si comporta in modo strano PHP 16
L Richieste HTTP get post PHP 1
G Passare path directory in POST PHP 2
S come togliere un post dai risultati di google? Supporto Mr.Webmaster 5
Web93 CAMBIARE TAG POST TITOLO DA H2 A H1 WordPress 1
S (VENDO) Guest post Vendere e Acquistare pubblicita' online 0
WebmasterFioriniAndrea [PHP] Method POST PHP 3
R [COmpro] Guest post settore turismo Vendere e Acquistare pubblicita' online 3
Michelebozzo Cerco guest post Annunci servizi di Social Media Marketing 0
G Inserire "Leggi il resto dell'articolo" con link al post sul sito preso via RSS Email Marketing 0
T [VENDO] Guest Post su un sito di tecnologia iscritto a GNews a 20 euro Vendere e Acquistare pubblicita' online 0
WorldWideWeb Ajax POST con risposta JSON Ajax 2
bobbit6k [CERCO] Post su pagina FB + DEM Vendere e Acquistare pubblicita' online 0
F [VENDO] guest post a partire da 30€ (anche pacchetti a prezzi convenienti) Vendere e Acquistare pubblicita' online 0
M Inviare variabili da menu a tendina a pagina php con post PHP 6

Discussioni simili