Centrare un sito con tutti i browser

Mephiston

Nuovo Utente
28 Set 2009
9
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
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.

Nuovo Utente
29 Set 2009
29
0
0
29
Sant'Antioco (CI)
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
Questa mi sorge nuova
per tutte le cose c'è sempre una prima volta:D
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.

Nuovo Utente
29 Set 2009
29
0
0
29
Sant'Antioco (CI)
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

Nuovo Utente
28 Set 2009
9
0
0
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.

Nuovo Utente
29 Set 2009
29
0
0
29
Sant'Antioco (CI)
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:
Codice:
#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

Nuovo Utente
28 Set 2009
9
0
0
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:
Codice:
#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.

Nuovo Utente
29 Set 2009
29
0
0
29
Sant'Antioco (CI)
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
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

Nuovo Utente
28 Set 2009
9
0
0
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.

Nuovo Utente
29 Set 2009
29
0
0
29
Sant'Antioco (CI)
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?
 
Ultima modifica:

Mephiston

Nuovo Utente
28 Set 2009
9
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
asevenx centrare sito con div HTML e CSS 7
asevenx problema per centrare sito HTML e CSS 5
C centrare pagine sito HTML e CSS 17
Shyson Centrare box css HTML e CSS 2
M [PHP] [HTML] Centrare in verticale un pulsante in una tabella PHP 3
Andrea_Ventura [HTML] Problema centrare elemento orizzontalmente HTML e CSS 9
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
F [HTML] Centrare testo rispetto l'immagine HTML e CSS 1
elpirata [HTML] Non riesco a centrare menu orizzontale HTML e CSS 5
L Problema per centrare titolo PopUp HTML e CSS 5
A centrare iframe con div HTML e CSS 2
ecosito Google Maps: Centrare il marker ed editare il fumetto PHP 1
LuigiDonato Centrare Tabella HTML e CSS 10
N Centrare il testo verticalmente in una div. HTML e CSS 2
R Centrare un DIV per renderlo visibile su qualsiasi monitor HTML e CSS 12
F Centrare slider div HTML e CSS 1
A centrare la pagina con Js Javascript 1
R Come centrare il testo in un paragrafo con sfondo colorato? HTML e CSS 2
L Centrare galleria immagine HTML e CSS 2
Z centrare verticalmente il testo di un button HTML e CSS 1
Marcolotto Centrare un testo (orizzontalmente e verticalmente) in una TextView Android Sviluppo app per Android 1
E Centrare finestra popup Javascript 7
A centrare una tabella HTML e CSS 3
W Centrare immagine con Bootstrap [era: Centrare div con bootstrap] HTML e CSS 2
V centrare un layout a qualunque risoluzione HTML e CSS 3
M Centrare un DIV nel BODY (usando i CSS) HTML e CSS 1
I Centrare un layout al centro della pagina HTML e CSS 8
Nyl Centrare pagina HTML e CSS 7
D Centrare del testo all'interno di un DIV ? HTML e CSS 3
D Centrare menù HTML e CSS 2
Oscar83 Si possono centrare automaticamente i CSS?? HTML e CSS 2
N Non riesco a centrare l'immagine di sfondo Webdesign e Grafica 9
D Centrare Un Pulsante Webdesign e Grafica 12
D Centrare IMG tramite action script Flash 2
simoncino Centrare pagine con Dreamweaver Webdesign e Grafica 1
M Centrare un logo in tutte le risoluzioni.... HTML e CSS 4
nourdine centrare verticalmente un div HTML e CSS 1
F Centrare la pagina HTML e CSS 8
S CREAZIONE DI SITO PER CORSI DI FORMAZIONE WordPress 0
M eliminare padding logo sito HTML e CSS 1
M Come individuare il link sito entrante Google Analytics 0
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
D Progetto sito Discussioni Varie 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 4
R inserire video nel sito HTML e CSS 15
C Come caricare foto da google foto ad un sito? Discussioni Varie 1
G cerco: traffico sito, pubblicità condividente post su pagine gruppi Vendere e Acquistare pubblicita' online 0
R Navigare sito con cURL, mi restituisce errore PHP 0
U traffico verso sito Vendere e Acquistare pubblicita' online 3
M Come gestire aggiornamenti e modifiche di sito live Content Management System (CMS) 0

Discussioni simili