nicht angemeldet
Lieber Dennis,
ich hab jetzt seine Vorschläge realisiert.
wessen "seine"? *gg*
Anstelle der Div-Tags gibts jetzt nur noch einen P-Tag.
Und die Tabellen habe ich durch zwei Divs in einem großen Div realisiert.
Habe allerdings immer noch Probleme.
Das werden wir jetzt einmal genauer ansehen.
Ich habe Deine Idee aufgegriffen, alles in ein zusammenfassendes <div> zu packen. Das bringt nocheinmal weitere Gestaltungsmöglichkeiten (mache ich auch).
Ich habe weiterhin die Reihenfolge von Content und Navi vertauscht, da der Inhalt meiner Meinung nach (siehe Diskussion mit Laenglich in diesem Thread) im Quelltext _vor_ der Navigation stehen sollte.
Jedoch habe ich eine Sache für mich unzufriedenstellend gelöst: Im Footer ist das Hintergrundbild nicht mit den korrekten Koordinaten eingestellt, da die exakte Position des Footers variieren kann, der Wert im CSS aber nunmal nicht. Sollte der Inhalt länger sein, dann wirkt die Hinterrgundgrafik zu dunkel, da ein "falscher Ausschnitt" des Hintergrundbildes angezeigt wird. Weiß jemand, wie man das schlauer machen kann?
Momentaner Stand der Testseite: test.htm
Du brauchst noch eine Bild-Datei... "content.png". Die bekommst Du hier: content.png
Ach ja: "bmp" ist kein Internetformat, auch wenn es immer mehr Browser unterstützen. Benutze jpg oder png! Für animierte smilies geht momentan nur gif... Also lautet Dein Hintergrundbild nun back.png.
Der Quelltext sieht jetzt so aus:
<!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="de" lang="de">
<head>
<title>Homepage</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
body {
background-image: url('1/back.png');
background-repeat: repeat-x;
color: #7791B0;
font-family: Calibri, Arial, Verdana, Sans-Serif;
font-size: medium;
margin: 0px;
text-align: center;
}
a:link {
color: #7791B0;
}
#main {
background-image: url('1/content.png');
background-repeat: repeat-y;
background-position: 200px;
border-left: 1px #ACD0FC solid;
border-right: 1px #ACD0FC solid;
width: 804px;
margin: 0 auto;
}
#head {
background-image: url('1/head.jpg');
background-position: top;
background-repeat: no-repeat;
height: 283px;
}
#hier {
background-image: url('1/back.png');
background-repeat: repeat-x;
background-position: 0px -285px;
border-top: 1px #acd0fc solid;
border-bottom: 1px #acd0fc solid;
margin: 0px;
padding: 3px 6px 3px 6px;
text-align: left;
}
#content {
float: right;
background-color: #ffffff;
padding: 5px 10px;
text-align: left;
width: 580px;
overflow: auto;
}
#menu {
border-right: 1px #acd0fc solid;
float: left;
width: 200px;
background-repeat: repeat-y;
background-position: 199px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: left;
}
#menu ul ul {
margin-left: 15px;
}
#menu ul li {
padding: 5px 0px 5px 15px;
font-weight: bold;
}
#menu ul ul li {
font-weight: normal;
}
#menu li a {
display: block;
width: 100%;
}
#menu li a:visited {
text-decoration: none;
}
#menu ul li a:link {
text-decoration: none;
}
#menu ul ul li a:link {
text-decoration: underline;
}
#menu .finger {
border: 1px #ACD0FC solid;
border-right: none;
background: #ffffff;
margin-right: -1px;
}
#menu .finger a:link {
color: red;
}
#menu h2 {
margin: 0px;
padding: 0px;
text-align: center;
}
#footer {
clear: both;
border-top: 1px #acd0fc solid;
border-bottom: 1px #acd0fc solid;
margin: 0px;
padding-bottom: 3px;
padding-left: 6px;
padding-right: 6px;
padding-top: 3px;
text-align: center;
background-image: url('1/back.png');
background-position: 0px -600px;
}
</style>
</head>
<body>
<div id="main">
<div id="head"></div>
<p id="hier">Text 1</p>
<div id="content">
<p>Der weiße Teil muss aus Design gründen immer bis zum ende gehen.. sieht sonst halt nicht gut aus. So wie jetzt eben :D</p>
<p>Also auch wenn das Menü mal länger ist und in diesem bereich nur wenig ist, muss es bis unten hin weiß sein! <a href="index2.htm" title="Nächste seite">klick bitte hier</a></p>
</div>
<div id="menu">
<h2>Navigation</h2>
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">Geöffnetes Menü</a>
<ul>
<li><a href="#">Sammlung 1</a></li>
<li class="finger"><a href="#">Das ist der Finger!!!!</a></li>
<li><a href="#">Sammlung 3</a></li>
<li><a href="#">Sammlung 4</a></li>
</ul>
</li>
<li><a href="#">Ungeöffnetes Menü</a></li>
</ul>
</div>
<p id="footer"><a href="#">Impressum</a> | <a href="#">Rechtliche Hinweise</a> | <a href="#">Kontakt</a></p>
</div>
</body>
</html>
Liebe Grüße aus Ellwangen,
Felix Riesterer.
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)