Newsgroup: it.comp.www.html
Titolo: (CSS) - Centrare pagina, ridimensionare pagina

Ho iniziato a studiare un po' di xhtml e css, per rifare il mio vecchio
sito, con uno stile più moderno.
Vorrei però che il sito sia visibile almeno ad 800x600, e che quando lo
si vede a 1024x768 sia centrato, con due bande laterali vuote.
Banalmente ho scritto questo codice:
.,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
 "
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="en">
</head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div align="center">
	<div id="logo">LOGO</div>
	<div id="top"> <h1 align="center">TITOLO</h1>
</div> 
</div>
</body> 
</html> 
.,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,. 
con il relativo style.css:
.,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,. 
body {
	/*background: #999933;*/
	background-image : url(background_verde.jpg);
	color : #000000;
	font : 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin-top:20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	padding: 0px;
}
#logo{
	margin-top: 20px;
	margin-right: 10px;
	margin-bottom: 10px:
	margin-left: 10px;
	padding: 0px;
	border: 0px solid #000000;
	background: #999966;
	/*background-image: url(background_verde.jpg);*/
	height: 100px;
	width: 100px;
	text-align: center;
}
#top {
	margin-right: 20px;
	margin-bottom: 10px:
	margin-left: 10px;
	margin-top;20px;
	padding: 0px;
	border: 0px solid #000000;
	background: #999966;
	height: 100px;
	width: 690px;
	}
.,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,. 
Vorrei che #logo e #top fossero allineati, ma non riesco a centrarli.
Sono riuscito ad allineare il tutto #top e #logo, dando delle posizioni assolute, ma
poi non riesco a centrare.
Ho letto tutto il leggibile, guardato le Faq del sito e documenti vari,
ma evidentemente qualcosa mi sfugge. Ho provato anche con 
margin-left[right]: auto
ma anche con questo non ho ottenuto molto.
Il browser che utizzo è l'ultima versione di Mozilla per Linux, ed
ovviamente uso Linux :)
Grazie in anticipo.
-- 
Fabio

 Vorrei che #logo e #top fossero allineati, ma non riesco a centrarli.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="it" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>visuddhi webworker</title>
<style type="text/css">
body {
 font-family: sans-serif;
 font-size: 9pt;
 text-align: center;
 margin: 0px;
 padding: 0px;
 }
#logo{
 text-align: center;
 margin: 10px;
 padding: 0px;
 height: 100px;
 width: 100px;
 border: 0px;
 background-color: #996;
}
#top {
 margin: 10px;
 padding: 0px;
 height: 100px;
 width: 690px;
 border: 0px;
 background-color: #663;
}
</style>
</head>
<body>
<div id="logo">LOGO</div>
<div id="top"><h1>TITOLO</h1></div>
</body>
</html>
visuddhi

>> Vorrei che #logo e #top fossero allineati, ma non riesco
a centrarli.
Grazie per la risposta, ma non č l'effetto che cerco. Forse.
mi sono spiegato male Provo a fare un disegno ascii, se hai.
un font monospace dovresti vedere bene il disegno          .
 -----------------------------------------------
|						|
|  ------    -------------------------		|
| |      |  |                         | 	|
| | LOGO |  |       T I T O L O       |		|
| |      |  |                         |		|
|  ------    -------------------------		|
|						|
|						|
|						|
uesto riesco a farlo se do' delle posizioni assolute, ma
tutto il sito si posiziona a sinistra nel browser se la
risoluzione č a 1024x768. Io vorrei ottenere l'effetto
che ho disegnato in alto, ma centrarlo nella pagina, in
modo che se una persona leggesse la mia pagina con un
browser impostato a 1024x768, riesce a vederla perfettamente
centrata, mentre una persona che legge la pagina a 800x600
ha tutta la finestra occupata dalla pagina.
 -----------------------------------------------
|						|
|      ------    -------------------------	|
|     |      |  |                         | 	|
|     | LOGO |  |       T I T O L O       |	|
|     |      |  |                         |	|
|      ------    -------------------------	|
|						|
|						|
|						|
Piů o meno una cosa del genere.


 Piů o meno una cosa del genere.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="it" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>visuddhi webworker</title>
<style type="text/css">
body {
 text-align: center;
 }
#sito{
 width: 790px;
}
#logo{
 height: 100px;
 width: 100px;
 float: left;
 background-color: #996;
}
#top {
 height: 100px;
 width: 690px;
 float: left;
 background-color: #663;
}
</style>
</head>
<body>
<div id="sito">
<div id="logo">LOGO</div>
<div id="top"><h1>TITOLO</h1></div>
</div>
</body>
</html>
visuddhi

  }
okkio.
text-align: center non viene applicato
ai block-level element (ad esempio i div) ma
solo agli in-line element (questo
e' quello che ho letto piu' volte...
da notare che IE5 canna clamorosamente).
quindi su mozilla i due div "logo" e "top"
risultano allineati a sinistra.
solitamente si utilizza:
#sito {
   margin: 0px auto;
   width: 800px;
}
per centrare un block element (div)
orizzontalmente nella pagina, ma
date un dimensione fissa al div.
vedi:
http://bluerobot.com/web/css/center1.html
http://bluerobot.com/web/css/center2.html
bye
-- 
goldicus1970 AT 
yahoo.it
http://deelan.cjb.net

 }
ho aggiunto questo al codice di vidsushi ed ha funzionato, ma per
esempio se mettevo <h1>Titolo</h1> nella sezione #top, si spostava in
basso.
Io ho fatto una cosa del genere, che è quello che vorrei, ma centrato.
Ho capito come si centra un <div>, ma quando ci provo con più blocchi
divento scemo :(
.,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="it" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>f a b i o  s i r n a  h o m e p a g e  (c) 2 0 0 2  - - - - - - - - - - - </title>
<style type="text/css">
body {
	margin: 10px 10px 10px 10px;
 	text-align: center;
 }
#sito{
 margin: 0px auto;
 width: 790px;
}
#logo{
	position: absolute;
	top: 10px;
	left: 10px;	
	height: 100px;
 	width: 100px; 	
 	background-color: #999966;}
#top {	
	position: absolute;
	top: 10px;
	left: 120px;
	height: 100px;
 	width: 670px;
 	background-color: #999966;}
 
#left { 
	position: absolute;
	top: 120px;
	left: 10px;
	height: 400px;
	width: 100px;
	background: #999966;}
 
#content {
	position: absolute;
	top: 120px;
	left: 120px;
	height: 400px;
	width: 670px;
	background-color: #999966;}
</style>
</head>
<body>
<div id="sito">
<div id="logo">logo</div>
<div id="top">top</div>
<div id="left">left</div>
<div id="content">content</div>
</div>
</body>
</html>
.,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,..,-''-,. 
-- 
Fabio

 </body>
per dei layout di esempio via CSS ti consiglio:
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
guarda questi esempi, individua quello che si avvicina piu'
alla struttura della pagina che vuoi realizzare e modificalo
di conseguenza.
