Ich mag die Grünen....
Hier ein Ansatz für dich... So sieht es auf alles Browsern richtig aus.
PHP-Code:
<!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>
<link rel="shortcut icon" href="http://gruene.xdap.de/images/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Die Grünen Holtriem - Startseite</title>
<meta name="Keywords" content="Greeny Template, free website templates, CSS, HTML1" />
<meta name="Description" content="Greeny Template - Download free website templates from templatemo.com1" />
<link href="test/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">
function clearText(field)
{
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
<style>
body { margin: 0; padding: 0; line-height: 1.5em; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; color: #555a4a; background: #a0c73f; }
a:link, a:visited { color: #0683ab; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #0683ab; text-decoration: underline; }
.button_01 a { display: block; width: 102px; height: 23px; padding: 7px 0 0 0; background: url(button.png) no-repeat; color: #333; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; }
.button_01 a:hover { color: #fff; background:url(button_hover.png) no-repeat; }
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.margin_r10 { margin-right: 10px; }
.float_l { float: left; }
.float_r { float: right; }
#header_wrapper { width: 100%; height: 265px; background: url(header.jpg) no-repeat top center; }
#header { position: relative; width: 980px; height: 265px; padding: 0 10px; margin: 0 auto; background: url(header.jpg) no-repeat top center; }
/* site title */
#header #site_title { float: left; width: 120px; padding: 200px 0 0 180px; }
#site_title h1 { margin: 0; padding: 0; }
#site_title h1 a { margin: 0px; padding: 0px; font-size: 30px; color: #ffffff; font-weight: bold; text-decoration: none; }
#site_title h1 a:hover { font-weight: bold; text-decoration: none; }
#site_title h1 a span { display: block; margin-left: 2px; font-size: 14px; color: #416902; font-weight: bold; letter-spacing: 2px; }
/* end of site title */
/* menu */
#menu { float: right; padding-top: 70px; height: 43px; }
#menu ul { margin: 0; padding: 0; list-style: none; }
#menu ul li { padding: 0; margin: 0; display: inline; }
#menu ul li a { float: left; display: block; height: 35px; width: 125px; margin: 0; padding: 8px 0 0 0; text-align: center; font-size: 12px; text-decoration: none; color: #333333; font-weight: bold; outline: none; }
#menu li a:hover, #menu li .current { color: #333333; background: url(menu_hover.png) no-repeat top; }
/* end of menu */
/* Search */
#header #search_box { position: absolute; width: 335px; height: 72px; bottom: 30px; right: 50px; background: url(search.png) }
#search_box form { width: 280px; height: 27px; margin: 0; padding: 25px 0 0 0; }
#searchfield { height: 17px; width: 270px; padding: 4px 5px 6px 5px; color: #fff; font-size: 12px; font-variant: normal; line-height: normal; background: none; border: none; }
/* end of search */
/* content */
#content_wrapper { width: 920px; margin: 0 auto; padding: 30px 40px; background: url(content.jpg) repeat-y; }
#content_wrapper_bottom { width: 1000px; height: 15px; margin: 0 auto; background: url(content_bottom.jpg) no-repeat; }
#content { float: left; width: 685px; }
#content p { text-align: justify; margin-bottom: 10px; }
.content_section { clear: both; width: 100%; }
#content h2 { color: #3a5909; font-size: 24px; padding: 0 0 20px 20px; background: url(header_bg.png) no-repeat bottom left; }
.product_box { float: left; width: 190px; padding-bottom: 10px; border-bottom: 1px dotted #666; margin-bottom: 20px; }
.fl_image { float: left; margin: 3px 15px 5px 0; }
.fr_image { float: right; margin: 3px 15px 5px 0; }
#content .product_box p { padding: 0; margin: 0 0 5px 0; }
#content .product_box a { color: #000000; font-weight: bold; }
#content .em_text { color: #537c11; }
.price { color: #C30; font-size: 14px; font-weight: bold; }
.product_box h3 { background: #63a103; padding: 3px 10px; margin: 0 0 10px 0; color: #ffffff; font-size: 12px; }
.product_box img { width: 180px; height: 100px; border: 5px solid #e6e0ce; margin-bottom: 10px; }
#templatmeo_sidebar { float: right; width: 200px; padding: 0; background: url(sidebar.jpg) repeat-y; }
#templatmeo_sidebar .sidebar_section { margin-bottom: 30px; }
#templatmeo_sidebar .sidebar_section_content { margin:0 0 0 35px; }
#templatmeo_sidebar h2 { color: #3a5909; font-size: 24px; padding: 0 0 20px 20px; background: url(header_bg.png) no-repeat bottom left; }
#templatmeo_sidebar .categories_list { margin: 0; padding: 0; list-style: none; }
#templatmeo_sidebar .categories_list li { padding: 0; margin: 0; }
.categories_list li a { display: block; color: #201f1c; padding: 1px 0 8px 20px; background: url(list.png) center left no-repeat; }
.categories_list li a:hover { color: #537c11; text-decoration: none; }
.sidebar_section label { display: block; margin-bottom: 10px; }
.sidebar_section #input_field { height: 20px; width: 233px; padding: 0 5px; margin-bottom: 10px; color: #000000; font-size: 12px; font-variant: normal; line-height: normal; }
.sidebar_section #submit_btn { float: right; height: 30px; width: 80px; margin: 0px; padding: 3px 0 15px 0; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; outline: none; }
/* end of content */
/* footer */
#footer { width: 980px; margin: 0 auto; padding: 30px 10px; text-align: center; color: #333333; }
#footer a { color: #000000; }
#footer .footer_menu { margin: 0 0 10px 0; padding: 0px; list-style: none; }
.footer_menu li { margin: 0px; padding: 0 20px; display: inline; border-right: 1px solid #000000; }
.footer_menu .last_menu { border: none; }
/* end of footer */
</style>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div id="site_title">
<h1><a href="http://gruene.xdap.de/?show=umfrage" target="_parent"> <img src="Die%20Gr%C3%BCnen%20Holtriem%20-%20Startseite-Dateien/logo.png" onmouseover="this.src='images/logo_1.png'" onmouseout="this.src='images/logo.png'" /> </a></h1>
</div>
<div id="menu">
<ul>
<li><a href="http://gruene.xdap.de/?show=1" class="current">Startseite</a></li>
<li><a href="http://gruene.xdap.de/?show=2">S2</a></li>
<li><a href="http://gruene.xdap.de/?show=3">S3</a></li>
<li><a href="http://gruene.xdap.de/?show=4">Gästebuch</a></li>
<li><a href="http://gruene.xdap.de/?show=5">Kontakt</a></li>
</ul>
</div>
<!-- end of menu -->
<div class="cleaner"></div>
</div>
<!-- end of header -->
</div>
<!-- end of header_wrapper -->
<div id="content_wrapper">
<div id="content">
<div class="content_section">
<h2>Willkommen</h2>
<img src="Die%20Gr%C3%BCnen%20Holtriem%20-%20Startseite-Dateien/image_05.jpg" alt="image" class="fl_image" />
<p>Inhalt!</p>
</div>
</div>
<!-- end of content -->
<div id="templatmeo_sidebar">
<div class="sidebar_section">
<div class="sidebar_section_content">
<ul class="categories_list">
<li><a href="http://gruene.xdap.de/?show=aktuelles"><font size="+1">Aktuelles</font></a></li>
<li><a href="http://gruene.xdap.de/?show=presse"><font size="+1">Presse</font></a></li>
<li><a href="http://gruene.xdap.de/?show=vorstand"><font size="+1">Vorstand</font></a></li>
<li><a href="http://gruene.xdap.de/?show=veranstaltungen"><font size="+1">Veranstaltungen</font></a></li>
</ul>
</div>
<a href="http://gruene.xdap.de/?show=enter_us"><img src="Die%20Gr%C3%BCnen%20Holtriem%20-%20Startseite-Dateien/enter_us.png" onmouseover="this.src='images/enter_us_1.png'" onmouseout="this.src='images/enter_us.png'" /></a><br />
</div>
<div class="cleaner_h30"></div>
</div>
<!-- end of sidebar -->
<div class="cleaner"></div>
</div>
<!-- end of content_wrapper -->
<div id="footer"> <a href="http://www.gruene-wittmund.de/kv_wittmund.html" target="_blank"><b>Kreis WTM</b></a> | <a href="http://www.gruene-wittmund.de/ov_wittmund.html" target="_blank"><b>Wittmund</b></a> | <a href="http://www.gruene-wittmund.de/ov_esens.html" target="_blank"><b>Esens</b></a> | <a href="http://www.gruene-wittmund.de/ov_friedeburg.html" target="_blank"><b>Friedeburg</b></a> <br />
<br />
<a href="http://gruene.xdap.de/?show=login"><b>Login</b></a> | <a href="http://gruene.xdap.de/?show=impressum"><b>Impressum</b></a><br />
Copyright © 2011 <a href="#">gruene.xdap.de</a> <br />
<font size="1"> Scripted by <a href="http://www.xdap.de/" target="_blank">Piet Ammermann</a><br />
<a href="http://www.iwebsitetemplate.com/" target="_parent">Website Template</a> by <a href="http://www.templatemo.com/" target="_parent">Free CSS Templates</a> & <a href="http://www.xdap.de/">Piet Ammermann</a></font> </div>
<!-- end of footer -->
</body>
</html>