Vielleicht zuerst Edit anschauen...
Wenn die Seite so dünn ist, dann zentriere sie bitte. Div um alles herum (zum Beispiel mit id="page") :
Code:
....
<body>
<div id="page">
.....
</div>
</body>
....
Css:
#page {
margin: 0 auto;
width: 642px;
}
Zitat von Crash-Override
edit: damn ich haette mal ne fertige Seite durch den Validator schicken sollen statt nur das Template. Ignoriert die Fehler die er ausspuckt, das liegt an den Links nicht am Rest des Codes
...
Das ist aber fehlerhaft, man muss im href-Attribut des a-Elements bei den URL's das wirtschaftliche Und (= & = Ampersand) durch & ersetzen.
Ausserdem sehe ich, dass du einen Editor gebrauchst, der nicht richtige Tabulator-Zeichen einfügt, oder du selber 2 Leerstände machst, naja, trifft nicht ganz meinen Geschmack des Schreibens.
Edit: ich sehe du hast alles absolut positioniert, da muss ich meine Kommentare wohl noch mals korrigieren. ^^
Verwende für den Titel wirklich einen img-Tag und nicht ein div. Das ist nicht Barrierefrei, da du keinen Alternativtext setzten kannst, ausserdem kannst du den Titel als Titel kennzeichnen (einer der Tipps von mitaki, an die ich mich noch gut erinnere ):
Code:
<h1><img src="images/logo.png" width="500" height="100" alt="Patrick's Website" /></h1>
Code:
#middle #content #title
ist normalerweise nicht nötig. (Es gibt die Ausnahme, dass das title in einem anderen Kontext auftreten kann, aber bei wird das kaum auftreten) Da reicht:
Code:
#title
Du darfst die ID ja nur einem Element geben.
Code:
margin-left: 5px;
margin-right: 5px;
margin-top: 20px;
margin-bottom: 5px;
geht auch mit:
Code:
margin: 5px;
margin-top: 20px;
(jaja, müsst jetzt nicht mit margin: 20px 5px 5px 5px; kommen )
Code:
#content_inner
{
border: 1px solid #564b47;
background-color: #e1ddd9;
color: black;
min-height: 240px;
overflow: auto;
text-align: justify;
font-size: 0.8em;
padding: 5px;
}
Für was ist das overflow? Wird doch gar nie passieren oder täusch ich mich da?
Also, so würde ichs ungefähr machen: (» ist nicht perfekt gelöst *räusper* und Achtung, Doctype ist noch abgeändert.)
HTML-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"
xml:lang="en" lang="en" >
<head>
<title> Mainpage - Patrick's Website</title>
<link rel="stylesheet" media="all" title="Standard" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="page" >
<h1> <img src="images/logo.png" width="500" height="100" alt="Patrick's Website" /> </h1>
<div id="sidebar" >
<dl class="sidebox" >
<dt> Navigation</dt>
<dd> » <a href="?lang=en_US& page=mainpage" title="General Stuff" > Mainpage</a> </dd>
<dd> » <a href="?lang=en_US& page=aboutme" title="Take a guess" > About Me</a> </dd>
<dd> » <a href="?lang=en_US& page=myprojects" title="My current and past projects" > My Projects</a> </dd>
<dd> » <a href="?lang=en_US& page=myarticles" title="Stuff I've written and you might find interesting" > My Articles</a> </dd>
<dd> » <a href="?lang=en_US& page=cssguide" title="A nice introduction in CSS" > CSS Guide</a> </dd>
<dd> » <a href="?lang=en_US& page=contact" title="Contact info and legal disclaimer" > Contact</a> </dd>
</dl>
<dl class="sidebox" >
<dt> Links</dt>
<dd> » <a href="http://www.multimediaxis.de/" title="My all-time favourite board" > Multimediaxis</a> </dd>
<dd> » <a href="http://www.enviro-space.com/" title="One of my favourite boards" > Enviro Space</a> </dd>
<dd> » <a href="http://betterworld.vndv.com/" title="My personal Blog" > Better World</a> </dd>
</dl>
<dl class="sidebox" >
<dt> Social Networks</dt>
<dd> » <a href="http://www.new.facebook.com/profile.php?id=1110727888" title="Friend me on Facebook" > Facebook</a> </dd>
<dd> » <a href="http://www.youtube.com/user/PaddyLerner" title="Watch some of my favourite clips on Youtube (I don't really often fav+ stuff, so there's not much to see)" > Youtube</a> </dd>
</dl>
<div class="sidebox" >
<span class="title" > Validator Results</span> <br />
<a href="http://validator.w3.org/check?uri=referer" title="This website is 100% valid XHTML 1.1 Basic" > <img src="images/xhtml.png" alt="XHTML Powered" /> </a>
<a href="http://jigsaw.w3.org/css-validator/" title="This website runs with 100% valid CSS 2.1" > <img src="images/css.png" alt="CSS Powered" /> </a>
</div>
<div class="sidebox" >
<span class="title" > Languages</span> <br />
<a href="?lang=de_DE& page=mainpage" title="Besuche meine Webseite in Deutsch" > <img src="images/flags/de.png" alt="DE" /> </a>
<a href="?lang=en_GB& page=mainpage" title="Visit my website in british english" > <img src="images/flags/gb.png" alt="GB" /> </a>
<a href="?lang=en_US& page=mainpage" title="Visit my website in american english" > <img src="images/flags/us.png" alt="US" /> </a>
</div>
</div>
<div id="content" >
<h2> Mainpage</h2>
<div id="content_inner" >
Howdy!
</div>
</div>
<span id="footer" > Design and Content © 2008 by <a href="mailto://PaddyLerner@gmail.com" > Patrick Lerner</a> - Released under the terms of the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/" > Creative Commons Licence</a> .</span>
</div>
<!--[if IE]>
<div style="position: absolute; top: 0; left: 0; border: 1px black solid; background-color: yellow; width: 99%;" > You are using Internet Explorer. Please consider updating to a better browser (e.g. Firefox, Mozilla or Safari).</div>
<![endif]-->
</body>
</html>
Code:
/* heavy css ahead */
/* images */
img
{
border: 0;
}
* {
padding: 0px;
margin: 0px;
}
/* body */
body {
background-color: #e1ddd9;
}
/* links */
a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
#page {
width: 650px;
margin: 0 auto;
}
#content
{
border: 1px solid #564b47;
width: 500px;
background-color: white;
padding: 5px;
text-align: right;
}
#content h2 {
font-size: 0.9em;
line-height: 1.0em;
padding-bottom: 20px;
}
#content_inner
{
border: 1px solid #564b47;
background-color: #e1ddd9;
color: black;
min-height: 240px;
height: auto !important;
height: 240px;
text-align: justify;
font-size: 0.8em;
padding: 5px;
}
#footer
{
padding: 0 5px;
font-size: 0.65em;
line-height: 1.2em;
}
#sidebar {
float: right;
width: 132px;
}
.sidebox
{
border: 1px solid #564b47;
background-color: white;
padding: 5px;
font-size: 0.75em;
margin-bottom: 5px;
}
.sidebox dt, .sidebox .title
{
font-weight: bold;
}