Centrare un sito con tutti i browser

[Mephiston]

Salve a tutti, mi trovo a postare per la prima volta, relativamente a un problema che vedo molto trattato in rete, ma le cui soluzioni proposte non mi consentono di intervenire efficacemente nel mio caso. Ho un problema con un sito che ho realizzato e in rete non trovo una soluzione che lo risolva, il sito è sviluppato in HTML con supporto di un foglio CSS per l'impostazione grafica della pagina; il problema è che lo ho impostato su una larghezza di 1280px per essere centrato nella pagina, solo che quando il sito è visualizzato a risoluzioni inferiori ai 1280px di larghezza, la parte sinistra del div sparisce e la barra di scorrimento non mi consente di raggiungerla tagliando fuori così il menù. Avrei trovato una soluzione che risolve parzialmente il problema se chi visualizza il sito usa Firefox o Safari utilizzando:

left: 0;
margin: auto;

ma con IE non c'è verso di farlo funzionare perché in quel caso la pagina rimane spostata a sinistra. Come posso fare per risolvere il problema?
Il sito in questione è www.icasali.eu e al momento la situazione è impostata con la struttura che prevede:

width: 1280px;
left: 50%;
margin-left: -640px;

Grazie a tutti.

 

[borgo italia]

ciao
io utilizzo questo metodo

html{
margin: 0;
padding: 0;
}

body {
background-color: #333333;
font-family: Arial, Helvetica, sans-serif;
color:#CCCCCC;
margin: 0;
padding: 0;
}
#contenitore{
width:1000px;
height:600px;
position: absolute;
/*background-color: #009900;*/
overflow: hidden;
top: 50%;
left: 50%;
margin-left: -500px;
margin-top:-300px;

}

partendo dalla considerazione che la maggiornaza dei monitor (google analitycs per il mio sito) è delle dimensioni 1024x768 px (50%), 1280x800 (15%) il resto suddiviso per innumerevoli risoluzioni. qundi centro per 1024x768 ed all'interno del div contenitore metto tutti gli altri div che mi servono

 

[Federico B.]

Perchè usare position e queste cose quando puoi benissimo assegnare la larghezza (width) poi dare margin: 0 auto;? Così sara centrato in tutti i browser, anche i più vecchi.

 

[borgo italia]

Perchè usare position e queste cose quando puoi benissimo assegnare la larghezza (width) poi dare margin: 0 auto;?

perchè non sempre funzia

 

[Federico B.]

perchè non sempre funzia

Questa mi sorge nuova

 

[borgo italia]

Questa mi sorge nuova

per tutte le cose c'è sempre una prima volta
comunque, molte tempo fa utilizzavo anche io margin: 0 auto;, poi visto che, come detto talvolta dava problemi, ho adottato il sistema indicato negli articoli css di mrwm, e da allora non ho più avuto problemi

 

[Federico B.]

In 4 anni quasi che lavoro su queste cose non ho mai avuto problemi.

Basti vedere i più grandi e famosi siti: Non usano il sistema postato prima, ma il margin: 0 auto;.

Questo funziona se si aatribuisce una grandezza (width) in px (quindi layout fixed) oppure massimo 99% (quindi layout fluid).

Però ora pensandoci: Tu intendi centrare a centro pagina sia dall'alto che dai lati o solo centrare in base ai lati?
Perchè se è la seconda ha ragione lui, si deve fare così, ma se devi centrare solo in base ai lati il metodo giusto è quello che ti ho scritto.

 

[Mephiston]

In 4 anni quasi che lavoro su queste cose non ho mai avuto problemi.

Basti vedere i più grandi e famosi siti: Non usano il sistema postato prima, ma il margin: 0 auto;.

Questo funziona se si aatribuisce una grandezza (width) in px (quindi layout fixed) oppure massimo 99% (quindi layout fluid).

Però ora pensandoci: Tu intendi centrare a centro pagina sia dall'alto che dai lati o solo centrare in base ai lati?
Perchè se è la seconda ha ragione lui, si deve fare così, ma se devi centrare solo in base ai lati il metodo giusto è quello che ti ho scritto.

Io devo centrare solo dai lati, perché in alto lo ho posizionato già in partenza dal bordo superiore a 0px e dal basso si adegua alla lunghezza del contenuto della pagina. Quindi mi devo muovere in direzione di un ridimensionamento globale del sito in funzione di una larghezza che giri intorno ai 1024px a sto punto.
Grazie delle risposte.

 

[Federico B.]

Allora non ci sono problemi, la soluzione è inutile del position e altro. QUella è la soluzione per centrare sia verticalmente che orzzontalmente.

Per centrare solo orizzontalmente ti basta fare:

#contenitore {
	width: 1000px;
	margin: 0 auto;
}

Stai tranquillo che questo funzionerà in tutti i casi. Se non funziona, è possibile che ci siano div che contengono #contenitore che lo spostano per delle proprietà assegnate.

 

[Mephiston]

Allora non ci sono problemi, la soluzione è inutile del position e altro. QUella è la soluzione per centrare sia verticalmente che orzzontalmente.

Per centrare solo orizzontalmente ti basta fare:

