[RISOLTO] Problemi ridimensionamento sito su iMac e su altri PC

[adottauncane]

devo però sapere dove devo modificare per far si che l'immagine prenda tutta la pagina (a prescindere da cosa viene coperto poi) e non solo all'esterno o all'interno del "template"

No non molto... Perché l'immagine si veda oltre la parte centrale, deve essere più larga... adesso è 684px di larghezza e viene coperta tutta dal content. Perché spunti a sin e a dx dovrà essere maggiore di 1080px...

Non mi citare, non serve...

[kkk4]

perfetto..ho messo un'immagine piu grande ed effettivamente è spuntata fuori..(ovviamente ora devo trovare uno sfondo adatto per avere un'effetto perfetto..

ora però le domande è:

andando sempre qua: http://www.euronics.it/acquistaonline/video/tv-plasma-e-plasma-3d/c70-cw7032-p1.html
si può notare il fatto della barra superiore, dove c'è il nome del negozio..
ecco quella barra è grande quanto il template, mentre sul mio sito, è piu lungo del template e continua fino al bordo della finestra..
come si può fare per ridurre la barra sia superiore (dove c'è il titolo), e sia inferiore (quella bianca)?
anche sopra dovrebbe stare un po piu giù del bordo pagina superiore

[adottauncane]

Magari stacca un po' la colonna di sinistra e di destra dal margine esterno che stan meglio:

Codice: [Seleziona]

#ja-col2 {
    float: right;
    margin-right: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 18%;
}template.css (riga 1276)

Codice: [Seleziona]

#ja-col1 {
    float: left;
    margin-left: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-top: 10px;
    width: 22.99%;
}template.css (riga 1269)

Poi non è che tu abbia scelto un template semplicissimo da modificare, almeno per quello che vuoi fare tu...

In ogni caso comincia a sostituire con questi i css dove indicato e poi vediamo come perfezionarlo. Metti anche l'immagine 1.jpg di sfondo nella cartella images del template (una copia, non spostare quello che già usi)

Codice: [Seleziona]

#ja-headerwrap {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: #9EA113;
    background-image: none;
    background-position: 0 0;
    color: #CCCCCC;
    height: 80px;
    line-height: normal;
}template.css (riga 923)

Codice: [Seleziona]

.ja-headermask {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: #FFFFFF;
    background-image: none;
    background-position: right top;
    background-repeat: no-repeat;
    display: block;
    height: 80px;
    position: absolute;
    right: -1px;
    top: 0;
    width: 980px;
}template.css (riga 935)

Codice: [Seleziona]

#ja-mainnavwrap {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: #9EA113;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
}ja-sosdmenu.css (riga 66)

[kkk4]

fatto!!!!
tutto ok..

ora come puoi vedere anche tu ci sono 3 problemini:

1)è rimasta una barra sempre sopra...che però ha preso il colore del template...
mentre dovrebbe essere possibilmente tutto un'unica immagine sopra e sotto
anche sul banner inferiore, ha il problema di quello superiore, ovvero che è lungo per tutto lo schermo

2)il margine sopra ancora non si è creato, ma la barra di sopra inizia "dall'inizio dello schermo"

3)la barra del banner ora è tutta bianca con la scritta laterale, approfitto nel chiederti, siccome ho visto che si è modificata, se magari posso inserire proprio là sopra un banner e non la semplice scritta
(praticamente vorrei metterci il banner che attualmente è sulla home page subito sotto, ovviamente modificandolo in lunghezza e adattandolo


PS: quando ti fanno santo a te in questo forum? 

[adottauncane]

Uno lo risolviamo così:
copia e incolla:

Codice: [Seleziona]

#ja-headerwrap {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: #9EA113;
    background-image: url("../images/1.jpg");
    background-position: center top;
    color: #CCCCCC;
    height: 80px;
    line-height: normal;
    margin-top: 0;
}template.css (riga 923)

