Probleme beim Navigieren einer Bootstrap-Seite NUR mit Firefox & Opera

[Vlad Ghitulescu]

Hallo!


Ich habe ein Problem mit der Navigation auf meiner Seite:

http://www.Ghitulescu.de/beta/index.html

Wenn ich auf einer der navbar-Menus (was / wieviel / wann / wo / wer), *springt* die Seite auf eine falsche Position.

Dieses Problem habe ich nur mit:

a) Firefox (27.0) oder
b) Opera (12.16 Build 1860) auf meinem iMac (mit OS X 10.9.1) oder
c) Internet Explorer (9.0.8112 16421),
d) Opera (12.16 Build 1860) oder
e) Firefox (14.0.1) auf einem PC (mit Windows 7)

**und** wenn der Browser so breit ist, dass die navbar **nicht minimiert** (collapsed) ist.

Ich habe das Problem gar nicht mit:

a) Safari (7.0.1 (9537.73.11)) oder
b) Chrome (32.0.1700.102) auf dem o.g. iMac und
c) Mobile Safari, Opera and Chrome auf iPhone 5s & iPad 2 mit iOS 7.0.5 und
d) Chrome (18.0.1025.162) oder
e) Safari auf dem o.g. PC.

Was tun?

Danke!


Gruß,
Vlad

 

[MrMurphy]

Hallo

Was tun?

Für HTML / CSS gibt es festgeschriebene Regeln und sogenannte "Best Practices". Also bewährte Vorgehensweisen, von denen nicht grundlos abgewichen werden sollte.

Du solltest als Sprungziele keine inhaltsleeren Inline-Elementen wie das span-Element wählen.

Die Sprungziele sind für gefüllte Block-Elemente gedacht. In deinem Fall könnten das die h2-Elemente sein.

Also statt zum Beispiel

<span id="was"></span>

solltest du die id besser in das h2-Element

<h2>Yoga @ Yoga4People</h2>

einfügen:

<h2 id="was">Yoga @ Yoga4People</h2>

Gruss

MrMurphy

 

[Vlad Ghitulescu]

Hallo, MrMurphy!


Danke für deine Antwort!

Der id war in dem h2-Element. Ich habe ihn rausgeholt, als ich gesehen habe, dass beim Klicken auf z.B. WAS, der Sprung zum WAS-Abschnitt so gemacht wurde, dass der h2-Titel dieses WAS-Abschnittes gerade unter der navbar verdeckt war. :-(
Daher habe ich alle 5 id's (entsprechend der 5 navbar-Einträge) in eigenen span-Elementen eingebaut, die ich im code kurz vor den entsprechenden Abschnitten positioniert habe. Es war vielleicht eine schlechte Idee, hatte leider aber keine bessere.

Ich werde dies aber sofort testen: Ich trage die id's wieder in den entsprechenden h2-Elementen ein und gucke, wie die Navigation in Firefox & Opera ist. Wenn das ok ist, dann muss ich halt das Problem mit den verdeckten Titeln anders lösen.

Ich melde mich nach dem Test.

Danke noch mal!


Gruß,
Vlad

 

[Vlad Ghitulescu]

Hallo noch mal, MrMurphy!


Der Test ist unter

http://www.Ghitulescu.de/beta/index2.html

zu sehen.
Der einziger Unterschied zwischen index2.html und index.html ist, dass ich in index2.html die id's zurück in den h2-Elemente eingefügt habe. Die alten span-Sprungadressen habe ich nicht gelöscht, sondern nur auskommentiert.

Fazit: Jetzt ist die Navigation in Firefox und Opera wieder ok (iupee!) - nur wird die erste Zeile von der navbar verdeckt :-(.

Hast Du vielleicht noch ein Tipp, wie ich dieses Malheur reparieren könnte?

Danke noch mal!


Gruß,
Vlad

 

[Vlad Ghitulescu]

Hallo!


Da das ursprüngliche Problem gelöst wurde (kudos to MrMurphy!) werde ich den thread schließen und das neue Problem (das wenigstens gleich in allen Browsern ist! ;-) in einem separaten Thread posten.


Gruß,
Vlad

 

[MrMurphy]

Hallo,

das du einen zweiten Beitrag zum selben Problem eröffnet hast ist leider nicht so geschickt. Ich hänge jetzt ein bißchen blöd da, wo ich antworten soll.

Eine direkte Lösung mittels HTML und CSS gibt es wohl nicht.

Was Tronjer bereits geschrieben hat erscheint mir auch am sinnvollsten. Also den Überschriften mit den Anker-id ein padding-top mit auf den Weg zu geben.

Damit die Abstände zu den vorherigen Blockelementen nicht unschön groß werden kann denen ein entsprechender negativer margin-bottom mit auf den Weg gegeben werden.

Damit das flexibel gehandhabt werden kann und damit zum Beispiel auch auf ein Responsive Design reagiert werden kann, würde ich die beiden Anweisungen als Klassen hinterlegen und den betreffenden Elementen zu weisen, zum Beispiel

.anker {
   padding-top: 80px;
}
.vor-anker {
   margin-bottom: -80px;
}

Ich habe mal ein einfach strukturiertes Beispiel erstellt:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_02_15_ankernavigation.html

In deinem Fall befindet sich rechts neben der Überschrift mit dem Anker noch zusätzlicher Inhalt, meist wohl Grafiken. Die musst du natürlich auch entsprechend anpassen, eventuell durch eine dritte Klasse, falls das padding-top der Überschriften bei denen nicht passt.

Allerdings hast du unerfreulicherweise styles ohne zwingenden Grund direkt in den HTML-Quelltext eingebaut. Die gehen CSS-Anweisungen im head-Bereich oder in einer separaten css-Datei immer vor. Da musst du aufpassen, das du dich nicht verhedderst.

Gruss

MrMurphy

 

[Vlad Ghitulescu]

Hallo, MrMurphy!


Danke noch mal für die ausführliche Beschreibung. Ich probiere das gleich.

Die styles habe ich ins HTML eingebaut, nachdem ich die Zugriffszeiten mittels gtmetrix verglichen habe.


Vielen Dank noch mal,
Vlad