Inserire un'immagine centrale nell'header

Se stai imparando a costruirti il tuo template qui trovi consigli e risposte ai tuoi dubbi sull'HTML

Moderatori: Moderatori iobloggo, Moderatori HTML & Grafica

Inserire un'immagine centrale nell'header

Messaggioda viaggiatore83 » 6 febbraio 2012, 1:15

Ciao vorrei sapere su IoBloggo come si fa a inserire quella che su Splinder veniva chiamata immagine di Header. Ho provato usando nel wizard la casella dell'immagine di background ma è così poco gestibile, esce gigantesca e si ripete più volte. Conosco il comando HTML <IMG SRC che mi permette anche di impostare le dimensioni e di centrarla. ma qui dove posso incollare questo comando? o in alternativa guidatemi passo passo perchè non riesco a farlo.
grazie!
viaggiatore83
inesperto
inesperto
 
Messaggi: 23
Iscritto il: 3 febbraio 2012, 15:53
Indirizzo blog: bassweiss.iobloggo.com

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda Alexiel » 6 febbraio 2012, 3:33

Inserisci in "css personale" il seguente codice:
Codice: Seleziona tutto
#intro   
{
   background-image: url('QUI INCOLLI L'URL DELL'IMMAGINE');
}


A questo punto potrai gestirla come vorrai tramite il css ;)