Codice: [Seleziona]

#ja-mainnavwrap {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: #9EA113;
    background-image: url("../images/1.jpg");
    background-position: center -81px !important;
    background-repeat: repeat;
}ja-sosdmenu.css (riga 66)

Codice: [Seleziona]

#ja-containerwrap2 {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: transparent;
    background-image: url("images/1.jpg");
    background-position: center -154px !important;
    background-repeat: no-repeat;
}style.css (riga 180)

Questo modo di procedere non è propriamente "pulito" perché bisognerebbe che tu creassi almeno due immagini:
la prima, quella intera, va bene così e la seconda, da mettere nelle fascette, più bassa tipo 200px, partendo sempre dal margine superiore... ma intanto per capire il funzionamento procediamo con quella che hai.


Per la terza sì è possibile, se tu fai questa modifica:

Codice: [Seleziona]

.ja-headermask {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: transparent;
    background-image: none;
    background-position: right top;
    background-repeat: no-repeat;
    display: block;
    height: 0;
    position: absolute;
    right: -1px;
    top: 0;
    width: 980px;
}template.css (riga 941)

vedrai ricomparire la rana. Nella cartella del template devi cercare la cartella header. Dentro trovi le tre immagini che ruotano. Puoi sostituire a quelle 3 altre immagini con lo stesso nome e la stessa misura e si posizioneranno lì.

Per il margine superiore le cose si complicano un po' e mi è difficile da qui dirti cosa fare esattamente, considerato che bisognerebbe fare un bel po' di aggiustamenti... Personalmente però non mi piacciono molto i template che hanno un bordo superiore, sprecano solo spazio.

A questo punto, se proprio non volessi rinunciare ad una certa impaginazione, dato che sei appena agli inizi e la personalizzazione di Ja Purity è pure tra le più complicate che potevano capitarti, forse puoi valutare la scelta di un template più simile a quello di esempio. Per contro Ja Purity è fatto davvero bene.

Ah, sono una femminuccia 

[kkk4]

allora, il secondo codice, ovvero quello in style.css
sarebbe questo?: template/ja_purity/style/background/lighter/style.css
cioè quello che abbiamo modificato anche qualche post dietro, per fare altre correzzioni?
ti chiedo questo perche l'ho inserito come hai scritto tu, ma da questa modifica non ho notato cambiamenti nella pagina iniziale, forse non li ho notati io, o forse non dovevo notarli...comunque è giusto per essere sicuri che ho fatto bene

per la barre inferiore invece, non è cambiata...cioè è rimasta lunga per tutto il template

per quando riguarda i bordi superiore ed inferiori, non sono di massima importanza, quindi non è un problema..

purtroppo la scelta di questo template, è dovuta al fatto che non avevo a disposizione altri template carini per un ecommerce, e quelli che ho intravisto sul sito non mi sono piaciuti molto...e quindi mi sono dovuto accontentare di questo qua 
ovviamente cambiando template, andrei a perdere tutte le modifiche fatte vero?

per quando riguarda l'immagine di sopra, l'ho fatto..
solamente che le immagini di default erano 600x80 di misura..
e infatti ora l'immagine ridimensionata ci entra cosi com'è ora..
ma è possibile fare un'immagine unica lunga tutto il template, eliminando il nome del negozio che ho inserito a sinistra?

ps. sei una lei....caspita..allora mi toccherà sposarti a fine discussione 

[kkk4]

per l'immagine di sopra, che va alla barra iniziale, quella che mi consigliavi da 200px..
non si può usare l'immagine dello sfondo e farla continuare perfettamente fino a sopra, senza creare il "gradino" che c'è ora?

[adottauncane]

Le modifiche che hai inserito mi sembra facciano il loro lavoro... adesso l'immagine di sfondo parte dalla cima e scende senza più le barre laterali. Ho visto che hai pagine molto lunghe, quindi qui:

