Immagine della testata centrata con ogni risoluzione

[Ciccio74]

Salve, è la prima volta che scrivo in questo forum per chiedere il vostro aiuto.
Sto impazzendo con i css da quando ho sostituito titolo e descrizione del forum con un'immagine (non il logo, per quello tutto ok).
Il mio problema è far sì che la suddetta immagine rimanga centrata nell'header con ogni risoluzione video ma, dopo innumerevoli tentativi, continua a non fungere.

Lo stile è Prosilver, la ver. 3.0.8, questa è la parte di codice in overall_header.html:

<div id="site-description">
<a href="http://www.terruncielli.it/" target=_blank title="Visita il nostro sito" id="logo">{SITE_LOGO_IMG}</a>
<h1><a href="http://[b]www.pianetafunghi.it[/b]/forum"><img src="http://www.pianetafunghi.it/forum/styles/prosilver/imageset/site_logo.png" alt="Logo Pianetafunghi" title="Home Pianetafunghi" [b]style="width: 596px; height: 111px; left: 50%; margin: -55px 0 0 298px;"[/b]></img></a></h1>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>

Qualcuno può darmi qualche suggerimento utile? Vi ringrazio a priori.




P.S:
Scusate, ho visto che avete giustamente spostato l'argomento... nessuno che possa aiutarmi please?

[Angolo]

Intanto, prova a inserire il codice citato, tra:

Codice: Seleziona tutto

<div align="center">

e

Codice: Seleziona tutto

</div>

Se non viene centrato, togli questa parte:

Codice: Seleziona tutto

left: 50%; margin: -55px 0 0 298px;

[Ciccio74]

Innanzitutto grazie per la risposta...
Ci avevo già provato, così non cambia nulla

Codice: Seleziona tutto

<div align="center">
<a href="http://www.pianetafunghi.it/forum">
<img src="http://www.pianetafunghi.it/forum/styles/prosilver/imageset/site_logo.png" alt="Logo Pianetafunghi" title="Home Pianetafunghi" style="width: 596px; height: 111px; left: 50%; margin: -55px 0 0 298px;"></img>
</a>
</div>

Così invece l'immagine si sposta a sx e si abbassa posizionandosi sull'angolo destro basso del logo

Codice: Seleziona tutto

<div align="center">
<a href="http://www.pianetafunghi.it/forum">
<img src="http://www.pianetafunghi.it/forum/styles/prosilver/imageset/site_logo.png" alt="Logo Pianetafunghi" title="Home Pianetafunghi" style="width: 596px; height: 111px;"></img>
</a>
</div>

Al momento sul forum ho ripristinato il codice senza il div contenitore, quanto meno non sballa anche se non appare ben centrato con ogni risoluzione ... qualche altra idea?




P.S.:
Dimenticavo, se pensate che magari il problema sia altrove, magari nei css, ditemelo e vi posto il codice, grazie.

[Angolo]

Il riferimento css, lo hai escluso dal codice html. Quindi diventa irrilevante a questo punto.
A me però risulta centrato con una risoluzione di 1152x864.
Con quale risoluzione non ti risulterebbe centrato?
Posta uno screen di come lo vedi.

[Ciccio74]

Sorry per i messaggi ripetuti, nel caso specifico si tratta di risoluzione 1366x768, quella del mio portatile, l'immagine risulta un po' spostata verso sinistra, allego lo screen:

[Angolo]

La causa di questa lieve sfasatura, può essere causata dal fatto che il logo è a dimensione fissa. Ed il problema, pare si ponga solo sulle risoluzioni a 16:9, dove in quelle a 4:3 la questione è OK.

Prova a togliere completamente:

Codice: Seleziona tutto

style="width: 596px; height: 111px;

Se non risolvi, dai un valore percentuale, che devi trovare tu attraverso svariati tentativi:

Codice: Seleziona tutto

<div align="center">
<a href="http://www.pianetafunghi.it/forum">
<img src="http://www.pianetafunghi.it/forum/styles/prosilver/imageset/site_logo.png" alt="Logo Pianetafunghi" title="Home Pianetafunghi" style="width: 50%; height: 50%;"></img>
</a>
</div>

Io ho inserito 50%, per cominciare, ma devi trovare tu i valori percentuali ottimali, attraverso diversi tentativi.
L'istruzione del centrare, è stata data, e pare venga eseguita. Quindi è per vie secondarie che si può operare. Potresti aggiungere a style, l'istruzione: text-align: center;

Quindi:

Codice: Seleziona tutto

<div align="center">
<a href="http://www.pianetafunghi.it/forum">
<img src="http://www.pianetafunghi.it/forum/styles/prosilver/imageset/site_logo.png" alt="Logo Pianetafunghi" title="Home Pianetafunghi" style="width: 596px; height: 111px; text-align: center;"></img>
</a>
</div>

Oppure lo aggiungi al codice percentuale.

In breve, devi fare alcune prove.


Potresti anche modificare il valore percentuale del left nativo; ma rischieresti di trovarti con perfetto allineamento con la tua risoluzione... ma non perfetto nelle altre.

Come ultima spiaggia, potresti inserire uno script javascript che inserisca delle spaziature in base alla risoluzione.... ma è davvero necessario?

Valuta la possibilità di dargli tu deliberatamente, un allineamento a sinistra (left), che ha anche il suo senso.


P.S.
Si presume che le prove, tu le faccia in locale.

[Micogian]

Si potrebbe anche dividere in tre parti (in percentuale) la testata con i <div> e dare un margine "auto" all'immagine.

Codice: Seleziona tutto

img.centra_logo {
 display: block;
 margin-left: auto;
 margin-right: auto;
 }

che poi diventa
<img class="centra_logo" src="..." alt="...">[/code]

[Barrnet]

Non sarebbe più semplice impostare una dimensione fissa al forum? ^^

[Micogian]

Non sarebbe più semplice impostare una dimensione fissa al forum? ^^

Condivido.
Nei miei Forum ho combattuto molto per questo e alla fine ho avuto ragione.
Ci sono utenti che preferiscono la pagina a tutto monitor ma io sostengo che specialmente quando nei posts ci sono immagini allegate, la dimensione della pagina deve essere bilanciata, quindi fissa, calcolando lo spazio per la tabella del Testo e dell'allegato e lo spazio da destinare al "profilo".

Con allegati di 800 pixel e spazio per il profilo io credo che una dimensione di 1024 pixel delal pagina sia corretta.
1024 è una risoluzione abbastanza diffusa, risoluzioni minori (800x600) credo siano ormai un ricordo.
Con risoluzioni superiori la pagina può sembrare piccola ma se il punto di riferimento è l'immagine allegata non vedo grossi problemi. Per il testo esiste la funzione di ingrandimento.

[Blues]

Provare a racchiuderlo in un box?

<table width="100%" border="0">
<td align="center">


</table></td></tr>