Jag har gjort mig en grundmall som jag tänkte använda mig av för att göra flera layouter genom att då bara göra flera css-filer. Alltså samma källkod, olika css-filer, flera layouter.
Problemet kommer nu till en layout där jag vill ha en skugga runt hela containern. Och själva problemet är att skuggan måste vara uppdelad i två bilder eftersom footerns skugga är horisontell. Eftersom footern ligger inuti containern så tänkte jag att jag får lägga den andra skuggan som bakgrund för header + main istället för container så kan jag även ha en egen för footern, men då kommer ju problemet att jag använder en annan bild som bakgrund i headern redan.
Visst det skulle gå genom att ändra i mallen, men jag vill inte göra en ändring/undantag bara för EN layout lixom. Vill att mallen ska vara så optimal som det bara går. Så som den ser ut nu är det resultat av vad jag lärt mig genom att läst och lärt mig på forum om vad som ska finnas med, följa W3C's riktlinjer och hur den ska se ut för att vara så vänlig som möjligt för sökmotorer.
Här är mallen:
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>