Centrare un layout al centro della pagina

Izzie

Nuovo Utente
5 Ago 2008
6
0
0
Lo so che ci sono milioni di discussioni sul web, io le ho lette tutte ma non sono ancora riuscita a risolvere il problema. Mi sono sempre semplificata la vita, mettendo l'impaginazione a sinistra, ma questa volta voglio riuscire a centrare il sito e fare in modo che si veda con tutte le risoluzioni.

Il problema è questo. Io ho un foglio di stile + la pagina index (dove inserisco le news) e la pagina left (la colonna di sinistra) che è composta da:
- finestra di facebook
- finestra delle foto
- colonna di sinistra.

Ora, i due "pezzi" di grafica sono:
- Lo sfondo, che ho richiamato nel css nella parte del body che si ripete in y
- La parte superiore con il menu (che per ora non è attivo ma ho creato una mappa) e le due colonne.

Ora il mio problema è centrare TUTTO di modo che sia visualizzabile con diverse risoluzioni. Ieri avevo dato allo sfondo un background position center e la stessa cosa avevo fatto per la "parte superiore" della grafica, che ho inserito come img prima della mappa ma... ovviamente questa solzuione andava bene per me, che ho MAC e una risoluzione di 1680 ma non per altri. Quindi ..la mia domanda è: come posso fare?

Il sito in questione è questo:
www.seriouslygreylovers.com

Grazie a tutti!
 

Izzie

Nuovo Utente
5 Ago 2008
6
0
0
sto facendo delle prove : http://www.seriouslygreylovers.com/prova/

ho inserito nel css
Codice:
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* è buona norma impostare a zero i valori margin e padding dell'elemento body per tenere conto delle diverse impostazioni predefinite dei browser*/
	padding: 0;
	text-align: center; /* centra il contenitore nei browser IE 5*. Il testo viene quindi impostato con l'allineamento predefinito a sinistra nel selettore #container */
     background-image:url("sgl2.png"); background-position:center;


}

#centered {
width: 1024px ;
  margin-left: auto ;
  margin-right: auto ;
 
}

Ma credo che il problema sia sempre il body, non posso dire allo sfondo di essere centrato perchè con altre risoluzioni non si vede.
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
Ciao
Forso mi ripeto, ma per centrare un contenitore io faccio così,

#contenitore{
width:930px;/*imposto la larghezza, mi baso sulla risoluzione più diffusa dei monitor 1024px*/
height:570px; ;/*imposto l’altezza,*/
position: absolute;
/*background-color: #009900; o immagine se diversi da body*/
overflow: hidden;/*o auto se voglio barra di scorrimento*/
top: 50%;
left: 50%;
margin-left: -465px;/*metà della larghezza NEGATIVA*/
margin-top:-290px;/* metà dell’altezza NEGATIVA */
/*
volendo centrare solo in larghezza elimare/commentare
height:570px;
top: 50%;
margin-top:-290px;/* metà dell’altezza NEGATIVA */
*/
}

Per centrare l’immagine del body prova a scrivere
background-image:url("sgl2.png"); background-position:center center;
ed in funzione di quello che vuoi gli dai fixed, repeat…
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
ciao
non so come è fatta la pagina, ma probabilmente hai altri div per le farie "finestre".
tali div devono essere posizionati all'interno del div contenitore.
ci vuole un po' di pazienza certosina, valutare le loro width e hegth e le loro posizioni
generalmente con carta e penna(matita) mi costruisco il layout (misurando e calcolando) e poi visualizzando con IE e FF procedendo agli aggiunstamenti necessari
 

Izzie

Nuovo Utente
5 Ago 2008
6
0
0
essì! nella pagina left ho 3 div per esempio. Ma quindi cosa devo fare esattamente? la somma di che cosa?

P.s. ma per esempio questo sito: http://twilight-central.com/
non mi pare abbia fatto nulla di complicato per centrare il layout.. No?
 
