Centrare un layout al centro della pagina

Izzie · 29 Ott 2009

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 · 29 Ott 2009

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 · 29 Ott 2009

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…

Izzie · 29 Ott 2009

L'ho fatto ma mi centra cosi:
http://www.seriouslygreylovers.com/prova/

borgo italia · 29 Ott 2009

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 · 29 Ott 2009

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?

borgo italia · 29 Ott 2009

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 · 29 Ott 2009

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 · 30 Ott 2009

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>

Cerca

Cerca

Centrare un layout al centro della pagina

Izzie

Nuovo Utente

Izzie

Nuovo Utente

borgo italia

Super Moderatore

Izzie

Nuovo Utente

borgo italia

Super Moderatore

Izzie

Nuovo Utente

borgo italia

Super Moderatore

Izzie

Nuovo Utente

borgo italia

Super Moderatore

Discussioni simili