Tabelle fixieren
0 0 0 
at
Tabelle fixieren
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}
-
Ich arbeite gerade daran meiner Homepage ein neues Aussehen zu verpassen und bin nun auf ein kleines Problem gestoßen.
Das ist sicher ein guter Zeitpunkt, dein generelles Konzept zu überdenken.
Der Anschaulichkeit halber http://imobilus.im.funpic.de/
Die Bereitschaft, sich mit deiner Codewüste zu beschäftigen, wird wohl nicht überwältigend sein.
Problematisch auf deinen Seiten sind:- Frames,
- Verschachtelte Tabellen ohne einen tabellarischen Inhalt,
- Invalide Seiten.
Versuche diese Probleme zu beheben.
mfg Beat
--
Selber klauen ist schöner!-
Das ist sicher ein guter Zeitpunkt, dein generelles Konzept zu überdenken.
Hm... also wenn du mit Konzept das Layout meinst, dass sollte so beleiben. Banner oben, links menu, rechts der Text. Das menu unters Banner hatte ich schon mal, sieht aber wegen der Anzahl der Schaltflächen inzwischen bescheuert aus. (für meinen geschmack.
Die Bereitschaft, sich mit deiner Codewüste zu beschäftigen, wird wohl nicht überwältigend sein.
Problematisch auf deinen Seiten sind:- Frames,
- Verschachtelte Tabellen ohne einen tabellarischen Inhalt,
- Invalide Seiten.
Ich bin ein Anfänger auf dem Gebiet und Frames war für mich die bessere Vatiante als mit einer noch verschachelteren Tabelle zu arbeiten.
Und ich arbeite deshalb mit einer Tabelle, weil ich es bislang nicht hinbekommen habe ohne sie zu arbeiten. CSS ist für mich teilweise ein Buch mit sieben siegeln.
dahe wird es schwer diese Probleme zu beheben.Aber meine Frage hat sich eignetlich auch erledigt. Hab nach weiteren Stunden rumgooglen endlich die erklärung gefunden, das z-index nichts anderes ist, als eine Ebene.
Sorry für den unnötigen Post, Geduld war leider noch nie meine tugend.
mfg Lia
-
Sorry für den unnötigen Post, Geduld war leider noch nie meine tugend.
geduld ist auch nicht notwendig, sondern vorauschauendes arbeiten - wenn dus jetzt richtig machst, wirst du später verdammt viel zeit sparen - aber das ist deine sache ;)
insbesondere "weitere stunden herumgooglen" wirst du habe, da frames sehr viele nachteile mitsich bringen
-
Hallo zusammen!
Mein Porblem hat sich nun doch erledigt...
hab einfach den beiden Tabellen unterschiedliche Ebenen per z-index zugeweisen.
Sorry für diesen unnötigen post.LG
Lia-
Hallo.
Mein Porblem hat sich nun doch erledigt...
hab einfach den beiden Tabellen unterschiedliche Ebenen per z-index zugeweisen.Irgendetwas sagt mir, dass wir uns bald wiedersehen.
MfG, at
-