Hjälp att förbättra min mall
Jag håller på att göra en mall som jag har tänkt använda till flera layouter som jag sedan gör med css-filer. Denna mall ska vara så optimal som möjligt och är nu ett resultat kan man säga av vad jag lärt mig om webstandard, indentering och seo-optimering från hemsidor och forum på Internet.
Jag skulle vara jätteglad om ni ville kika lite på min mall och säga vad som borde förbättras. T ex. en sak jag själv undrat över är vad div:arna bör heta för att underlätta för sökmotorerna.
Ett problem som jag har just nu t ex. är att jag skulle vilja ha en skugga runt containern. Skuggan tänkte jag göra i bild-format och lägga till som bakgrund. Men det behövs två bilder eftersom footern måste ha en bild med horisontell skugga. Problemet då är att footern ligger innanför containern som jag har padding på. Då skulle man ju kunna tänka att jag la de andra skuggorna i header och main istället för container men då uppstår problemet att jag redan har en bakgrundsbild för header. Och visst, det skulle gå att lösa detta genom att skapa fler divar, men jag vill inte göra undantag för att EN layout ska fungera, det känns inte som den mest logiska lösningen. Tanken är ju att jag bara ska behöva jobba med css-filen när jag gör layouten. Så jag tänkte om ni har något förslag på lösning. Det är mycket möjligt att mina divar är ologiskt placerade för bästa användbarhet.
Här är min mall (index.php):
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title><? if (!empty($title)) { echo $title; } else { echo ''; } ?></title>
<meta name="keywords" content="<? if (!empty($keywords)) { echo $keywords; } else { echo ''; } ?>">
<meta name="description" content="<? if (!empty($description)) { echo $description; } else { echo ''; } ?>">
<meta name="Copyright" content="Copyright (c) 2007">
<meta name="author" content="Website Factory Sweden (www.websitefactory.se)">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<style type="text/css">
<!--
@import url("/_templates/layout2/_css/style.css");
-->
</style>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="/_templates/layout1/_css/ie.css" media="screen">
<![endif]-->
<link rel="shortcut icon" href="/favicon.ico" type="image/ico">
</head>
<body>
<div id="container">
<div id="header">
<!--<div id="logo"><img src="" alt="Logo" /></div> -->
<div id="sitename">Min hemsida</div>
<div id="navbar">
<ul>
<li class="sel"><a href="/">Start</a></li>
<li><a href="/omoss">Om oss</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</div>
<!--end navbar -->
</div>
<!--end header -->
<div id="main">
<!--<div id="bigpic"><img src="/_img/_uploaded/bild1.jpg" alt=""></div> -->
<div id="content">
<div id="module-1-welcome">
<h1>Rubrik 1</h1>
<p>Proin nec magna. Proin nec massa sit amet purus congue molestie. Aliquam erat volutpat. Nulla pellentesque dolor non tellus. Duis vel elit sit amet ipsum vehicula varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse rhoncus. Nunc est. Praesent interdum lectus quis neque. Aliquam eros. Nulla fermentum dolor eget mi. Cras diam sapien, auctor non, malesuada at, tristique id, dui. Aenean congue ante.</p>
<h2>Rubrik 2</h2>
<p>Proin nec magna. Proin nec massa sit amet purus congue molestie. Aliquam erat volutpat. Nulla pellentesque dolor non tellus. Duis vel elit sit amet ipsum vehicula varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
<h3>Rubrik 3</h3>
<p>Nulla pellentesque dolor non tellus. Duis vel elit sit amet ipsum vehicula varius. Vestibulum ante ipsum primis in faucibus orci luctus.</p>
</div>
<!--end module-1-welcome -->
<div id="module-1-news">
<h2>Nyheter</h2>
<ul id="news">
<li><a href="">Proin nec magna nec massa</a></li>
<li><a href="">Sit amet purus congue</a></li>
<li><a href="">Molestie aliquam erat volutpat</a></li>
<li><a href="">Nulla pellentesque dolor</a></li>
<li><a href="">Non tellus duis vel elit sit</a></li>
<li><a href="">Amet ipsum vehicula varius</a></li>
<li><a href="">Primis in faucibus orci luctus</a></li>
<li><a href="">Vestibulum ante ipsum</a></li>
</ul>
</div>
<!--end module-1-news -->
</div>
<!--end content -->
</div>
<!--end main -->
<div id="footer">
<span class="text">Copyright © <?=date('Y');?></span>
</div>
<!--end footer -->
</div>
<!--end container -->
</body>
</html>
