nicht angemeldet
suitAlso hier hab' ich das ganze jetzt 'mal abgespeckt. Ich hoffe, so wird's erkennbar.
Das Layout fällt bereits vorher auseinander (bzw. allgemein ist es fehlerhaft dargestellt - zumindest in Firefox 3 und Opera 9.6) :)
ggf. solltest du nochmal von außen nach innen beginnen das Layout Stück für Stück zusammensetzen.
Verzichte vorerst auf Hintergrundbilder und verzierung und verwende nur Farben - etwa so könnte das aussehen:
<!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>
<title>SELFHTML t=190482</title>
<style type="text/css">
html {
padding: 20px;
margin: 0;
background: #958F7F;
}
body {
margin: 0 auto;
padding: 0;
min-width: 750px;
max-width: 1500px;
background: #E4E4E4;
position: relative;
}
.c1, .c2, .c3, .c6 {
position: absolute;
top: -20px;
left: -20px;
width: 20px;
height: 20px;
background: red;
overflow: hidden;
}
.c2 {
width: 100%;
left: 0;
background: green;
}
.c3 {
left: auto;
right: -20px;
background: yellow;
}
.c6 {
width: 100%;
left: 0;
top: auto;
bottom: -20px;
background: magenta;
}
h1 {
padding: 0;
margin: 0;
background: blue;
}
#menu {
padding: 0;
margin: 0;
border-bottom: 2px solid red;
}
#menu:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
#menu li {
padding: 5px;
margin: 0;
list-style: none;
float: left;
background: cyan;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// <![CDATA[
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('div#content>div:not(:first-child)').css('display', 'none');
jQuery('ul#menu>li').bind(
'click',
function() {
var index = jQuery('li').index(this);
jQuery('div#content>div').css('display', 'none');
jQuery('div#content>div:eq(' + index + ')').css('display', 'block');
}
);
});
// ]]>
</script>
</head>
<body>
<h1>re-ality</h1>
<ul id="menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="content">
<div id="tab1">
<h2>überschrift, tab1</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.</p>
</div>
<div id="tab2">
<h2>überschrift, tab2</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.</p>
<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.</p>
<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.</p>
<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.</p>
<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.</p>
<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.</p>
<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.</p>
<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.</p>
</div>
<div id="tab3">
<h2>überschrift, tab3</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.</p>
<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.</p>
</div>
</div>
<div class="c1">ecke links oben</div>
<div class="c2">kante oben</div>
<div class="c3">rechts oben</div>
<div class="c6">kante unten</div>
</body>
</html>