Du bör alltid använda en CSS reset,
http://meyerweb.com/eric/thoughts/2007/05/...reset-reloaded/
Det underlättar väldigt mycket och det blir någorlunda lättare att få det att fungera i alla webbläsare
I Coda (program) så har jag två klipp som jag alltid brukar använda när jag startar ett nytt projekt, något jag kallar "XHTML+CSS structure" som ser ut såhär:
Kod:
<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html
Sedan skapar jag style.css och börjar alltid med klassen .clear som har attributen "clear: both;".
Den används när du har flytande element och vill att det ska "fixas till". Exempel:
Kod:
<div id="main">
<div id="content">Innehåll</div>
<div id="sidebar">Sidebar</div>
<div class="clear"></div>
</div>
Och CSS:
Kod:
#content
{width: 700px; float: left;}
#sidebar
{width: 200px; float: left;}
Så får du en två kolumns layout.
Angående navigeringen så ska du göra precis som martine sa, jag antar att du har bilder, och då bör det se ut såhär:
Kod:
<ul id="menu">
<li class="start"><a href="http://something.com">Titel för första</a></li>
<li class="about"><a href="http://example.com">Titel för andra</a></li>
</ul>
Kod:
#menu li
{display: inline;}
#menu li a
{border-left: 1px solid black; height: 50px; width: 100px; display: block; text-indent: -10000px;}
#menu li a:first-child
{border-left: 0px;}
#menu .start a
{background: url(url till start alternativets bild) no-repeat;}
#menu .about a
{background: url(url till about alternativets bild) no-repeat;}
Och ska du ha hover på något alternativ, exempel ".start" så...
Kod:
#menu .start a:hover
{background: url(url till hover bild..) no-repeat;}
osv..
Hoppas att något var till hjälp
