Ein paar Fragen
Liste der Anhänge anzeigen (Anzahl: 1)
Okay... ich glaub ich traue mich ein paar Fragen zu stellen.
Es gibt Einiges das ich gern ändern würde, aber irgendwie klappt es nicht.
Ich probiere mal meine Fragen vernünftig zu umreißen:
- Ich hab verstanden, dass sich %-Angaben meistens auf die umliegende Box beziehen. Ich habe versucht das Design so beweglich wie möglich zu halten, doch wie man sieht, hat mein Wrapper (der erste, nicht der zweite) eine Höhenangabe von 800px. Alle %-Angaben die ich ausprobiert habe führten dazu, dass er von der Bildfläche verschwindet. - Das verstehe ich nicht. Müsste sich denn nicht auch in der Höhe die Angabe auf den Body oder das Hintergrundfoto beziehen?
- Wie man ebenfalls sieht, hat der oberste Link in der linken Navigation ein kleines Bild. Das Bild befindet sich korrekter Weise inline vor dem Text. Doch wenn ich die Seite anklicke, und sie damit einen blauen Hintergrund bekommt (Was jede Seite bekommt, die gerade angeklickt ist, damit man sich besser zurecht findet), dann rutscht das Bild eine Reihe höher und befindet sich somit über dem Text. Das will ich nicht. Aber ich habe keinen Hinweis gefunden, wie ich das ändern soll/kann. (Edit: Habs gefunden. display:inline - Dachte irgendwie, das hätte ich schon probiert.)
Zu allem anderen sei gesagt, ich bin noch mitten in der Arbeit. Ich habe noch nicht groß auf Barrierefreiheit geachtet, keine evtl. notwendigen Workarounds für den I.E. oder sonst einen Browser geschrieben und das Hintergrundbild braucht dringend noch eine Überarbeitung, bzw. ich tausche es ganz aus. Weiß noch nicht.
Ich bin generell für alle Anregungen offen, auch für Kritik. Doch bitte verpackt letztere in rosa Watte ;) ich bin echt n bisschen dünnhäutig gerade.
Fußleiste und Navigationsleiste 2 sind noch komplett zu ignorieren.
Liebe Grüße:
Nora
HTML-Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head><meta name="language" content="german, de, deutsch" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style1.css" media="screen, projektion" />
<title>Viele Ich's</title>
</head>
<body id="umg">
<div id="wrapper">
<div id="tiefsee">
<h3>Die Tiefsee</h3>
<p><img src="http://xhtmlforum.de/images/hatchetfish-webklein.png" alt="Bild vom Hatchetfisch" title="Hatchetfisch">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate rutrum lacus, eu aliquet justo cursus a. Nunc ultrices, orci vitae tincidunt consequat, nisi tellus congue arcu, et ullamcorper augue lorem id sem. Pellentesque vel dictum enim. Sed vestibulum rutrum sem, nec pharetra nibh rutrum non. In sit amet imperdiet arcu. Quisque id urna libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate rutrum lacus, eu aliquet justo cursus a. Nunc ultrices, orci vitae tincidunt consequat, nisi tellus congue arcu, et ullamcorper augue lorem id sem. Pellentesque vel dictum enim. Sed vestibulum rutrum sem, nec pharetra nibh rutrum non. In sit amet imperdiet arcu. Quisque id urna libero.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate rutrum lacus, eu aliquet justo cursus a. Nunc ultrices, orci vitae tincidunt consequat, nisi tellus congue arcu, et ullamcorper augue lorem id sem. Pellentesque vel dictum enim. Sed vestibulum rutrum sem, nec pharetra nibh rutrum non. In sit amet imperdiet arcu. Quisque id urna libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate rutrum lacus, eu aliquet justo cursus a. Nunc ultrices, orci vitae tincidunt consequat, nisi tellus congue arcu, et ullamcorper augue lorem id sem. Pellentesque vel dictum enim. Sed vestibulum rutrum sem, nec pharetra nibh rutrum non. In sit amet imperdiet arcu. Quisque id urna libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate rutrum lacus, eu aliquet justo cursus a. Nunc ultrices, orci vitae tincidunt consequat, nisi tellus congue arcu, et ullamcorper augue lorem id sem. Pellentesque vel dictum enim. Sed vestibulum rutrum sem, nec pharetra nibh rutrum non. In sit amet imperdiet arcu. Quisque id urna libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate rutrum lacus, eu aliquet justo cursus a. Nunc ultrices, orci vitae tincidunt consequat, nisi tellus congue arcu, et ullamcorper augue lorem id sem. Pellentesque vel dictum enim. Sed vestibulum rutrum sem, nec pharetra nibh rutrum non. In sit amet imperdiet arcu. Quisque id urna libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate rutrum lacus, eu aliquet justo cursus a. Nunc ultrices, orci vitae tincidunt consequat, nisi tellus congue arcu, et ullamcorper augue lorem id sem. Pellentesque vel dictum enim. Sed vestibulum rutrum sem, nec pharetra nibh rutrum non. In sit amet imperdiet arcu. Quisque id urna libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate rutrum lacus, eu aliquet justo cursus a. Nunc ultrices, orci vitae tincidunt consequat, nisi tellus congue arcu, et ullamcorper augue lorem id sem. Pellentesque vel dictum enim. Sed vestibulum rutrum sem, nec pharetra nibh rutrum non. In sit amet imperdiet arcu. Quisque id urna libero.
</p>
</div>
<div id="wrapper2">
<div id="navi2">
<p> Navigationsleiste 2
</p>
</div>
<div id="navi">
<h2>Navigation</h2><!--User, die das Design nicht sehen koennen, orientieren sich an dem Text-->
<ul>
<li id="navidefinition"><img src="http://xhtmlforum.de/images/buchstabe_d.png" width="18" height="18" style="vertical-align:text-bottom" alt="Buchstabe D"><a href="001dissoziative_identitaetsstoerung_definition.html"> Definitionen</a></li>
<li id="naviinhaltsumgang"><a href="002dissoziative_identitaetsstoerung_inhaltsumgang.html">Umgang mit den Inhalten der Ausstellung</a></li>
<li id="navisternchen"><a href="003dissoziative_identitaetsstoerung_sternchen.html">*Die Sternchenregel*</a></li>
<li id="navibilder"><a href="004dissoziative_identitaetsstoerung_bilder.html">Bilder und Texte von uns</a></li>
<li id="naviwasistdas"><a href="005dissoziative_identitaetsstoerung_wasistdas.html">Die multiple Persönlichkeit</a></li>
<li id="navisonja"><a href="006dissoziative_identitaetsstoerung_sonja.html">Sonjas Bereich</a></li>
<li id="navialex"><a href="007dissoziative_identitaetsstoerung_alex.html">Alexs Bereich</a></li>
<li id="naviinnenwelt"><a href="008dissoziative_identitaetsstoerung_innenwelt.html">Das Innenreich und die Außenwelt</a></li>
<li id="navimegan"><a href="010dissoziative_identitaetsstoerung_megan.html">Megans</a></li>
<li id="naviisoke"><a href="011dissoziative_identitaetsstoerung_isoke.html">Isokes Bereich</a></li>
<li><a href="website1.html">Püppchens Bereich</a></li>
<li><a href="website1.html">Coming Out - Ein System zum Freund</a></li>
<li><a href="website1.html">Nora in der Partnerschaft</a></li>
<li><a href="website1.html">Für Partnerinnen und Partner</a></li>
<li><a href="website1.html">Für Opfer / Betroffene</a></li>
<li><a href="website1.html">Noras Begegnung mit der Sexualtität</a></li>
<li><a href="website1.html">Unser Dank!</a></li>
<li><a href="website1.html">PART II</a></li>
<li><a href="website1.html">An die Polizei</a></li>
<li><a href="website1.html">An Psychologen und Psychologinnen</a></li>
<li><a href="website1.html">An Lehrer und Lehrerinnen</a></li>
<li><a href="website1.html">An Ärzte und Ärztinnen</a></li>
<li><a href="website1.html">An die Regierung</a></li>
<li><a href="website1.html">Licht</a></li>
</ul>
</div>
<div id="content">
<h1>Umgang mit den Inhalten der Ausstellung
</h1>
<h2>Anonym und doch persönlich
</h2>
<p>
Die Ausstellung ist anonym, bestimmte Inhalte sind zu unserem Schutz oder dem Schutz anderer Personen verändert worden. Dies betrifft insbesondere sämtlich verwendete Namen.<br />
Vieles was Sie hier lesen werden, ist sehr privater Natur, denn es ist unser Leben von dem wir berichten. Bitte lesen Sie es nicht, als wäre es eine Seifenoper oder Fast Food! Bewahren Sie sich, trotz der Anonymität des Internets, den Respekt und die Achtung vor uns und Ihnen selbst.
</p>
<p>
<h2>Achten Sie auf sich</h2>
<p>
Teile dieser Ausstellung berichten von Gewalt und Missbrauch. Und obwohl die Folgen der Gewalt und nicht die Gewalt als solches im Mittelpunkt stehen soll, wäre es gut, wenn auch Sie sich nicht mit allen Emotionen (oder im emotional stark belasteten Zustand) in das Thema stürzen.<br />
Weder uns, noch Ihnen ist geholfen, wenn Sie sich auf dem Weg durch die Ausstellung zu viel zumuten. Ihr Verstand wehrt sich, wenn er bedrängt wird. Ihre Aufmerksamkeit lässt nach, Ihre Gedanken schweifen ab oder Sie bekommen plötzlich das Gefühl, Sie müssten jetzt sofort Tausend Dinge tun, die wichtiger wären, als weiter zu lesen.<br />
<strong>Das sind Schutzmechanismen. Übergehen Sie sie nicht!</strong>
</p>
<p>
Beobachten Sie eine oder gleich mehrere dieser Reaktionen an sich, dann machen Sie eine Pause. Wir haben auch nicht alles an einem Tag geschrieben. Genau genommen hat es mehrere Jahre gebraucht. Nehmen also auch Sie sich alle Zeit, die Sie brauchen.<br />
Sollte Ihnen das Gelesene zu sehr unter die Haut gegangen sein, dann klicken Sie auf den untersten Menüpunkt: <a href="licht.html">LICHT</a> <br />
Betrachten Sie ihn als Auszeit oder Urlaub von der Welt.<br />
<h2>Wie ist diese Ausstellung strukturiert?
</h2>
<p>
Sie werden zwei Abschnitte vorfinden. Der erste Abschnitt ist allen Lesern gewidmet. Hier geht es um die Themen: Was ist die dissoziative Persönlichkeitsstörung? Wie entsteht sie? Wie wirkt sie sich im Alltag aus und was wir viel wichtiger finden: Was ist eine dissoziative Persönlichkeitsstörung nicht!<br />
Ebenso finden Sie im ersten Bereich unsere persönlichen Berichte. Unser Lebensweg machte uns zu dem, was wir heute sind. Warum und wie es dazu kam schildern wir ihnen. Jede/r von uns auf ihre/seine Weise.
</p>
<p>
Der zweite Bereich ist in erster Linie an die Polizei, aber auch Menschen anderer Berufsgruppen gerichtet. Hier setzen wir in Teilen berufliches Wissen voraus. Gleichzeitig berichten wir auch, warum es Menschen mit unserem Hintergrund oft unmöglich ist auszusagen. Und wie man es (aus unserer Sicht) möglich machen könnte.
Achtung: Wenn sie unbedarft sind im Umgang mit Gewalt und Missbrauch, können die Inhalte des zweiten Teils stark verstörend wirken. Sollten Sie Teil Zwei lesen wollen, dann bitten wir Sie eindringlich: Lesen Sie Teil Eins als erstes!
</p>
<h2>Navigation durch die Ausstellung
</h2>
<p>Wir haben diese Ausstellung so gestaltet, dass Sie viele Möglichkeiten haben, sie für sich zu entdecken. Der sicherste Weg ist es, nach jeder Seite unten auf Weiter zu klicken.<br />
Der Vorteil daran: Wir haben die einzelnen Bereiche so geschrieben, dass sie in etwa aufeinander aufbauen. Es besteht somit weniger die Gefahr, dass Sie etwas nicht verstehen, oder sich verlaufen. Wir empfehlen diesen Weg, wenn Sie sich unsicher fühlen.<br />
Es steht Ihnen jedoch ebenso offen, mittels des Menüs (am linken Rand) ganz nach eigenem Ermessen die Ausstellung zu besuchen.
</p>
<p>Egal welchen Weg Sie wählen, das Menü auf der linken Seite wird Sie stets begleiten und Ihnen helfen die Übersicht zu bewahren.<br />
Auch sollten Sie sich diesen Schrifttyp einprägen. Mit ihm haben wir den Leitfaden für die Ausstellung geschrieben. Wissenschaftliche Artikel besitzen einen neutraleren Schrifttyp. Ebenso hat jede Persönlichkeit von uns ihren eigenen Schrifttyp. Ein Beispiel der Schrift, zusammen mit dem Namen finden Sie ebenfalls im linken Menü.
</p>
</div><!--content ende-->
<div id="navi4">
<p> <a href="001dissoziative_identitaetsstoerung_definition.html">Zurück</a>
<a href="003dissoziative_identitaetsstoerung_sternchen.html">Weiter</a>
</p>
</div>
</div>
<!-- wrapper ende -->
</div>
<!-- wrapper2 ende -->
</body>
</html>
Code:
* { margin: 0; padding: 0; }
body {
background-image:url(../images/seabg.png);
background-position: top center;
background-repeat: no-repeat;
font-size: 100.1%;
text-align:left;
}
#wrapper {
background-color: transparent;
background-position: top center;
width: 100%;
height: 800px;
}
#tiefsee {
background-image:url(../images/tiefseebg.png);
background-repeat:no-repeat;
background-position:top center;
float:right;
width:16%;
height:91%;
margin:1% 3%;
padding:1% 2%;
overflow:auto;
text-align:left;
border-width:1px;
border-style:solid;
border-color:transparent;
-moz-border-radius:10px;
-khtml-border-radius:30px;
color:white;
}
#wrapper2 {
background-color: transparent;
top:left;
width: 73%;
height:100%;
text-align:left;
}
#navi2 {
background-color:transparent;
float:left;
width:91%;
height:5%;
padding:2%;
margin:1%;
border-width:1px;
border-style:solid;
border-color:black;
-moz-border-radius:10px;
-khtml-border-radius:30px;
color:white;
}
#navi {
background-image: url(../images/navi2.png);
background-repeat:no-repeat;
float:left;
width: 27%;
height:75%;
overflow:auto;
margin: 1%;
padding:1.2%;
border-width:1px;
border-style:solid;
border-color:transparent;
-moz-border-radius:10px;
-khtml-border-radius:30px;
color:white;
font: 0.75em Tahoma, sans-serif;
letter-spacing: 0.1em;
}
#navi h2 {
text-indent:-9999px;
height: 0;
}
#navi ul, li {
list-style-type: none;
padding: 1.5%;
}
#navi li {
border-bottom: 2px dotted grey;
}
#def #navidefinition a,
#umg #naviinhaltsumgang a,
#ste #navisternchen a,
#bil #navibilder a,
#was #naviwasistdas a,
#son #navisonja a,
#ale #navialex a,
#inn #naviinnenwelt a,
#meg #navimegan a hover {
background-color: #20005E;
display: block;
color: orange;
border-color: white;
cursor: default;
}
#navi a:link {
text-decoration: none;
color: white;
}
#navi a:visited {
text-decoration: none;
color: orange;
}
#navi a:hover {
color: gold;
}
#navi a:focus {
color:white; text-decoration:dotted;
}
#navi a:active {
color:black; text-decoration:dotted;
}
div#content {
background-image:url(../images/content1.png); background-repeat:no-repeat;
background-color:transparent;
float:right;
width:55%;
height:78%;
padding:0% 3%;
margin:1% 3% 1% 1%;
border-width:1px;
border-style:solid;
border-color:transparent;
-moz-border-radius:10px;
-khtml-border-radius:30px;
font-family: calibri, sans-serif;
font-weight: normal;
line-height: 1.6;
overflow: auto;
}
#content p {
text-indent: 1em;
font-size: 1.05em;
color: #BFDEFF;
}
#content h1 {
text-indent:-9999px;
height: 0;
}
#content h2 {
color: #E6F2FF;
font-size: 1.1em;
font-weight: normal;
margin-bottom: 10px;
line-height: 3;
text-decoration: underline;
}
#navi4 {
background-color: transparent;
position:fixed;
bottom:0;
left:28%;
width:40%;
height:5%;
text-align: center;
display: inline;
border-width:1px;
border-style:solid;
border-color:transparent;
-moz-border-radius:10px;
-khtml-border-radius:30px;
color:white;
word-spacing: 80px;
font-size: 1.5em;
font-family:tahoma, sans-serif;
}
#navi4 a:link {
text-decoration: none;
color: white;
}
#navi4 a:visited {
text-decoration: none;
color: orange;
}
#navi4 a:hover {
color: gold;
}
#navi4 a:focus {
color:darkred;
text-decoration:dotted;
}
#navi4 a:active {
color:black;
text-decoration:none;
}
#content h2 {
font-size: 1.1em;
margin-bottom:-13px;
}
|