Orlando: Probleme mit Ankern und position:fixed (Sitecheck! ;))

Beitrag lesen

Hi Mathias,

du armer Tropf. Schreibst so einen schönen Aufsatz und keiner will dir dafür einen Stern in's Heft kleben. Also hier isser:

<img src="http://www.ellerau.de/ju/bilder/stern-l.gif" border="0" alt=""> ;)

CIAO!

Föllig flash! *THX* muss das heißen, besser noch *THX Ultra* für die Audiophilen unter uns.

(*) Werde ich jetzt abgemahnt? *fg*

Ab in den Kerker, du Elch *g*

Lange Rede, wenig Sinn; hier das Werk:

Ah ja, endlich - hier geht's also weiter ;)

http://home.t-online.de/home/dj5nu/css-position-fixed.html

Hier mein Senf:

liegt es über Linkanker

-> liegt es über dem Linkanker

Der Inhalt des a-Element

-> Der Inhalt des a-Elements

welche der am obersten Fensterrand fest positionierte Bereich im ungünstigsten Fall einnimmt.

Was heißt "im ungünstigsten Fall"? Der fixierte Bereich (px) *ist* so groß wie definiert, oder nicht? Wenn man die Höhe in 'em' angibt, sind Hopfen und Malz verloren, weil man dann die nötigen 'px' nicht eruieren kann - und 'em' sind IMHO für position:fixed zwingend nötig, damit der Inhalt beim Skalieren der Schrift nicht das DIV sprengt...

genauso kann aber auch eine relative Einheit wie

-> genauso können ... Einheiten ...

auf alle Ankerelementen mit der Klasse anker wirken

-> auf alle Ankerelemente mit der Klasse anker wirken

über ein link-Element auf eine externe Stylesheet-Adresse referenziert

-> über ein link-Element ein externes Stylesheet referenziert (Vorschlag, da "auf etwas referenzieren" etwas holprig klingt ;) )

auf welche mit einem CSS-Klassenselektor referenziert wird

-> welche mit einem CSS-Klassenselektor referenziert wird (s. oben)

Da die Deaktivierung der Außenränder der Überschrifelemente

-> Da die Deaktivierung der Außenränder der Überschriftelemente

darüber nachgedacht werden beispielsweise

darüber nachgedacht werden, beispielsweise

body > h2 { ... }   body > p.lp { ... }

-> body>h2 { ... }     body>p.lp { ... }

Damit's den M$IE5 nicht aus dem Tritt bringt, der ist da empfindlich. Er versteht zwar den Selektor nicht, ist aber so verbuggt, das er mit Leerzeichen trotzdem falsch rendert...

den fest positionierten Bereich ... zuzuordnen

-> dem fest positionierten Bereich ... zuzuordnen

verweist, sich ebenso der Methode scrollBy()bedient werden,

-> felt hir was? ;)

weshalb nicht verlässlich ist, ob ... vor oder nach dem Anspringen

-> weshalb nicht verlässlich ist, dass ... erst nach dem Anspringen

falls von eine zu lange

-> falls man eine zu lange

oder 1000 Millisekunden

-> oder es sind 1000 Millisekunden

in einer zentralen Funktion auslagern

-> in eine zentrale Funktion auslagern

if (window.document.getElementsByTagName && !window.opera) {

-> Warum darf Opera 7 nicht mitmachen? Dazu aber später mehr.

angesprungen wurde oder erst viel später

-> angesprungen wurde, oder erst viel später

gescrollt werden soll, angibt,

-> gescrollt werden soll angibt,

unterstützen, und deren eindeutigen

-> unterstützen und deren eindeutigen

Hmpf, meine Augen brennen ;)

Deine Schlussfolgerung, dass man serverseitig den Client ermitteln muss, um zu entscheiden, ob man die JS-Lösung einsetzen kann, oder nicht, kann ich nicht so recht nachvollziehen. Da du position:fixed ohnehin per Selektor einbindest (und das musst du ja), kannst du natürlich per DOM herausfinden, ob es der Browser gefunden hat, oder nicht. Kappsle das Hinzufügen der EventHandler einfach in

