Hallo
Hier mal ein Beispiel, schnell überarbeitet. In deiner CSS etwas auf Ordnung achten. p und h1 tauchten an mehreren Stellen auf.
Semantik: hab mal h2 und h3 hinzugefügt.
HTML-Code:
<!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="de" lang="de">
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 25 March 2009), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Schnäppchen-Blog
</title>
<meta name="description" content="Aktuelle Schnäppchen" />
<meta name="language" content="de" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="default.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="head">
<h1>
<img src="images/logo.png" alt="Schnäppchen-Blog" width="332" height="52" />
</h1>
<ul>
<li>
<strong title="Hier befinden Sie sich gerade">Blog</strong>
</li>
<li>
<a href="melden.htm">Melden</a>
</li>
<li>
<a href="links.htm">Links</a>
</li>
<li>
<a href="kontakt.htm">Kontakt</a>
</li>
</ul>
</div>
<div id="main">
<div id="breadcrumb">
<ul>
<li>
<img src="images/breadcrumb_dotted.png" alt="Schnäppchen-Blog" width="9" height="9" />
</li>
<li>
<a href="melden.htm">Kategorien</a>
</li>
<li>
<a href="links.htm">Feedback</a>
</li>
<li>
<a href="kontakt.htm">Suchen</a>
</li>
</ul>
</div>
<div id="content">
<h2>
Willkommen! h2
</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua.
</p>
<p>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div id="sidebar">
<h3>
Sidebar h3
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
</p>
<h3>
Sidebar h3
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
</p>
</div>
</div>
<div id="footer">
<p>
© 2010 Schnäppchen-Blog
</p>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* Zurücksetzen der Innen- und Aussenabstände */
* {
margin: 0;
padding: 0;
}
/*
*Schriftgrösse
*/
body {
font: normal 75%/167% Verdana, Helvetica, sans-serif;
}
/* Farben und Hintergründe */
html, body {
color: #0d374f;
background: #14557a url(images/bg.png) top center repeat-x;
width: 990px;
margin: 0 auto;
}
/*
*@section Links und Anker
*/
a:link {
color: black;
}
a:visited {
color: #202020;
}
a:hover, a:focus {
color: #2caaf2;
}
a:active {
color: #ecd700;
}
/*
*@section Kopfbereich
*/
#head {
position: relative;
}
#head h1 {
margin: auto;
padding: 2.2em;
width: 332px;
color: #2aa5eb;
font-size: 2em;
line-height: 1.1;
}
/*
*@section Hauptmenü
*/
#head ul {
position: absolute;
bottom: 0;
left: 50px;
}
#head ul li {
float: left;
list-style: none;
margin: 0;
}
#head ul a,
#head ul strong {
color: #1e7bb0;
font-size: .8em;
background: transparent url(images/reiter.png);
height: 28px;
width: 70px;
display: table-cell;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
#head ul a:hover,
#head uk a:focus,
#head ul a:active,
#head ul strong {
background: transparent url(images/reiter_aktiv.png);
}
/*
*@section Breadcrumb
*/
#breadcrumb {
color: inherit;
background: white url(images/bg_reiter.png) bottom repeat-x;
padding: 40px 0 0 0;
border-bottom: #bababa solid 1px;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
position: relative;
}
#breadcrumb ul {
position: absolute;
bottom: 10px;
left: 85px;
}
#breadcrumb ul li {
list-style: none;
float: left;
}
#breadcrumb ul a {
color: #505050;
font-size: .8em;
text-decoration: none;
padding: .7em;
}
/*
*@section Hauptbereich
*/
#main {
float: left;
background-color: #f1faff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 0 0 1em #114a6b;
-webkit-box-shadow: 0 0 1em #114a6b;
box-shadow: 0 0 1em #114a6b;
}
#content {
background-color: white;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;
min-height: 600px;
float: left;
width: 612px; /* golden ratio */
}
#content p, #sidebar p {
padding: 10px 35px;
}
#content h2, #sidebar h3 {
padding: 20px 35px 0;
color: #2aa5eb;
font-size: 2em;
line-height: 1.4;
}
#sidebar {
background-color: #f1faff;
width: 378px; /* golden ratio */
float: left;
}
#sidebar h3 {
font-weight: normal;
}
#footer {
clear: both;
text-align: center;
color: #ccc;
height: 40px;
line-height: 40px;
}
Gruß Manfred