Probleme mit Anker (& CSS)

html.de-Forum HTML, XHTML & CSS
1

Hallo!
Ich bin hier jetzt frisch registriert, weil ich mit einem Fehler, der bei mir auftritt nicht zurecht komme.
Ich bastle an einer Übersicht für einen Kurs der Virtuellen Hochschule Bayern. Dabei soll eine juristische Strafrechtsübersicht dargestellt werden. Ich selbst kenne HTML eigentlich nur aus der Schule und den Editoren von Seiten, die ich betreue.
Ich hatte etwas umhergesucht und dabei die Möglichkeit entdeckt mit Ankerverweisen Details zu bestimmten Punkten aufrufen zu lassen. Dabei verwendete ich auch CSS.

[CODE=„CSS“]

main { position: relative; } ul { width: 16em; list-style-type: none; margin: 0; padding: 0; } ul li { padding: .2em 1em; background-color: #F1F3F4; border: 0.1em solid #3983ab; border-style: none solid solid; overflow: hidden; } ul li:first-child { border-style: solid; } ul li a { float: right; } .details { position: absolute; right: 1em; top: 1em; background-color: #F1F3F4; border: 0.1em solid #3983ab; border-radius: 0 8px 8px; padding: 1em 1em .2em; width: 32em; max-height: 23em; overflow: auto; display: none; } .details h1 { margin-top: 0; } .details:target { display: block; } .close { width: 0; heigh: 0; border: 0; text-shadow: none; color: transparent; } .close:after { position: absolute; top: 1em; right: 1em; content: "X"; color: white; background: #c32e04; font: font: bold 1em/150% Georgia, Times, serif; border: 0.1em solid #3983ab; border-radius: 0 8px 8px; display: block; text-align: center; width: 1.5em; height: 1.5em; padding: 0.2em 0 0 0em; } [/CODE]

[CODE=„HTML“]

Das vorsätzlich vollendete Begehungsdelikt

Details zum Tatbestand

I. Tatbestand

1. objektiver Tatbestand  Details 
a. Täterqualität
b. taugliches Tatobjekt
c. Erfolg
d. Handlung
e. Kausalität (c-s-q-n-Formel)
[f. objektive Zurechnung]

2. subjektiver Tatbestand
a. Vorsatz, § 15 StGB
(P) Irrtümer nach § 16 Abs. 1 S. 1 StGB
(P) error in persona,
(P) aberratio ictus
b. besondere/sonstige subj. Merkmale (bspw. sb.. Mordmerkmale, Zueignung- o. Bereicherungsabsicht)
3. Tatbestandsannex
→ objektive Bedingung der Strafbarkeit

schließen

Details zur Rechtswidrigkeit

II. Rechtswidrigkeit
Die Tatbestandsmäßigkeit indiziert die Rechtswidrigkeit – dieses Indiz entfällt, wenn etwaige Rechtfertigungsgründe vorliegen.
→ objektive Voraussetzungen des RFTG
→ nach h.M. subj. Rechtfertigungselement
(P) Fehlen des sb. RFT-Elements
(→ e.A. Vollendung a.A. Versuch)
→ ggf. positive Feststellung der RWK bei offenen TB
z.B. § 240 StGB
Rechtfertigungsgründe:
1. Notwehr, § 32 StGB
2. ggf. zivilrechtliche Rechtfertigungsgründe (§§ 228, 904; §§ 229, 859 BGB)
3. Notstand, § 34 StGB
4. rechtfertigende Einwilligung?
§ 228 StGB bei Körperverletzungsdelikten beachten
5. Festnahmerecht, § 127 StPO
6. Wahrnehmung berechtigter Interessen, § 193 StGB (bei Beleidigungsdelikten).

schließen

Details zur Schuld

III. Schuld
1. Schuldfähigkeit, §§ 19 – 21 StGB
2. spezielle Schuldmerkmale
(bspw. § 315c Abs. 1 StGB; § 225 Abs. 1 StGB)
3. Entschuldigungsgründe
a. Notstand, § 35 StGB
b. übergesetzlicher Notstand (str.)
c. Notwehrexzess, § 33 StGB
4. Irrtümer
a. Verbots-/Erlaubnisirrtum, § 17 StGB
b. Erlaubnistatbestandsirrtum (h.M.)

schließen

Details zu persönlichen Strafausschließungs- oder Strafaufhebungsgründen

IV. persönliche Strafausschließungs- oder Strafaufhebungsgründe
→ bspw. Angehörigeneigenschaft, § 258 Abs. 6 StGB, tätige Reue §306e Abs. 2 StGB

schließen

Details zur Strafzumessung

V. Strafzumessung
→ Regelbeispiele, minder oder besonderes schwere Fälle

schließen

Details zu Strafverfolgungsvoraussetzungen

VI. Strafverfolgungsvoraussetzungen
→ Strafantrag, Verjährung

schließen

Details zur Täterqualität

a. Täterqualität → Allgemeindelikte: jede natürliche Person
→ Sonderdelikte: besondere Anforderungen an die Tätereigenschaft, bspw. Zeugeneigenschaft, § 153 StGB, Amtsträgereigenschaft, § 340 StGB

schließen
[/CODE]

Durch diesen Code entstehen bei Klick auf „Details“ kleine Fenster, die auf die verwiesenen Beträge anzeigen. Das funktioniert so weit ganz gut. Allerdings reagieren die letzten beiden Anker (d5 und d6) anders und erscheinen ganz am oberen Rand der Seite, was stört und unpassend ist.
Auch musste ich etwas tricksen mit den Menüpunkten Schuld und Rechtswidrigkeit, da diese unbedingt hinter den Details Anker wollten, damit sie vorne links blieben.

Ich hoffe jemand hat eine Ahnung, wieso die Fenster von d5 und d6 nach oben springen.
D7 ist lediglich ein Versuch noch eine Ebene oben drauf zu legen, da diese weitere Informationen zu den einzelnen Punkten liefert. Alternativ fange ich einfach eine weitere Liste an.
Tricksen musste ich auch beim Link der „Details“. Dort habe ich einen Abstand nur generieren können, dass ich diesen in den Link gepackt habe. Gefällt mir bisher nicht. Vielleicht habt ihr auch da Vorschläge und konkrete Verbesserungen.

2

Die Ursache findet sich in Zeile 79 mit dem frühzeitigen schließen von :

[code=html]

...
[/CODE]
3

Hallo Spicelab,

vielen Dank für die Hilfe. Lustigerweise dachte ich, ich hätte das main schonmal entfernt. Da hätte ich noch einmal ganz genau hinschauen müssen.

Hat jemand noch Ideen für die anderen Fragen?

4

Zwei Möglichkeiten, damit Text und Link nebeneinander erscheinen:

  1. Derzeit gewählte Breite von
      enstprechend aufstocken.
      oder einfach
    • width:16em durch display:inline-block ersetzen.

Ein Abstand lässt sich mit margin erzielen:

ul li a { float: right; margin:0 10px /* Wert frei gewählt */ }

5

Dann ziehen Rechtswidrigkeit und Schuld mit. Die kleben da irgendwie dran.

Sieht dann etwas unschön aus, wenn es einfach so groß wie der Bildschirm ist.

Da zeigen sich bei mir auch keine Ergebnisse… :confused:

6

Kann ich nicht bestätigen.

Dann mußt Du wohl mit diesem Umstand leben.

Kann ich nicht bestätigen.

7

Mh, jetzt weiß ich wenigstens das es nicht am Code liegt. Habe mir das mal im Html-Dokument angeschaut. Da funktioniert das sogar ohne geänderte Breite. Das muss an Moodle liegen, was ich eigentlich dachte nichts machen dürfte, da ich in den BN-Einstellungen den Editor deaktiviert hatte und im HTML-Format nun arbeiten kann.
Moodle macht sowieso Sachen, die man ihm nicht sagt: Es verknüpft Wörter die bei mir auftauchen mit Einträgen aus einem Definitionen-Verzeichnis.
https://www.html.de/attachments/htmlforum-jpg.4386/?temp_hash=f41c42ec974f2c2a34bdf1d815bfdb06
Oben sieht man: Mit Margin und leicht größerer Liste meint Moodle es müsse den Punkt Rechtswidrigkeit (übrigens verknüpft mit einem Eintrag^^) in eine andere Zeile packen…

:frowning:

8

Mit https://moodle.org/ habe ich keine Erfahrungen.

Der Vollständigkeit halber weise ich darauf hin, dass ich margin anstelle von   empfohlen hatte.

Dem rechten Schnappschuß zufolge existiert es aber weiterhin in Deinem HTML-Code.

Da es sich um einen autogenerierten Verweis handelt, greifen hier natürlich die definierten CSS-Regeln für :wink:

Lösung: Den Details-Links eine Klasse zuweisen, um den generierten Link davon auszuschließen:

<a href="#d1" class="detail">Details</a>

ul li a.detail { float: right; margin:0 10px /* Wert frei gewählt */ }
9

Hallo zusammen,

ich melde mich hier nochmal.
Ich habe eine kurze Frage:
Das CSS beeinflusst Moodle, die Navigationsleiste am linken Rand wird verändert dargestellt, entsprechend den Einflüssen aus dem CSS-Bereich.
Ist es irgendwie möglich den Einfluss des CSS einzugrenzen? Das es nur innerhalb eines bestimmten Abschnittes wirkt? Somit könnte ich dann die Wirkung „einrahmen“.
Ich hatte bereits nach Alternativen gesucht. Z.B. bootstrap. Das macht die Arbeit aber leider nicht einfacher. Weder ist es Laienfreundlicher, noch funktionieren diese Buttons einmalig mit mehreren Inhalten (jedenfalls fiel mir das nach meiner Einarbeitung nicht zu).
Deshalb denke ich eher an das Einrahmen des CSS-Code, denn das HTML sollte auch für einen Laien übersichtlicher sein und darin ist viel einfacher einzuarbeiten.

Ich hoffe das wird hier noch nicht als themenfremd gesehen. Es ist nunmal leider noch die gleiche Arbeit… :confused:

10

Naja, das CSS soll ja auch für die linke Navigationsleiste gelten. Zumal Du uns von Beginn an genau dieses CSS präsentiert hast.

Von daher kann ich Dir nicht ganz folgen, warum das Problem plötzlich jetzt auftritt.

Ja. Zum Beispiel im Markup mit einem umschliessenden -Element.

Die betroffenen CSS-Selektoren würden dann mit nav beginnen:

nav ... {...}
11

Naja, es soll für die Navigation des Aufbaus gelten, nicht aber für die Navigation von Moodle für die einzelnen Kurse und dergleichen.

Es trat schon immer leider in Moodle auf. Ich fand es nur nicht wichtig, denn erstmal sollte alles andere laufen.

Das führt schließlich dazu, dass die CSS-Segmente auf einem Moodle-Testserver mit HTML- und CSS-Plugin im Atto-Editor laufen. Vielen Dank!
Die Navigationsleiste ist leider trotzdem betroffen. Eine gewisse Ausstrahlungswirkung ist also dennoch gegeben. :smiley:

12

Falls hier von den Moodle-autogenerierten Links die Rede ist, möchte ich an meinen vorletzten Post (31. März) erinnern, der seinerzeit die Problematik aufgegriffen hatte:

13

Nein nein. Diese Links tauchen nun auch nicht mehr auf, was nicht soo problematisch ist. Sie waren ja sogar noch positiv.
Ich packe mal ein Bild hier rein. Dann sollte man sehen können was ich meine. :wink:

14

Und wie wäre es damit?

[code=html]

Das vorsätzlich vollendete Begehungsdelikt

[/code] [code=css]nav ul { width: 16em; list-style-type: none; margin: 0; padding: 0; }

nav ul li {
padding: .2em 1em;
background-color: #F1F3F4;
border: 0.1em solid #3983ab;
border-style: none solid solid;
overflow: hidden;
}

nav ul li:first-child {
border-style: solid;
}

nav ul li a {
float: right;
}[/code]Somit gilt das CSS nur innerhalb des -Elements.

15

Vielen Dank!
Das sieht schonmal viel viel besser aus.
Lediglich nur noch der obere Teil kriegt das zu spüren…

Edit: zuvor hatte ich schon ein „nav“ um alles herum. Das an sich hatte natürlich nicht viel geändert.
Edit2: Vor dem Code mit .details habe ich jetzt aber kein „nav“. Soll da noch eins dazu?

16

Um weitere Überschneidungen mit der „Moodle-Navigation“ zu vermeiden, die offensichtlich auch verwendet, kannst Du selbstverständlich ein alternatives Element (z.B. ) wählen.

[code=html]

Das vorsätzlich vollendete Begehungsdelikt

[/code] [code=css]section ul { ... }

section ul li {
…
}

section ul li:first-child {
…
}

section ul li a {
…
}[/code]
Oder Du spezifizierst die Navigation mit einem ID-Bezeichner, falls in dem Dokument in einem weiteren eine unsortierte Liste folgt.

[code=html]

Das vorsätzlich vollendete Begehungsdelikt

[/code] [code=css]nav#delikt ul { ... }

nav#delikt ul li {
…
}

nav#delikt ul li:first-child {
…
}

nav#delikt ul li a {
…
}[/code]