if(document.getElementById("header").style.position == "fixed") { ...

Müsste doch funktionieren, oder bilde ich mir das jetzt nur ein? Sieht so einfach aus ;)

Der erste Teil des Artikels, das heißt die CSS-Lösung, wurde übrigens durch Orlando inspiriert. Ich weiß es zu würdigen:<img src="http://www.plauder-smilies.de/knuddel.gif" border="0" alt=""> (<- muss sein, er wird es verstehen *duck* ;))

Danke und bitte, *wah!* <linksetzer>http://www.google.com/search?q=bannstrahl</linksetzer> ;)

BTW, ich schreibe im Moment selbst eine kleine Funktion, die alle internen Links umbiegt (genauer, einen Parameter mit dem aktuellen Stylesheet anhängt), um meinen Styleswitcher auch für Folgeseiten die nötigen Daten mitgeben zu können. Cookies sind mir nicht zuverlässig genug - und ich mag sie nicht. Serverseitig ist mir das zu aufwändig, ich müsste bei jedem Link etwas generieren lassen.

Übrigens habe ich keine annehmbare CSS-Lösung für eine Startnummer bei nummerierten Listen http://www.w3.org/TR/html401/struct/lists.html#adef-start gefunden, [...]

<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
</ul>
<p>Zusammenfassung 1-3</p>
<ul start="4">
<li>4.</li>
...

[...] denn <li>Zusammenfassung 1-3</li> wäre Murks.

Was hältst du davon?

<ol> <!-- ja, genau :) -->
  <li>bla</li>
  <li>bla</li>
  <li>bla
    <ul>
      <li>Zusammenfassung 1-3</li>
    </ul>
  </li>
  <li>bla</li>
  <li>bla</li>
 </ol>

Ist korrekt verschachtelt, IMHO auch logisch und darüber hinaus auch ohne CSS genießbar.

Sicherlich könnte man argumentieren, dass diese Markupstruktur grundsätzlich suboptimal ist, aber bei Überschriften ergäbe sich dasselbe Problem. Folgendes Markup wäre mir zu schwammig:

Hardliner, du... ;)

<h>1.</h>
<h>2.</h>
<h>3.</h>
<h>[kein Counterwert] Zusammenfassung 1-3</h>
<h>4.</h>
<h>5.</h>
<h>[kein Counterwert] Zusammenfassung 4-5</h>
<h>6.</h>

Warum nur <h> und nicht <hx>? Damit wärst (und bist) du dieses Problem auf einen Schlag los.

Was denkt ihr; wie würdet ihr eine solche Struktur in Markup überführen?

<h1>Thema</h1>

<h2>bla 1</h2>
 <h2>bla 2</h2>
 <h2>bla 3</h2>

<h3>Falls du es immer noch nicht kapiert haben solltest, hier bla 1 bis 3 als Cartoon</h3>

Auch im Hinblick auf automatische Nummerierung, angenommen man kann Counter uneingeschränkt verwenden, momentan also nur ein Gedankenexperiment.

Ist mit obiger Variante Problemlos möglich. Kann halt nur Opera, aber das ist ja kein Hindernis, da du die Nummerierung auch mit <ol> hinbekommst.

Meine Alternativideen:

Interessant, ich fürchte aber, ich weiß nicht, worauf du hinaus willst. Könntest mir ja einen 1-bis-3-Cartoon malen *g*

Nebenbei, das Ursprungsthema war der Artikel "Probleme mit Ankern und position:fixed", falls jemand vor lauter Abschweifungen den Überblick verloren hat... ;))

Ich gebe zu, kurzfristig schwanden mir die Sinne ;)

was wäre bloß die Herausforderung beim Webseitenbasteln, wenn man sich nicht mit den fehlerhaften Browsern herumschlagen müsste... *g*

Was wäre das erst ein Spaß, würden Browser nur fehlerfreien Code anzeigen...

LG Roland

PS: Dass Opera 7 mit der hiesigen Textarea nicht zurechtkommt, liegt am umgebenden <tt>. Ich hab's als Bug gemeldet und musste für dieses Posting Mozilla starten. Ich hoffe, du weißt das zu schätzen ;)