#contenitore {
	width: 1000px;
	margin: 0 auto;
}

Stai tranquillo che questo funzionerà in tutti i casi. Se non funziona, è possibile che ci siano div che contengono #contenitore che lo spostano per delle proprietà assegnate.

Ho provato quella soluzione, ma con IE mi decentra la pagina e la sposta a sinistra, cosa che non succede con gli altri browser.
Inoltre non capisco come sia possibile che a un livello cui ho assegnato larghezza pari a 100% per avere una fascia di colore uniforme in alto, sempre quella rottura di IE me lo faccia terminare una trentina di pixel prima, facendo spuntare in fondo il colore dello sfondo del resto della pagina; questo secondo problemino mi compare per risoluzioni abbastanza più alte dei 1100px con cui ho impostato il container, idee?
Grazie mille della disponibilità intanto.

 

[Federico B.]

Fai prima a postare una pagina di esempio.

Sono tutti problemi che NON si dovrebbero presentare. Ho fatto una pagina in HTML molto ismile a quella che stai dicendo e non ho avuto problemi né con Chrome né con Opera né con Firefox né con IE.

 

[borgo italia]

ciao
leggi
https://www.mrw.it/css/articoli/creare-box-liquido-centrato-verticalmente_704.html

 

[Federico B.]

ciao
leggi
https://www.mrw.it/css/articoli/creare-box-liquido-centrato-verticalmente_704.html

borgo qui si parlo di centrarlo orizzontalmente, non verticalmente.

 

[borgo italia]

ciao
il principio è lo stesso

 

[Federico B.]

http://ddavide.blogspot.com/2007/01/centrare-orizzontalmente-le-pagine-web.html

Sarò io che ho letto SEMPRE la stessa guida per contrare orrizontalmente e sbaglio, oppure non so...

 

[borgo italia]

ciao

Sarò io che ho letto SEMPRE la stessa guida per contrare orrizontalmente e sbaglio, oppure non so...

non so se sbagli, ma io segue il principi:
1. una cosa che funzia non è sbagliata (qundi anche il tuo sistema può essere giusto)
2.quando una cosa funziona generalmente non la cambio
3. nei layout liquidi faccio in modo che chi legge non debba strabuzzare gli occhi come in una partita di tennis per cui al massimo do 1000px circa di grandezza al contenitore [*]



nota [*] quando si usavano ancora le macchine da scrivere era sorta una diatriba (anche sindacale) tra le macchine con la sfera che, scrivendo, correva a dx e sx contro quelle in cui scorreva il carrello che non costringevano a seguire con l'occhio (a dx e sx) quanto veniva scritto

 

[Mephiston]

Devo verificare le pagine che mi avete consigliato e di cui vi ringrazio. Per darvi un'idea del problema, la pagina a cui mi riferisco è www.icasali.eu che sto facendo passare da 1100px di larghezza a 1000px.

 

[Federico B.]

Si, ma se funziona come vorresti, non vuol dire che per forza hai usato gli strumenti che avresti dovuto usare.

Cioè, io posso fare un sito e ottenere quello che voglio però se andiamo a vedere il sorgente è completamente sbagliato la semantica dei tag e altro.

E' anche una questione di praticità avere solo due righe invece che 10 da modificare poi.

Se ho uno script in PHP ed uso 30 righe per fare la stessa cosa che potrei fare con 5 e dico funziona, non ha senso perchè potrei benissimo farlo in 5.
Io conto molto anche dell'ottimizzazione dei file e avere 5/10 righe in più in ogni file sono pochissimi byte scaricati inutilmente e che ne aumentano il peso, anche se non te ne accorgi. Prendi per esempio Google, certo non siamo ai suoi livelli, ma moltiplica un byte per ogni pagina visualizzatam quanto ocnsumo di banda in più avrebbero?

Poi ripeto, ognuno è libero di lavorare come meglio crede, ma prendere la strada più facile credo lo vogliano tutti.

EDIT: Quella pagina si può benissimo fare per esempio tableless, è un layout classico a 3 colonne che si potrebbe realizzare con 2 div flottanti.
Quella pagina è la risposta allì'esempio che ti facevo poco fa:
Lui usa le tabelle sbagliando, anche se ottiene il risultato che vuole. Li non c'è nessun dato da intabellare, ma lo usa solo per "praticità" che poi non esiste, perchè se modifica un <td> deve modificare tutti gli altri nel caso ne aggiunga uno.
Capisci il mio discorso?

 

[Mephiston]

Vi sto seguendo con il discorso, ma non capisco all'atto pratico dove sia il problema che complica così la vita con IE; come mai è l'unico che crea questi problemi? Come posso ovviare, nella parte alta dove c'è scritto I CASALI, a quell'antiestetico effetto presente nella parte a destra della banda arancione?

 

[borgo italia]

ciao

Come posso ovviare, nella parte alta dove c'è scritto I CASALI, a quell'antiestetico effetto presente nella parte a destra della banda arancione?

non capisco quale sia l'effetto antiestetico, io vedo con ie e ff solo la banda arancione con la scritta.
l'unico difetto per me è che con la largezza dello schermo di 1024px si forma la noiosa barra di scorrimento orizzontale