nicht angemeldet
Das heisst, wir haben ganz wenig HTML, aber mit :before und :after die Möglichkeit zusätzliche (virtuelle) Pseudo-Elemente zu erzeugen.
»»
Es ist tatsächlich einiges an html eingesparrt. Vor allem wird mir dass das Einfügen der neuen Texte sehr erleichtern.
Schöne Sache, leider wird es selbst vom IE 7 nicht unterstützt, etwas vornehmer ausgedrückt als hier:
http://forum.de.selfhtml.org/archiv/2006/2/t123831/Ich würde es dennoch machen, solange die wesentlichen Inhalte vernünftig dargestellt werden.
Und ich würde nicht mal MSIE conditional comments verwenden um das zu flicken.
Ich gehe ein Problem nach dem anderen an und da ist der IE im Moment noch nicht an der Reihe.
Denn im Moment wird noch nicht mal der Text richtig plaziert. Zumindest nicht der für das was im oberen Teil stehen soll, bzw im unteren.
Dabei hab ich per Kombination von Pseudoklasse :after/:before mit der Klasse für die entsprechende Textformatierung es so angegeben . Zumindest für mein Verständnis. Ist das ein Denkfehler bzw. Verständnisfehler?
Außerdem scrollt der obere Teil mit, was er eigentlich nicht soll. Postion:fixed hilft dagegen aber nicht.
hier mal die Quellcodes für diese irgendwie wirre Erklärung:
HTML:
<div id="content">
<p class="titel">
1981 - Die Vergangenheit ist die letze Hoffnung<br>
01. Opfer des Krieges
</p>
<p class="einrueck">
Auch hier nehm ich den ellenlangen Text einmal raus, damit es übersichtlicher ist.
</p>
</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>
Hier noch die CSS:
body
{background-image:url("images/hintergrund.png");
background-attachment: fixed;}
p.titel:before { content:url("images/rahmenoben.png");
display:block;
width:808px;
height:90px;
}
#content { width:808px;
margin: auto;
background-image:url("images/rahmenmitte.png");
}
p.verweise:after {content: url("images/rahmenunten.png");
display:block;
width:808px;
height:90px;
}
.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; }
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;}
Positionier ich <div id="content"> vor <p class="einrueck"> dann entsteht eine Spalte zwischen den Bildern und die Grafik verschiebt sich nach links, so wie untern auf der HP zwischen der unteren Grafik und der Mittleren zu sehen. Die hab ich auch noch nicht wegbekommen.
Optisch ist das ganze zu sehen auf[linkhttp://imobilus.im.funpic.de/]
geht das ganze überhaupt so, wie ich es möchte? Oder muss ich doch mit einer Tabellen arbeiten, um mein Vorhaben zu realisieren?
nfg und vielen lieben Dank für die Hilfe.
Lia