PS: puoi aggiornare il link del tuo blog qui sul forum? Non ci è possibile accedervi perché dice che il blog non esiste!
PPS: sposto nella sezione adatta
Cercare prima di postare
Prima di postare una richiesta d'aiuto, usate la ricerca! Qualcuno prima di voi potrebbe aver già avuto lo stesso problema!
(cit. regolamento: http://forum.iobloggo.com/viewtopic.php?f=1&t=4)

Immagine Immagine
Avatar utente
Alexiel
Moderatore
Moderatore
 
Messaggi: 1777
Iscritto il: 3 agosto 2004, 16:32
Località: Napoli
Indirizzo blog: http://alexiel.iobloggo.com/

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda viaggiatore83 » 6 febbraio 2012, 11:13

ecco la mia piccola creaturina! ^^
Con la sua mastodontica e pesante immagine di header... devo fare qualcosa!

bassweiss.iobloggo.com
viaggiatore83
inesperto
inesperto
 
Messaggi: 23
Iscritto il: 3 febbraio 2012, 15:53
Indirizzo blog: bassweiss.iobloggo.com

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda Alexiel » 6 febbraio 2012, 15:43

Be', cosa fare ora lo sai.
Poi, se per caso tu non te ne intendessi di CSS; ti consiglio le guide di html.it, qui: http://css.html.it/

Se hai ancora problemi, chiedi pure :)
Cercare prima di postare
Prima di postare una richiesta d'aiuto, usate la ricerca! Qualcuno prima di voi potrebbe aver già avuto lo stesso problema!
(cit. regolamento: http://forum.iobloggo.com/viewtopic.php?f=1&t=4)

Immagine Immagine
Avatar utente
Alexiel
Moderatore
Moderatore
 
Messaggi: 1777
Iscritto il: 3 agosto 2004, 16:32
Località: Napoli
Indirizzo blog: http://alexiel.iobloggo.com/

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda viaggiatore83 » 8 febbraio 2012, 15:04

ma una cosa non ho capito bene... è nella casella CCS personale del wizard che posso inserire dei comandi per personalizzare il template, giusto? ora, posso inserire anche comandi in codice htlm lì?
viaggiatore83
inesperto
inesperto
 
Messaggi: 23
Iscritto il: 3 febbraio 2012, 15:53
Indirizzo blog: bassweiss.iobloggo.com

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda Alexiel » 8 febbraio 2012, 15:10

No, si chiama "CSS personale" perché dentro puoi inserirci solo del codice CSS :) E sì, è proprio lì che devi inserire il codice che ti ho scritto.
Cercare prima di postare
Prima di postare una richiesta d'aiuto, usate la ricerca! Qualcuno prima di voi potrebbe aver già avuto lo stesso problema!
(cit. regolamento: http://forum.iobloggo.com/viewtopic.php?f=1&t=4)

Immagine Immagine
Avatar utente
Alexiel
Moderatore
Moderatore
 
Messaggi: 1777
Iscritto il: 3 agosto 2004, 16:32
Località: Napoli
Indirizzo blog: http://alexiel.iobloggo.com/

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda viaggiatore83 » 8 febbraio 2012, 15:37

ok ho inserito un codice un pò più articolato che ho preso da un vecchio post del forum... praticamente l'immagine si è andata a sovrapporre alla barra del testo, allargandola. vorrei un'ultima cosa e poi sono soddisfatto: anzichè allineata a sx, è possibile centrare questa intera "scatola" che contiene il titolo, la descrizione e l'immagine?
viaggiatore83
inesperto
inesperto
 
Messaggi: 23
Iscritto il: 3 febbraio 2012, 15:53
Indirizzo blog: bassweiss.iobloggo.com

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda arunka » 8 febbraio 2012, 16:29

prova a sostituire nel css
Codice: Seleziona tutto
  background-position: center;

con
Codice: Seleziona tutto
  background-position: center !important;

Altrimenti prova ad eliminare
Codice: Seleziona tutto
 width: 770px;
che magari gli fa confusione.
Essere cortesi
Per mia netiquette personale, non fornisco assistenza a chi si rivolge sgarbatamente.
Per ulteriori informazioni leggi qui!

Cercare prima di postare
Prima di postare una richiesta d'aiuto, usate la ricerca! Qualcuno prima di voi potrebbe aver già avuto lo stesso problema!

Presentarsi
Per colpa del molto spam che riceviamo, periodicamente eliminiamo gli utenti registrati senza messaggi. Per evitare che, erroneamente, un account venga cancellato, ti consigliamo di presentarti nella apposita sezione: Presentiamoci!
Avatar utente
arunka
Moderatore
Moderatore
 
Messaggi: 1403
Iscritto il: 7 agosto 2006, 0:15
Indirizzo blog: www.iobloggo.com

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda viaggiatore83 » 9 febbraio 2012, 0:51

non credo che sia quello il comando... ho avuto modo di sperimentare che quella riga si riferisce in qualche modo al "ritaglio" della foto nel suo spazio. Mi spiego meglio. Prima di rimpicciolire l'immagine, essa era troppo grande rispetto ai pixel che avevo specificato, non veniva ridimensionata ma ritagliata. Ora, mi pare di aver capito che il comando in questione "background-position" si riferisce appunto al modo in cui l'immagine viene ritagliata per conformarsi alle dimensioni imposte, quindi interessa per così dire l'interno dell'immagine, e non agisce sul "contenitore", chiamiamolo così, che ospita immagine titolo del blog e descrizione. Infatti anche se provo a inserire "right", di fatto la casella resta allineata a sinisitra. Ci dev'essere un altro comando, che non conosco
viaggiatore83
inesperto
inesperto
 
Messaggi: 23
Iscritto il: 3 febbraio 2012, 15:53
Indirizzo blog: bassweiss.iobloggo.com

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda Alexiel » 9 febbraio 2012, 3:13

Ma queste proprietà le hai date ad #intro? Mi sembra tu le abbia date a #pageHeader
Inoltre hai scritto: "questa informazione credo sia superflua perchè inserita direttamente nel wizard". Elimina quel link dal wizard e tienilo solo nel css. Facci sapere.
Cercare prima di postare
Prima di postare una richiesta d'aiuto, usate la ricerca! Qualcuno prima di voi potrebbe aver già avuto lo stesso problema!
(cit. regolamento: http://forum.iobloggo.com/viewtopic.php?f=1&t=4)

Immagine Immagine
Avatar utente
Alexiel
Moderatore
Moderatore
 
Messaggi: 1777
Iscritto il: 3 agosto 2004, 16:32
Località: Napoli
Indirizzo blog: http://alexiel.iobloggo.com/

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda arunka » 9 febbraio 2012, 9:05

background-posizion è la posizione del background che, come hai impostato due righe più su è definito come l'url della tua immagine.
Quindi, a logica, background-posizion è la posizione della tua immagine. se non funziona può essere che va in conflitto con il codice del wizad, o come dice Alexiel, hai definito male qualcosa.
Quando ho meno fretta ci guarderò.
Essere cortesi
Per mia netiquette personale, non fornisco assistenza a chi si rivolge sgarbatamente.
Per ulteriori informazioni leggi qui!

Cercare prima di postare
Prima di postare una richiesta d'aiuto, usate la ricerca! Qualcuno prima di voi potrebbe aver già avuto lo stesso problema!

Presentarsi
Per colpa del molto spam che riceviamo, periodicamente eliminiamo gli utenti registrati senza messaggi. Per evitare che, erroneamente, un account venga cancellato, ti consigliamo di presentarti nella apposita sezione: Presentiamoci!
Avatar utente
arunka
Moderatore
Moderatore
 
Messaggi: 1403
Iscritto il: 7 agosto 2006, 0:15
Indirizzo blog: www.iobloggo.com

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda viaggiatore83 » 9 febbraio 2012, 13:24

diciamo che "ignorantemente" ho capito il problema. il comando deve essere indirizzato non all'immagine, ma alla casella che contiene il titolo del blog e il sottotitolo. Se riesco a centrare quella, automaticamente verrà centrata anche l'immagine. Tra l'altro viceversa se anche riuscissi a centrare l'immagine ma il titolo del blog restasse allineato a sinistra, sarebbe proprio brutto! :(
viaggiatore83
inesperto
inesperto
 
Messaggi: 23
Iscritto il: 3 febbraio 2012, 15:53
Indirizzo blog: bassweiss.iobloggo.com

Re: Inserire un'immagine centrale prima della colonna dei po

Messaggioda arunka » 9 febbraio 2012, 13:25

Secondo me devi centrare l'immagine E il titolo. Adesso ti rubo l'immagine e faccio delle prove da me.

in più se non toglie quella cosa "<--questo" il css non funzionerà! o lo commenti per bene, o lo toglie! non si può mettere del testo a vanvera! ;)
Essere cortesi
Per mia netiquette personale, non fornisco assistenza a chi si rivolge sgarbatamente.
Per ulteriori informazioni leggi qui!

Cercare prima di postare
Prima di postare una richiesta d'aiuto, usate la ricerca! Qualcuno prima di voi potrebbe aver già avuto lo stesso problema!

Presentarsi
Per colpa del molto spam che riceviamo, periodicamente eliminiamo gli utenti registrati senza messaggi. Per evitare che, erroneamente, un account venga cancellato, ti consigliamo di presentarti nella apposita sezione: Presentiamoci!
Avatar utente
arunka
Moderatore
Moderatore
 
Messaggi: 1403
Iscritto il: 7 agosto 2006, 0:15
Indirizzo blog: www.iobloggo.com

Re: Inserire un'immagine centrale nell'header

Messaggioda arunka » 9 febbraio 2012, 13:41

Allora (ne avevo parlato qua,mi ricordavo infatti viewtopic.php?f=29&t=6305&p=76722&hilit=header+wizard#p76722)
cancella quella cosa che hai scritto e scrivi

Codice: Seleziona tutto
#intro {
background-repeat: no-repeat !important;
background-position: center !important;
}

questo codice serve per mettere centrata l'immagine.

le calssi che invece modificano il titolo e il sottotilo sono
Codice: Seleziona tutto
#pageHeader h1  { }
#pageHeader h1 A {}
#pageHeader h2  {}
#pageHeader h2 A {}


se vuoi il testo centrato copia le righe sopra e dentro alle { } scrivi
Codice: Seleziona tutto
font-align:center !important;


prova e fammi sapere.
Essere cortesi
Per mia netiquette personale, non fornisco assistenza a chi si rivolge sgarbatamente.
Per ulteriori informazioni leggi qui!

Cercare prima di postare
Prima di postare una richiesta d'aiuto, usate la ricerca! Qualcuno prima di voi potrebbe aver già avuto lo stesso problema!

Presentarsi
Per colpa del molto spam che riceviamo, periodicamente eliminiamo gli utenti registrati senza messaggi. Per evitare che, erroneamente, un account venga cancellato, ti consigliamo di presentarti nella apposita sezione: Presentiamoci!
Avatar utente
arunka
Moderatore
Moderatore
 
Messaggi: 1403
Iscritto il: 7 agosto 2006, 0:15
Indirizzo blog: www.iobloggo.com

Re: Inserire un'immagine centrale nell'header

Messaggioda viaggiatore83 » 10 febbraio 2012, 20:02

Guarda non ha funzionato...
L'immagine con la scritta continua ad essere allineata sulla sinistra.
Per ora quello che ho inserito nella casella CCS personale è:

#pageHeader {
width: 770px;
height: 500px;
background-image: url(http://img69.imageshack.us/img69/6774/p ... iccolo.jpg);
background-repeat: no-repeat !important;
background-position: center !important;
}
#pageHeader h1 {font-align:center !important;}
#pageHeader h1 A {font-align:center !important;}
#pageHeader h2 {font-align:center !important;}
#pageHeader h2 A {font-align:center !important;}



Non saprei...
(l'indirizzo del blog è http://bassweiss.iobloggo.com/ )
viaggiatore83
inesperto
inesperto
 
Messaggi: 23
Iscritto il: 3 febbraio 2012, 15:53
Indirizzo blog: bassweiss.iobloggo.com

Prossimo

Torna a HTML, CSS e Javascript

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite