Mi scuso con fcaldera per il post precedente, spero che il mio errore fosse nel titolo poco esplicativo... altrimenti ripostare il thread cambiando solo il titolo non è servito e sto ancora violando una regola ( :master: )

Con la moltitudine di attributi ci sono almeno 10 modi diversi per fare la stessa cosa, tuttavia uno risulterà sempre migliore degli altri (in termini di semplicità, potenzialità, pulizia...). Sto convertendo un sito flash in html tramite i CSS. Ho creato la prima pagina html con due css (main.css comune a tutte le pagine del sito, e news.css relativo alla sola pagina news.html). Testato su IE7 e FF2 i risultati sono simili (differenze di qualche px su margini), tuttavia prima di continuare con le altre pagine mi chiedevo se ho applicato nel modo migliore le regole css e se ho usato nel modo più adatto il box model per ottenere quel layout...

Perciò sarei grato a chi più esperto potesse dare una rapida occhiata al codice e mi segnalasse qualche errore "semantico" o un modo più efficace di rendere il tutto... Non ho online il file aggiornato, se dovesse servire lo carico e lo linko...

news.html
codice:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>News</title>
<link rel="stylesheet" title="main" href="news.css" type="text/css" />
</head>

<body>
<div id="top"></div>
<div id="container">
	<div id="pager"> news </div>
	<div id="box">
		<div class="new">
			<h1>01/05/2008 - </h1>
			<h2>Primo disco</h2>
			


			Esce l........
			</p>
		</div>
		<div class="new">
			<h1>07/05/2008 - </h1>
			<h2>Nome nuovo</h2>
			


			Il gruppo .......
			</p>
		</div>
		<div class="new">
			<h1>16/05/2008 - </h1>
			<h2>Sito nuovo</h2>
			


			E' on line i.......
			</p>
		</div>
	</div>
	<div id="footer">
		<ul>
			<li id="music_bt">musica
			<li id="news_bt">news
			<li id="band_bt">band
			<li id="foto_bt">foto
			<li id="myspace_bt">myspace
			<li id="contatti_bt">contatti
			<li id="home_bt">home
		[/list]
	</div>
</div>
<div id="bottom"></div>










</body>
</html>


news.css
codice:
@import url(main.css);

#pager {
	padding-top: 59px;
	padding-left: 224px;
	font-size: 24px;
	text-align: left;
	letter-spacing: 7px;
}

#box {
	border: 1px solid white;
	width: 429px;
	height: 357px;
	margin-left: 53px;
}

.new{
	text-align: left;
	margin: 33px 9px 0px 9px;
}

h1 {
	display: inline;
	font-size: 12px;
	letter-spacing: 1px;
}

h2 {
	display: inline;
	font-size: 12px;
	letter-spacing: 1px;
}

p {
	padding-top: 10px;
	line-height: 18px;
}

a.link:link {
	color: #990000;
	text-decoration: underline;
}

a.link:hover {
	color: #990000;
	text-decoration: underline;
	background-color: #FFFFFF;
}

a.link:visited {
	color: #990000;
	text-decoration: underline;
}

main.css
codice:
 /* LAYOUT COMUNE {}*/
*{
	margin: 0px;
	padding: 0px;
}

body {
	font-family: Serif, Times, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	text-align: left;
	color: #CCCCCC;
	background-color: black;
}
/*linea superiore del contenitore*/
#top {
	background-image: url(top.gif);
	width: 850px;
	height: 12px;
	margin: 0px auto;
	margin-top: 15px; 
}
/*linea inferiore del contenitore*/
#bottom{
	background-image: url(down.gif);
	background-repeat: no-repeat;
	width: 850px;
	height: 12px;
	margin: 0px auto;
}
/*contenitore*/
#container {
	background-image: url(background.gif);
	background-repeat: repeat-y;
	width: 850px;
	height: 514px;
	margin: 0px auto;
}
/*menù di navigazione inferiore:*/
#footer {
	background-image: url(footer.gif);
	background-repeat: no-repeat;
	width: 810px;
	height: 36px;
	margin: 21px auto;
	padding-top: 15px;
	text-align: left;
	font-size: 16px;
}

ul{
	margin: 0px;
	list-style-type: none;
}

li{
	margin: 0px;
	display: inline;
}

/*effetti speciali sui link per il menù inferiore*/
a.btn:link {
	color: #CCCCCC;
	text-decoration: none;
}
a.btn:hover {
	color: #990000;
	text-decoration: none;
	background-color: #FFFFFF;
}
a.btn:visited {
	color: #CCCCCC;
	text-decoration: none;
}
a.btn2:link {
	color: #000000;
	text-decoration: none;
}
a.btn2:hover {
	color: #000000;
	text-decoration: none;
}
a.btn2:visited {
	color: #000000;
	text-decoration: none;
}

/*posizione e spaziature bottoni*/
#music_bt{
	margin-left: 20px;
	letter-spacing: 7px;
}
#news_bt{
	margin-left: 15.3px;
	letter-spacing: 13px;
}
#band_bt{
	padding-left: 15px;
	letter-spacing: 14px;
}
#foto_bt{
	padding-left: 15px;
	letter-spacing: 15px;
}
#myspace_bt{
	padding-left: 16px;
	letter-spacing: 4px;
}
#contatti_bt{
	padding-left: 17px;
	letter-spacing: 5px;
}
#home_bt{
	font-size: 17px;
	padding-left: 98px;
	letter-spacing: 6px;
}