Header adattato a ogni risoluzione

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

Moderatori: Moderatori iobloggo, Moderatori HTML & Grafica

Header adattato a ogni risoluzione

Messaggioda jessiketta90 » 12 ottobre 2011, 10:34

Ho un problema col logo del mio blog. mi servirebbe un codice che lo adatti ad ogni risoluzione di ognuno che apre il blog. perchè in alcuni pc si vede bene, in altri largo o ripetuto e in altri ancora ne vedo mezzo!!!! :(
Grazie!!
jessiketta90
occasionale
occasionale
 
Messaggi: 32
Iscritto il: 12 ottobre 2011, 10:28
Indirizzo blog: http://gossipglam.iobloggo.com/

Re: Logo adattato a ogni risoluzione

Messaggioda Alexiel » 12 ottobre 2011, 13:49

Ciao :)
Quello in alto si chiama header (aggiusto il titolo, così si capisce subito!) e be', non c'è un codice che fa esattamente quello che cerchi.
Le dimensioni dell'header sono fisse (nel tuo caso sono esattamente di 1.231×409 pixel) per cui, se restringi la finestra del browser, mentre il resto del template si adatta, l'header non può farlo. Idem quando allarghi la finestra (o apri il blog da un pc con risoluzione maggiore): o hai un header ripetuto (come nel tuo caso) o, al massimo, avrai l'header centrale con dello spazio vuoto ai lati.
L'unico modo per vederlo sempre per bene sarebbe quello di avere un template dalle dimensioni fisse. In questo caso, però, per risoluzioni basse, ti apparirà la barra di scorrimento anche in basso perché il blog non si vedrà tutto! Il mio blog ne è un tipico esempio.
Se invece vuoi proprio adattare l'immagine a tutti i costi e non ti frega se questa viene distorta, allora eccoti due link che fanno al caso tuo:
http://www.onsitus.it/css-tutorials/sfondo-100-percent/
http://www.weblink.altervista.org/scripting/E10_sfondoatuttoschermo.php
Entrambi però si riferiscono allo sfondo, quindi può darsi che tu debba fare delle modifiche per far sì che l'header venga considerato come sfondo di un div.
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: Header adattato a ogni risoluzione

Messaggioda jessiketta90 » 15 ottobre 2011, 12:11

e per non farlo ripetere? perche ha chi ha risoluzione maggiore lo vede ripetuto
jessiketta90
occasionale
occasionale
 
Messaggi: 32
Iscritto il: 12 ottobre 2011, 10:28
Indirizzo blog: http://gossipglam.iobloggo.com/

Re: Header adattato a ogni risoluzione

Messaggioda Alexiel » 15 ottobre 2011, 13:08

Nell'HTML:
Codice: Seleziona tutto
bgproperties="fixed"

Nel CSS:
Codice: Seleziona tutto
background-repeat: no-repeat;

Una delle due, non sono necessarie entrambe.
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: Header adattato a ogni risoluzione

Messaggioda jessiketta90 » 17 ottobre 2011, 12:27

cortesemente potresti dirmi dove incollarlo :) l'ho messo nel css personale ma si ripete sempre
jessiketta90
occasionale
occasionale
 
Messaggi: 32
Iscritto il: 12 ottobre 2011, 10:28
Indirizzo blog: http://gossipglam.iobloggo.com/

Re: Header adattato a ogni risoluzione

Messaggioda Alexiel » 17 ottobre 2011, 13:02

C'ho messo un po', ho trovato il div in cui va inserito l'header e ho fatto varie prove.
La dicitura esatta è:
Codice: Seleziona tutto
div#pageHeader
{
background-image: url(immagine.jpg);
background-repeat: no-repeat;
background-position: center;
}

Ovviamente, nel css personale.
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: Header adattato a ogni risoluzione

Messaggioda jessiketta90 » 17 ottobre 2011, 21:05

non si ripete piu, ma rimane tutto a sinistra anche col center
jessiketta90
occasionale
occasionale
 
Messaggi: 32
Iscritto il: 12 ottobre 2011, 10:28
Indirizzo blog: http://gossipglam.iobloggo.com/

Re: Header adattato a ogni risoluzione

Messaggioda Alexiel » 17 ottobre 2011, 21:20

Sinceramente non saprei che dirti... a me il codice postato funge perfettamente (ho provato con la creazione di un template a 3 colonne, di quelli semplici, senza aggiungere css esterno).
Purtroppo non sono un'esperta in materia e vado sempre a tentoni per trovare la soluzione :oops:
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: Header adattato a ogni risoluzione

Messaggioda jessiketta90 » 18 ottobre 2011, 11:55

ok grazie comunque
jessiketta90
occasionale
occasionale
 
Messaggi: 32
Iscritto il: 12 ottobre 2011, 10:28
Indirizzo blog: http://gossipglam.iobloggo.com/

Re: Header adattato a ogni risoluzione

Messaggioda Alina » 25 novembre 2011, 23:19

jessiketta90 ha scritto:Ho un problema col logo del mio blog. mi servirebbe un codice che lo adatti ad ogni risoluzione di ognuno che apre il blog. perchè in alcuni pc si vede bene, in altri largo o ripetuto e in altri ancora ne vedo mezzo!!!! :(
Grazie!!



Forse non sarebbe sbagliato di ridurrere la larghezza a 1024 che ormai è standard e cercare di centrarlo.

nel tuo css vendono ripetute le dichiarazioni:

#pageHeader
{
background-image: url(http://i.imgur.com/rPKTi.png);
background-repeat: no-repeat;
background-position: center;
width: 1150px;
height: 400px;
background-image: url(http://i.imgur.com/rPKTi.png));
background-repeat: no-repeat;
background-position: center;
}

non potendo leggere completamente il tuo css non sono in grado di darti altri consigli per migliorare la situazione, i doppioni comunque li toglierei.
Alina
inesperto
inesperto
 
Messaggi: 11
Iscritto il: 15 novembre 2011, 16:19
Indirizzo blog: http://myfeeling.iobloggo.com


Torna a HTML, CSS e Javascript

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite

cron