nicht angemeldet
Probleme Grafiken
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
-
Ein Denkansatz für dich
-------------------
| Grafik Kopf | hier ist das :before Pseudoelement Zuständig
|-------------------|
| Text und |
| Grafik Body |Grafik Fuss ------------------- <div id=content>Überschrift und Text</div>
das CSS
#content {
width:...;
margin:...;
background-image:url(bildbody.jpg);
}
#content:before{
display:block;
background-image:url(bildhead.jpg);
width:...;
height:...;
}
#content:after{
display:block;
background-image:url(bildfoot.jpg);
width:...;
height:...;
}Das heisst, wir haben ganz wenig HTML, aber mit :before und :after die Möglichkeit zusätzliche (virtuelle) Pseudo-Elemente zu erzeugen.
mfg Beat
--
Selber klauen ist schöner!-
Das heisst, wir haben ganz wenig HTML, aber mit :before und :after die Möglichkeit zusätzliche (virtuelle) Pseudo-Elemente zu erzeugen.
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/-
Das heisst, wir haben ganz wenig HTML, aber mit :before und :after die Möglichkeit zusätzliche (virtuelle) Pseudo-Elemente zu erzeugen.
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.mfg Beat
--
Selber klauen ist schöner!-
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-
p.verweise muss margin:top:0px haben
p.verweise und div.content müssen identisches margin-left und margin-right haben.mfg Beat
--
Selber klauen ist schöner!-
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
-
Je mehr du fixieren willst, um so kleiner wird der nutzbare Bildschirm.
Ich würde den ganze Contentbereich am Stück lassen. Was bringt es dem Leser, wenn er eine Überschrift immer lesen MUSS?mfg Beat
-
Je mehr du fixieren willst, um so kleiner wird der nutzbare Bildschirm.
Ich würde den ganze Contentbereich am Stück lassen. Was bringt es dem Leser, wenn er eine Überschrift immer lesen MUSS?mfg Beat
Na ja... das ganze ist eine Seite für Harry Potter Fangeschichten. Jede Storie ist bis zu 50 Kapitel lang, und jedes Kapitel zwischen 5 und 12 Word Seiten. Wenn man keine Lust oder Zeit mehr hat zu lesen, notiert man sich einfach das Kapitel und die Storie bei der man war und fndet es schnell weider. Das ist die Überlegung dahinter. Aber wenn das nicht geht, dann geht es eben nicht.
Dennoch löst das nicht das Problem, des falsch stehenden Textes...
na ja.. ich werde einfach weiter basteln. vielleicht stoß ich noch auf die Lsöung. vielen Dank für die Hilfe.
mfg Lia
-
Bookmarks?
Einfache Lösung:
Biete einen Bookmarklink für das betreffende Kapitel/Seite.Komplexere aber flexiblere Lösung:
Arbeite mit Serverseitiger Technik und Sessions
Errichte ein Member Login und verwalte
--personalisierte Bookmarks,
--'gelesen' Listen,
--'Empfehlungen' Listenmfg Beat
--
Selber klauen ist schöner! -
Hi,
Ich würde den ganze Contentbereich am Stück lassen. Was bringt es dem Leser, wenn er eine Überschrift immer lesen MUSS?
Na ja... das ganze ist eine Seite für Harry Potter Fangeschichten. Jede Storie ist bis zu 50 Kapitel lang, und jedes Kapitel zwischen 5 und 12 Word Seiten. Wenn man keine Lust oder Zeit mehr hat zu lesen, notiert man sich einfach das Kapitel und die Storie bei der man war und fndet es schnell weider.
Was hilft mir dabei eine feststehende Ueberschrift?
Da waere, wenn es so viel Inhalt in einem Dokument ist, eine Anker-Navigation, mit der man einzelne Teile gezielt anspringen kann, doch sinnvoller ...
(Oder habe ich deine angedachte Aufteilung jetzt falsch verstanden?)
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
-
-
-
-
-
-
-
-