Pagina 1 di 1

Header adattato a ogni risoluzione

MessaggioInviato: 12 ottobre 2011, 10:34
da jessiketta90
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!!

Re: Logo adattato a ogni risoluzione

MessaggioInviato: 12 ottobre 2011, 13:49
da Alexiel
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.

Re: Header adattato a ogni risoluzione

MessaggioInviato: 15 ottobre 2011, 12:11
da jessiketta90
e per non farlo ripetere? perche ha chi ha risoluzione maggiore lo vede ripetuto

Re: Header adattato a ogni risoluzione

MessaggioInviato: 15 ottobre 2011, 13:08
da Alexiel
Nell'HTML:
Codice: Seleziona tutto
bgproperties="fixed"

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

Una delle due, non sono necessarie entrambe.

Re: Header adattato a ogni risoluzione

MessaggioInviato: 17 ottobre 2011, 12:27
da jessiketta90
cortesemente potresti dirmi dove incollarlo :) l'ho messo nel css personale ma si ripete sempre

Re: Header adattato a ogni risoluzione

MessaggioInviato: 17 ottobre 2011, 13:02
da Alexiel
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.

Re: Header adattato a ogni risoluzione

MessaggioInviato: 17 ottobre 2011, 21:05
da jessiketta90
non si ripete piu, ma rimane tutto a sinistra anche col center

Re: Header adattato a ogni risoluzione

MessaggioInviato: 17 ottobre 2011, 21:20
da Alexiel
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:

Re: Header adattato a ogni risoluzione

MessaggioInviato: 18 ottobre 2011, 11:55
da jessiketta90
ok grazie comunque

Re: Header adattato a ogni risoluzione

MessaggioInviato: 25 novembre 2011, 23:19
da Alina
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.