Codice: [Seleziona]

#ja-containerwrap2 {

    background-repeat: no-repeat; metti repeat
}in modo che ti si ripeta per tutta la pagina.

Be no la parte di sotto non l'abbiamo modificata, quindi è rimasta lunga.

E sì puoi mettere una sola immagine per la lunghezza della testata. Prova a farne una lunga 980px. Probabilmente basta sostituirla senza altre modifiche.

Sì, se cambiassi template ovviamente le modifiche fatte non servirebbero più ma avresti il vantaggio di riuscire a modicare sfondi testate ecc. in maniera più semplice e immediata. Ja Purity è un bellissimo template ma certe modifiche sono un po' macchinose e andrebbe scelto se lo si sfrutta appieno così com'è.

Se cambi template naturalmente tutto il lavoro di inserimento articoli, menù ecc. non lo perdi. Dovrai solo adattare le posizioni. Ma poi probabilmente solo del top menù...

In alternativa studiati bene l'uso di Firebug e utilizzalo per ispezionare il css. Prendendo anche spunto dalle modifiche fin qui fatte, dovresti riuscire a completarle.

per l'immagine di sopra, che va alla barra iniziale, quella che mi consigliavi da 200px..
non si può usare l'immagine dello sfondo e farla continuare perfettamente fino a sopra, senza creare il "gradino" che c'è ora?

Io non vedo gradini, ma forse con IE si vedono. (Con FF, Opera, Safari no) Sì, non è una modifica tra le più furbe, in realtà, almeno per la fascia del menù si potrebbe intervenire sul file inex.php per eliminare la parte che esce a lato in modo che si veda direttamente lo sfondo sotto.

[kkk4]

il codice messo sopra, dove lo devo modificare? in quale file?

comunque io per ora vedo un gradino..
ovvero come se ci fossero due sfondi, uno che dura solamente quanto la barra superiore
e uno che parte dalla parte bianca del template fino in fondo
facci caso...magari la scritta trae in inganno
poi rimane il problema della barra inferiore che va fatta a grandezza template e non lunga


ho messo il banner piu lungo, ed effettivamente c'è andato..
solamente che o lo faccio 980x80 e quindi mi viene schiacciatissimo
oppure si dovrebbe modificare la grandezza di quell'area banner e adattare l'area alla mia immagine (e sarebbe ottimo)
in piu, nella sezione parametri del template posso mettere o testo o immagine
se metto immagine mi compare il logo di joomla che si sovrappone al mio
se metto testo, devo inserire almeno un punto, come è ora..perche senza mettere niente nelle caselle, mi appare in automatico lo slogan in inglese di joomla

[kkk4]

help non riesco a risolvere il problema..
mi rimane quel gradino sopra tra il banner e il template..

[adottauncane]

Solo che io non riesco a vederlo e ad aiutarti... e il topic è troppo lungo perché qualcuna abbia voglia di leggerlo tutto... Chiudi questo con [RISOLTO] e aprine uno nuovo, con il problema specifico e il link al sito...

[kkk4]

Solo che io non riesco a vederlo e ad aiutarti... e il topic è troppo lungo perché qualcuna abbia voglia di leggerlo tutto... Chiudi questo con [RISOLTO] e aprine uno nuovo, con il problema specifico e il link al sito...

ok domani con calma lo faccio
nel frattempo mi dici almeno come si può risolvere il problema della barra inferiore?
se ti ricordi abbiamo fatto la barra superiore corta quanto il template
mentre quella inferiore bianca è rimasta a tutto schermo lunga..

altra cosa è il ridimensionamento dell'area banner... è possibile farlo?

[adottauncane]

Vuoi alzarla?

Codice: [Seleziona]

#ja-headerwrap {
.
    height: 150px !important; <--- cambia così (o con la misuara che vuoi)
.
}template.css (riga 923)

Codice: [Seleziona]

