E' il modo migliore?

**Teskio** · 03-06-2008, 13:30

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;
}

già solo per il fatto di aver letto 4968 caratteri ti ringrazio

**fcaldera** · 03-06-2008, 13:35

leggi il regolamento in evidenza (la parte evidenziata in rosso), grazie.

Discussione: E' il modo migliore?

Strumenti discussione

Ricerca discussione

Visualizza

E' il modo migliore?

Permessi di invio