nicht angemeldet
Hallo zusammen!
Ich hab gleich mal zwei Probleme.
Hab mich aufgrund des Hinweises in einer anderen Fragestellung noch mal mit einer Seite auseinandergesetzt und versuche nun das Layout gänzlich mit CSS zu gestalten.
Dabei bin ich aber nun auf ein Problem gestoßen, für das ich einfach keine Lösung weiß. So gut kenn ich mich mit CSS nicht aus und finde deswegen wohl auch nicht die richtigen Begriffe für eine Suche auf diesen Seiten, die mich einer Lösung näher bringen.
Die Grundgestaltung ist folgende.
Ich habe einen fierten Hintergrund. (per Body zugewiesen)
Darauf soll eine Pinnwand als Hintergrundgrafik für den Textteil kommen. Diese Grafik besteht zweckmäßig aus drei Teilen.
Der obere Teil ist fixiert. Darauf steht ein Titel, der immer zu sehen sein soll.
Der mittlere Teil muss sich y-Richtung wiederholen (je nachdem wie lang der Text ist, der darauf erscheint) und somit narürlich scrollbar sein und sich unter den ersten Teil schieben. (bis hier hin, hab ich auch alles schon hinbekommen. das Problem kommt nun.
Direkt an den zweiten Teil soll sich der untere Teil der Pinnwand (daruf stehen ein paar Links), anschließen und somit natürlich auch scrollbar sein.
Eine Höhenangabe für die zweite Grafik fällt aus, denn darauf werden am Ende mindestens 80 verschiedenlange Texte zu lesen sein.
Ok... schwierige Erklärung. Optische Hilfe findet ihr unter: [link http://imobilus.im.funpic.de/]
Der obere Teil ist absichtlich nach rechts verschoben, damit ihr seht, wo der untere Teil der Grafik jetzt steht.
Hier der hmtl Code dazu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>text</title>
<link rel="stylesheet" href="cssformat.css" type="text/css">
</head>
<body>
<div id="fix">
<p class="titel" align="center">
<b>1981 - Die Vergangenheit ist die letzte Hoffnung<br></b>
<b>1. Opfer der Krieges</b>
</p>
</div>
<div id="mitte">
<p class="einrueck" align="left">
Hier kommt der lange Text hin. Der würde das ganze aber unübersichtlich machen. Daher habe ich ihn einfach mal rausgenommen, denn auch bei kurzem Text besteht das Problem. Die untere Grafik klebt ganz oben.
</p>
</div>
<div id="unten">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:135px">
<div align="center">
<a href="../2liste.html#geschichten"><b>Storyauswahl</b></a>
</div>
</td>
<td style="width:135px">
<div align="center">
<a href="Kapitel02.html"><b>nächstes Kapitel</b></a>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
und hier die CSS Datei
body
{background-image:url("images/hintergrund.png");
background-attachment: fixed;}
#fix { z-index:2;
position:fixed;
top:0px;
left:15%;
width:808px;
height:90px;
background-image:url("images/rahmenoben.png") }
#mitte { z-index:1;
position:absolute;
top:90px;
left: 5%;
width:808px;
background-image:url("images/rahmenmitte.png");
background-repeat:repeat-y}
#unten { z-index:1;
position:absolute;
left:5%;
width:808px;
height:90px;
background-image:url("images/rahmenunten.png");
background-repeat:no-repeat}
.titel {font-family: arial, sans-serif; color:#336633; font-size: 1.2em; margin-top:22px;}
.einrueck { margin-left: 45px; margin-right: 55px }
p {font-family helvetica, verdana, arial, sans-serif; color:#336633; font-size: 1em}
a:link { color: #004040; text-decoration:none; }
a:hover { color: #008040; text-decoration:none; }
a:visited { color: #800040; text-decoration:none; }
Ich hoffe ihr könnt mir, einem absoluten CSS-Neuling, helfen.
SChon mal vielen Dank dafür.
mfg
Lia