#ja-header {
    height: 150px !important; <--- stessa cosa qui
    position: relative;
}template.css (riga 937)

Codice: [Seleziona]

#ja-mainnavwrap {

    background-position: center -150px !important; <---- modifica qui

}ja-sosdmenu.css (riga 66)

Codice: [Seleziona]

#ja-containerwrap2 {

    background-position: center -223px !important; <---- modifica

}style.css (riga 180)

Per la parte sotto perché non provi con Firebug per Firefox? Non è difficile... ormai qualche trucchetto lo sai. 

[kkk4]

allora, gli ultimi due codici da modificare che hai scritto sopra, non hanno modificato niente di VISIBILE...ma presumo che servano a qualcosa
il banner sono riuscito ad aggiustarlo e va bene

ora l'unico problemino è la barra inferiore..

Firebug non lo utilizzo perche sul mio iMac ho Safari e Chrome..quindi non mi va molto di installare anche firefox..
e mi trovo bene a modificare le cose come sto facendo qua grazie a te

[adottauncane]

Se non li avessi modificato sarebbe rimasti tutti schiacciati con la nuova altezza
Installa Firefox, oltretutto è molto usato quindi, anche solo per testare il sito, ti serve. E poi vuoi mettere la soddisfazione del fai-da-te? Tieni conto che da qui non è sempre facile prevedere come si comporteranno le modifiche, perché non puoi navigare il sito, una volta impostate.
E poi mica puoi vivere qui...

[kkk4]

il problema che mi rimane è il gradino sopra..
cioè fino al banner e alla riga del main manu, c'è un'immagine di sfondo
dal template in giu c'è un'altra immagine...sempre la stessa..ma come se fosse sovrapposta a quella sopra..
infatti si notano le scritte laterali che sono sballate in quel punto..

ecco lo screen dal mio pc:

dal link diretto forse si vede meglio
http://img508.imageshack.us/img508/8725/schermata20110104a12462.png


Per firefox oggi pome provo

[kkk4]

ho appena scoperto che su chrome non lo fa -.-

[Sottolerighe]

Se non usi uno strumento che ti consenta di capire come sono disposte, allineate, sovrapposte le div non sarai mai sicuro che si veda bene su altri browser.

Il sistema più semplice per farlo è dare ascolto ad adottauncane, installare firefox con l'estensione firebug.
Vedrai che ti cambierà la vita nella comprensione, realizzazione e sistemazione dei templates,

[adottauncane]

No, e non lo fa su numerosi altri browser...
Prova così:

Codice: [Seleziona]

#ja-mainnavwrap {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: #9EA113;
    background-image: url("../images/1.jpg");
    background-position: center -150px !important;
    background-repeat: repeat;
    height: 74px !important; <---- aggiungi questa riga
}
ja-sosdmenu.css (riga 66)

Non so se basterà per IE. Se non basta non so più aiutarti, ma solo perché non lo so fare io, non perché non si possa...

[kkk4]

No, e non lo fa su numerosi altri browser...
Prova così:

Codice: [Seleziona]

#ja-mainnavwrap {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: #9EA113;
    background-image: url("../images/1.jpg");
    background-position: center -150px !important;
    background-repeat: repeat;
    height: 74px !important; <---- aggiungi questa riga
}
ja-sosdmenu.css (riga 66)

Non so se basterà per IE. Se non basta non so più aiutarti, ma solo perché non lo so fare io, non perché non si possa...

non è cambiato niente purtroppo
su chrome non si nota
su safari, e ora anche su firefox, invece si vede il gradino..



per quando riguarda la parte inferiore lunga..
con firefox ho visto che quella riga è la parte "ja-footerwrap"
però non capisco come ridimensionarla, e da quale file farlo

PS: quello che fa firebox lo fa anche Chrome automaticamente, ovvero ti fa vedere le varie cose della pagina che visiti...
(però magari ha delle funzioni in piu che io ancora non conosco...)