nicht angemeldet
p.verweise muss margin:top:0px haben
p.verweise und div.content müssen identisches margin-left und margin-right haben.mfg Beat
Hmm... irgendwie klappt das nicht. Entweder bleiben Lücken zwischen den Grafiken, was ja auch logisch ist, wie mir inzwischen klar wurde, oder die Grafiken verschieben sich und man erkennt eine Überlappung. Außerdem steht der Text immer noch nicht da, wo ich ihn gerne hätte. Genau auf den Bereichen.
Wie ich das mit CSS lösen soll, ist mir schleierhaft. Hab schon vrsucht, noch zwei weitere Contentbereiche zu definieren, klappte nicht.
Und dann sind mir, nach dem einfügen, von Banner und Navigation, gleich noch weitere Probleme aufgefallen.
Denn das beides soll Ende auch immer zu sehen sein, genau wie der Kopf für die Texttabelle. Einzig der bereich Text und Fuß sollen/drüfen scrollbar sein. Und obendrein müssen die sich unter den Teil Kopf schieben.
Hier mal eine Grafik wie es am Ende aussehen soll. Ist das überhaupt mit CSS möglich? Habe das ganz starke Gefühl, dass ich da ein wenig( oder auch einiges) zu viel will.
|-----------------------------------|
| |-----------------------| |
| |Banner fix (erledigt) | |
| |-----------------------| |
| |
| |-------| |-----------------| |
| | Navi | | Kopf fix | |
| | fix | |-----------------| |
| | | | Text | |
| | | | | |
| | | | | |
| |-------| |-----------------| |
| | Fuß | |
| |-----------------| |
|-----------------------------------|
aktueller Quelltext und CSS:
<body>
<div id="banner"></div>
<a class="b1" href="1text.html" target="text"></a>
<a class="b2" href="2liste.html" target="text"></a>
<a class="b3" href="3update.html" target="text"></a>
<a class="b4" href="http://116812.iboox.com/" target="_blank"></a>
<a class="b5" href="http://imobilus.log.ag" target="_blank"></a>
<a class="b6" href="4linktipps.html" target="text"></a>
<a class="b7" href="5ich.html" target="text"></a>
<p class="titel">1981 - Die Vergangenheit ist die letze Hoffnung<br>01. Opfer des Krieges
</p>
<div id="content">
<p class="einrueck">
Kurzer Text zur besseren ÜBerschaubarkeit
</div>
<p class="verweise">
<a href="kapitel05.html"><b>vorheriges Kapitel</b></a>
<a href="../2liste.html#geschichten"><b>Storyauswahl</b></a>
<a href="kapitel07.html"><b>nächstes Kapitel</b></a>
</p>
</body>
body
{background-image:url("images/hintergrund.png");
background-attachment: fixed;}
div#banner{ background-image:url("images/banner.png");
background-repeat:no-repeat;
position:fixed;
width:453px;
height:70px;
margin-top:10px;
margin-left:30%
}
p.titel:before { content:url("images/rahmenoben.png");
display:block;
width:808px;
height:107px;
margin-top:50px
}
#content { width:808px;
margin: auto;
background-image:url("images/rahmenmitte.png");
margin-left:5px;
margin-right:5px;
}
p.verweise:after {content: url("images/rahmenunten.png");
display:block;
width:808px;
height:107px;
margin-top:0px }
.titel {font-family: arial, sans-serif; color:#336633; font-size: 1.2em; font-weight:bold; text-align:center;}
.einrueck { margin-left: 45px; margin-right: 55px; color:#336633 }
.verweise { font-weight:bold; text-align:center; margin-top:0px; margin-left:5px; margin-right:5px }
a:link { color: #004040; text-decoration:none; font-weight:bold; margin-left:30px }
a:hover { color: #008040; text-decoration:none; }
a:visited { color: #800040; text-decoration:none;}
<!--
a.b1 { display:block; background-image:url(images/schalt/home.png); background-repeat:no-repeat; width:111px; height:43px; }
a:hover.b1 { background-image:url(images/schalthover/home2.png); }
a.b2 { display:block; background-image:url(images/schalt/fanfictions.png); background-repeat:no-repeat; width:111px; height:43px; }
a:hover.b2 { background-image:url(images/schalthover/fanfictions2.png); }
a.b3 { display:block; background-image:url(images/schalt/updates.png); background-repeat:no-repeat; width:111px; height:43px; }
a:hover.b3 { background-image:url(images/schalthover/updates2.png); }
a.b4 { display:block; background-image:url(images/schalt/gaestebuch.png); background-repeat:no-repeat; width:111px; height:43px; }
a:hover.b4 { background-image:url(images/schalthover/gaestebuch2.png); }
a.b5 { display:block; background-image:url(images/schalt/weblog.png); background-repeat:no-repeat; width:111px; height:43px; }
a:hover.b5 { background-image:url(images/schalthover/weblog2.png); }
a.b6 { display:block; background-image:url(images/schalt/linktipps.png); background-repeat:no-repeat; width:111px; height:43px; }
a:hover.b6 { background-image:url(images/schalthover/linktipps2.png); }
a.b7 { display:block; background-image:url(images/schalt/ich.png); background-repeat:no-repeat; width:111px; height:43px; }
a:hover.b7 { background-image:url(images/schalthover/ich2.png); }
-->
mfg Lia