nicht angemeldet
Hallo zusammen!
Ich arbeite gerade daran meiner Homepage ein neues Aussehen zu verpassen und bin nun auf ein kleines Problem gestoßen.
Der Anschaulichkeit halber http://imobilus.im.funpic.de/
Es geht mir um den Teil der Homepage der wie eine Pinnwand aussehen soll bzw. eine Pergamentwand.
Diese Grafik ist eigentlich dreigeteilt und in zwei Tabellen als Hintergrundbild definiert. Einmal eine für die Überschrift und dann eine zweizeilige für den Text und die Links.
Ich möchte erreichen, dass die erste Tabelle, also die mit der Überschrift, immer zu sehen ist. Der Text soll also unter der Überschrift verschwinden, wenn man runter scrollt.
Grundsätzlich hab ich das mit dem fixieren schon hinbekommen. Selfhtml hatte da man ein Beispiel das ich verstanden habe. http://de.selfhtml.org/css/eigenschaften/positionierung.htm# (Ist das erste Beipüsiel)
Allerdings geht das mit dem scrollen nicht so wie im Beispiel. Der Text schiebt sich über die Überschrift.
Und dann sollen die Tabellen zentriert dargestellt werden, damit es für höhere Auflösungen als 1024x786 immer noch gut aussieht. (hatte es mit margin-left:auto und magrin-right:auto versucht... ging aber nicht.
Wie erreiche ich das sonst noch?
Muss ich doch ohne Tabellen arbeiten? (Meine bisherigen Versuche in diese Richtung waren absolut erfolglos. Egal wo ich mir dazu Tipps geholt habe. Entweder wurde es gekachelt, überlappend dargestellt oder da war nichts zu sehen. *seufz*)
Ich hoffe jemand kann mir helfen. Ich komm mir irgendwie ziemlich böld vor, wei lich das was auf den verschiedenen seiten (selfhtml und co) steht, nicht wirklich kapiere.
Vielen Dank schon mal im voraus.
Lia
Hier noch mein Quellcode für die Dateien.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>text</title>
<meta name="author" content="mein realer Name">
<meta name="description" content="Alle von Imoblius verfassten FanFictions die die selbst erdachten Abenteuer des Zauberlehrlings Harry Potter und dessen Freunde beschreiben. ">
<meta name="author" content="mein realer Name">
<meta name="keywords" content="Harry,Jame,Lily,Potter,Evans,Remus,Lupin,Sirius,Black,Hogwarts,Slash,Lemon,FanFictions,FanFiction,FanFic,Imobilus,Rettung,Schicksal,Magier,Vergangenheit,1981,Sieg,Prinzessin,Dunkelheit,Lord,Voldemort,Hermine,Granger,Ron,Ginny,Weasley,Dumbledore">
<link rel="stylesheet" href="cssformat.css" type="text/css">
</head>
<body>
<div id="fix">
<table border="1" cellpadding="0" cellspacing="0" width="808px">
<tr height="107px" style="valign:middle">
<td>
<div align="center">
<p class="titel">
<b>1981 - Die Vergangenheit ist die letzte Hoffnung<br></b>
<b>1. Opfer der Krieges</b>
</p>
</div>
</td>
</tr>
</table>
</div>
<div id="mitte">
<table border="1" cellpadding="0" cellspacing="0" width="808px">
<tr>
<td background="images/rahmenmitte.png">
<p class="einrueck" align="left">
der ganze Text
</p>
</td>
</tr>
<tr height="107px">
<td background="images/rahmenunten.png" valign="middle">
<div align="center">
<table table border="1" cellpadding="0" cellspacing="0" style="height:25px">
<tr>
<td style="width:135px">
<div align="center">
<a href="kapitel18.html"><b>vorheriges Kapitel</b></a>
</div>
</td>
<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="Kapitel20.html"><b>nächstes Kapitel</b></a>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS:
body{
background-image:url("images/hintergrund.png");
background-attachment: fixed;
}
#fix { position:fixed; top:0px; left: 15px; width:808px; height:107px; background-image:url("images/rahmenoben.png") }
#mitte { position:absolute; top:107px; left: 15px; width:808px; height:107px; background-image:url("images/rahmenmitte.png");}
.titel {font-family helvetica, verdana, arial, sans-serif; color:#004040; font-size: 1.2em}
.einrueck { margin-left: 80px; margin-right: 80px }
p {font-family helvetica, verdana, arial, sans-serif; color:#004040; font-size: 1em}