Ultima modifica:

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
ciao
ecco come faccio io, anche se forse esistono sistemi migliori
(ho messo il css interno, ma è meglio un file css esterno)
HTML:
<html>
<head>
<style type="text/css">
<!--
html, body{
	color:#FFFFFF;
	background-color:#000000;
	margin:0px;
	padding:0px;
}
#contenitore{
	width:900px;/*per semplificare i calcoli*/
	height:500px;
	position: absolute;
	background-color:#FFFFFF;
	top: 50%;
	left: 50%;
	margin-left: -465px;
	margin-top:-290px;
	overflow: hidden;
}
#destro{
	background-color:#000000;
	width:400px;
	height:480px;
	position:absolute;
	top:10px;/*10px dal bordo alto contenitore*/
	left:10px;/*10px dal bordo sinistro contenitore*/
	overflow: hidden;
}
#sinistro{
	background-color:#000000;
	width:470px;
	height:480px;
	position:absolute;
	top:10px;
	left:420px;/*left.destro+width.destro+10px*/
	overflow:auto;
}
/*NOTA
ho messo left.destro=distanzaW = 10px
         top.destro = top.sinistr =distanzaH = 10px
1) distanzaW+width.destro+distanzaW+width.sinistro+distanzaW = width.contenitore
2) distanzaH+height.destro+distanzaH = height.contenitore
3) distanzaH+height.sinistro+10px = height.contenitore
4) left.sinistro= distanzaW+width.destro+distanzaW
se metti altri div devi calcolarti le larghezze e le posizioni es.
se vuoi mettere un div sotto il destro devi ricalcolare l'altezza del destro es. 200px
#sotto_destro{
	width:400px;
	height:270px;
	position:absolute;
	top:220px;
	left:10px;
	overflow: hidden;
}
come vedi con somme e sottrazioni puoi posizionare quello che vuoi
*/
-->
</style>
</head>
<body>
<div id="contenitore">
	<div id="destro">bla.......</div>
	<div id="sinistro">bla......</div>
</div>
</body>
</html>
se lo provi dovresti vedere lo sfondo nero con al centro un rettangolo bianco(contenitore) che al suo interno
ha due rattangoli neri separati dal bordo del contenitore e tra loro di 10px.
si potrebbe avere lo stesso effetto con margin e padding, ma alcune vecchie versioni (e forse anche le nuove) di IE e FF
interpretano margin e padding in modo differente con risultati disatrosi.

per quanto riguarda il sito da te citato non so cosa ha fatto in quuanto usa i css esterni

<style type="text/css" media="screen">
@import url( http://twilight-central.com/wp-content/themes/twilight_01/style.css );
se vuoi puoi andare a vedere digitando sul bw l'http://twiligt ecc..., ma copiare spudoratamente non è una bella cosa
Spero di essermi spiegato, comunque sono qui
 

Izzie

Nuovo Utente
5 Ago 2008
6
0
0
si, ma il problema è lo sfondo. Lo sfondo si sposta è il codice all'interno che non sta dove dovrebbe essere. Io ho letto il tuo codice, ma francamente non saprei cosa aggiungere, togliere ecc. quali valori? in base a cosa? Il mio layout è semplicissimo in fondo! E' solo costituito da div.

Non riesco a capire come hai fatto a fare quei calcoli..
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
ciao, ho quardato il codice sorgente della tua home
prima di passare ai css mi sai dire come hai scritto e/o dove hai pescato il codice?
ci sono due sezioni <html></html> due <body></body>, una pagina deve avere(dovrebbe) solo un html/head/body es.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
qui altri meta
<title>titolo</title>
qui i tag <scripit></script> e
<style></stile>
</head>

<body>
qui i contenuti
</body>
</html>
 
Discussioni simili
Autore Titolo Forum Risposte Data
V centrare un layout a qualunque risoluzione HTML e CSS 3
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
asevenx problema per centrare sito HTML e CSS 5
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
asevenx centrare sito con div HTML e CSS 7
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
C centrare pagine sito HTML e CSS 17
M Centrare un DIV nel BODY (usando i CSS) HTML e CSS 1
M Centrare un sito con tutti i browser HTML e CSS 22
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
D Layout di foglio Excel generato con PhpSpreadsheet PHP 5
felino Bug estetici del nuovo layout Supporto Mr.Webmaster 1
A [WordPress] Elementor responsive layout WordPress 8
Andrea_Ventura [HTML] Realizzazione di un layout dinamico di immagini HTML e CSS 4
Andrea_Ventura [HTML] Layout multicolonna (no table) HTML e CSS 2
L border in tabella php + layout stampa PHP 0
crealatualista [PHP] layout pagina con immagine codice a barre PHP 3
utente css esterno con layout HTML e CSS 1
F layout stampa css HTML e CSS 2
G Java & layout Java 2
M Layout e menu mobile HTML e CSS 2
M Problema con il layout HTML e CSS 3

Discussioni simili