[RISOLTO] Centrare Immagine logo

[liso88]

Buonasera a tutti..
è una mezz'oretta buona che sto imprecando perchè non riesco a centrare l'immagine logo del mio sito..
nell'index.php ho cambiato l'immagine, alzato l'header, ma non mi riesce centrare l'immagine...
dove sta il trucco?


http://www.liso88.altervista.org/


grazie mille
Tommaso

[Fabrizio Fiorita]

La centratura dell'immagine del logo si fa agendo sui fogli di stile ed attribuendo all'immagine o al suo contenitore l'attributo margin:0 auto;
Tra l'altro ho visto che il foglio style.css è molto complesso e scritto in maniera scarsamente intellegibile, per cui non sarà facile andare a capire dove intervenire.
Infine, nel listing HTML risulta che logo è chiamato sia come id sia come class, cosa assolutamente indecifrabile.

[liso88]

Si infatti..... c'ho provato ancora...senza successo...sto cercando un'altro semplice template verde...te hai nulla da consigliarmi?!?
basta che abbia logo e sotto un menù orizzontale e verde!!! sto quasi pensando di rimettere la 1.5 col verde oliva di default!

[adottauncane]

Ciao liso88,
per centrare il logo così com'è basta aggiungere al file css del template, in fondo:

Codice: [Seleziona]

.logo {padding-left: 300px !important;}
Se invece vuoi che sia come l'originale o correggi le misure sull'index.php del template, e poi modifichi il padding della riga sopra in 80px, o aggiungi questa riga:

Codice: [Seleziona]

.logo img {width:769px !important; heigth: 224px !important; padding-left:80px;}

[liso88]

ok, grazie! gentilissimo!!!!!!!

[ilalo]

Se vuoi trovare un sistema rapido su come intervenire....
Scarica Google Chrome clicchi con il destro sul logo fai ispeziona elemento e ti appare il css sulla destra e l' html sulla sinistra, modificandolo la pagina cambia in tempo reale e vedi il logo che si sposta pixel per pixel.


Fatto questo puoi anche esportare il css modificato e ricaricarlo su ftp.


E' molto comodo e impari molto...

[Fabrizio Fiorita]

Scarica Google Chrome clicchi con il destro sul logo fai ispeziona elemento e ti appare il css sulla destra e l' html sulla sinistra, modificandolo la pagina cambia in tempo reale e vedi il logo che si sposta pixel per pixel.

Non solo Chrome, anche Firefox ha l'equivalente (firebug).

Ciao liso88,
per centrare il logo così com'è basta aggiungere al file css del template, in fondo:

Codice: [Seleziona]

.logo {padding-left: 300px !important;}
Se invece vuoi che sia come l'originale o correggi le misure sull'index.php del template, e poi modifichi il padding della riga sopra in 80px, o aggiungi questa riga:

Codice: [Seleziona]

.logo img {width:769px !important; heigth: 224px !important; padding-left:80px;}

Così va bene se tutti hanno la tua risoluzione di schermo, ma basta che sia un po' diversa e salta tutto.
La soluzione è margin-right:auto; margin-left:auto; che sposta tutto esattamente al centro, con tutte le risoluzioni. Oppure, per metterlo in altra posizione, è meglio usare i valori percentuali anziché quelli assoluti.

[adottauncane]

La soluzione è margin-right:auto; margin-left:auto; che sposta tutto esattamente al centro, con tutte le risoluzioni. Oppure, per metterlo in altra posizione, è meglio usare i valori percentuali anziché quelli assoluti.

Veramente non salta nulla, con nessuna risoluzione. Il padding è fisso all'interno del template e non dal margine del browser.
Se fosse come dici allora nessun padding sarebbe uguale con risoluzioni diverse.

[liso88]

ho provato ma non mi piaceva molto il risultato....ho allora deciso di optare per un template più chiaro...
ed ho iniziato a cambiarlo un pò...
http://www.liso88.altervista.org/15/


ma anche qui non mi riesce centrarlo.... queste centrature sono la mia rovina..

[adottauncane]

Correggi così:

Codice: [Seleziona]

div#logo_bg {    height: 100px;    margin-left: 305px; <------
    margin-right: 5px;    width: auto;}template.css (riga 88)

ma anche così non cambierebbe...

Codice: [Seleziona]

div#logo_bg {    height: 100px;    margin-left: 5px;    margin-right: 5px;    padding-left: 300px; <-------
    width: auto;}template.css (riga 88)

[liso88]

Perfetto!!! grazie mille!!!
posso fare una domanda?
ma come mai si "ab"usa di padding e margin invece delle funzioni align?!?
quale è il vantaggio? non si rischia col padding e margin di creare un qualcosa di troppo "rigido" e soggetto a variazioni da un browser all'altro?oltre a dover riadattare i valori per ogni singolo oggetto/imamgine/testo invece che avere qualosa di universale

[adottauncane]

Per essere sicuro che funzioni provala con diversi browser e chiudi e apri la finestra, ingrandisci e diminuisci la visualizzazione. (Cosa che ho già fatto anch'io). Potresti inserire l'immagine come background e allora potresti mette center center e la centrerebbe nello spazio. Ma hai gia un background nel div dell'altro css.

[liso88]

Capito! perfetto!!!!
infatti così funziona bene!
ho centrato il logo, e ridotto la banda nera del banner sotto!
Un'altro dubbio.
Gli articoli in quale posizione vengono messi? perchè mi stanno tutti sulla sinistra e le colonne left e right tutte e 2 a destra..
ho provato anche con
http://www.liso88.altervista.org/15/?tp=1
a vedere se capivo meglio se c'era qualche nome sbagliato, ma non ci ho capito granchè
vorrei centrare gli articoli e spostare la colonna destra, alla destra degli articoli e la sinistra a sx....
se tolgo l'attributo float left a "maincolumn" si sovrappongono! non capisco quale è il contenitore da spostare!!


Scusate ma sono alle prime armi!!


Tommaso

[adottauncane]

Il template è fatto così... In alcuni template è possibile scegliere se posizionare le colone una a sinistra e una a destra dal backend ma questo non credo visto che anche lo sfondo è grigio a destra per contenere due colonne di moduli. Comunque prova a vedere se c'è questa opzione cliccando sul nome del template.0
Dovresti lavorare sull'index.php e sospare le posizioni e poi correggere il background.

[liso88]

Ok, grazie mille, ho fatto come mi hai detto te, ho cambiato da index.php l'ordinamento delle colonne!! e in realtà quei 2 colori era dato da una immagine di sfondo (alta un pixel) he si replicava..per questo non riuscivo a cambiarla...io cercavo i colori nel CSS!!!
direi RISOLTO alla grande ;-)