Riposizionamento modulo banner (RISOLTO)

[geppino]

Salve,
Sto usando un template gratuito per Joomla 3 (heavy equipment) e vorrei risolvere un problema:
Ho inserito un banner nel modulo banner e, quando la risoluzione di un monitor è più alta, rimpicciolendo la pagina, l’immagine visualizzata nel modulo banner si allinea a sinistra e non al centro, come la to il bar superiore che contiene il menu principale.
Questo di d’allineamento è brutto da vedere, come posso posizionare al centro il modulo banner? Nel template non ho trovato nessun dettaglio per questo, neanche nel file template.css
In questo file c’è solo una riga che menziona il banner ma è preceduta da cancelletto, quindi è un commento :-(
Grazie

[giusebos]

c'è sicuramente da fare un aggiustamento al css, ma senza link al sito non so dirti altro.

[geppino]

Perdonami, ho dimenticato di inserirlo nel quesito, il sito è cccmolise.it


Grazie

[giusebos]

domanda: perchè usare il modulo banner per inserire un immagine?
Non è lo strumento giusto.

Poi tu hai il problema non solo per i monitor piccoli, ma anche per quelli molto grandi che ti piazzano l'immagine tutta a sinistra

[geppino]

Infatti, il problema più fastidioso è che con schermi più grandi si allinea a sinistra, scostandosi molto dalla Toolbar superiore.
Come potrei inserire l'immagine? creare un modulo nuovo personalizzato centrato (se è possibile) oppure non usando moduli ed inserendola in altro modo?


Geppino

[giusebos]

usa un modulo personalizzato ed inserisci l'immagine dentro un DIV, poi dai una classe ad essa, tipo bannercentrato e incolli questa regola nel css:

Codice: [Seleziona]

.bannercentrato {
width: 100%;
margin: 0 auto;
}


[geppino]

Ciao giusebos,
credo di aver fatto tutto come mi hai detto (sul sito in locale, prima di modificare il remoto).
- Ho creato un modulo personalizzato, chiamandolo bannercentrato;
- ho inserito l'immagine al centro del campo testo, formattata come DIV;
- ho posizionato il modulo in posizione banner;
- ho inserito la regola nel css.
Ora l'immagine è ben allineata con il menu in alto, come vedrai nell'allegato.
L'unica cosa è che l'immagine non viene "calamitata" ai lati, ma meglio così altrimenti apparirebbe in alcuni casi molto deformata.
Grazie mille ;-)


Geppino

[giusebos]

Ho visto l'immagine, ma in questo caso occorre un link al sito per capire come intervenire.

[geppino]

In che senso? vuoi l'accesso del backend o cosa?
se vuoi te lo invio in privato :-)


Geppino

[giusebos]

intendevo il link al sito, ma ho visto adesso che lo avevi messi qualche post sopra...

[giusebos]

questo

Codice: [Seleziona]


<div style="text-align: center;"><img src="/images/banners/Banner%20testata%201518.png" alt="Banner testata 1518" width="1519" height="313"></div>

diventa

Codice: [Seleziona]

<div class="bannercentrato"><img src="/images/banners/Banner%20testata%201518.png" alt="Banner testata 1518" width="1519" height="313"></div>

correggi il nome dell'immagine in maniera che non abbia spazi; chi mette gli spazi è un nubbio incompetente della peggior specie

[giusebos]

mentre la regola che hai scritto diventa da così

Codice: [Seleziona]

.bannercentrato  {
    width: 100%;
    margin: 0 auto;
}
a così

Codice: [Seleziona]

.bannercentrato img {
    width: 100%;
    margin: 0 auto;
}


[giusebos]

in questo modo avrai sempre il banner largo quanto la viewport orizzontale del browser

[geppino]

Eccomi:
ho provato a modificare il codice del modulo "bannercentrato" in questo modo (modificando il nome dell'immagine in Bannertestata):

<div class="bannercentrato"><img src="/images/banners/Bannertestata.png" alt="Bannertestata" width="1519" height="313" style="display: block; margin-left: auto; margin-right: auto;" /><>

(lo style="display ecc ecc l'ha inserito lui dopo che ho cliccato sull'editor di metterlo al centro altrimenti lo allineava a sinistra.)

Poi ho modificato il template, inserendo img:
.bannercentrato img {
    width: 100%;    margin: 0 auto;
}

ma si vede sempre come prima, non calamitando l'immagine ai lati, forse devo levare le dimensioni fisse nel DIV?

[giusebos]

togli tutto questo che non serve

Codice: [Seleziona]

width="1519" height="313" style="display: block; margin-left: auto; margin-right: auto;"


mi piacerebbe sapere con quale criterio hai inserito display e margin; guarda che non è una partita a dadi dove la fortuna serve!

Quindi non inserire regole buttate li alla ca**o di cane come si dice a Firenze

[geppino]

Ciao giusebos,
hai ragione, non si possono seminare regole alla rinfusa 
me ne sono accorto dopo la modifica che avrei dovuto eliminare le dimensioni date prima, con quell'ultima impostazione ormai non servivano piu', compreso lo stile di allineamento centrale.


Grazie di nuovo 


Geppino

[giusebos]

Non dimenticare di inserire risolto