[forum] link naar post met fixed header, post deels leesbaar

[Equator]

Hoi

Ik heb na de laatste iteratie meteen de fixed header aanstaan.

Nu merkte ik vanmorgen (en eerder ook al) dat ik met een link naar een post de betreffende post niet helemaal zag omdat deze deels achter de header staat.

Ik werd via een topic report (klik) verwezen naar klik

En dan zie ik:


OS: Windows 8.1
Browser: Chrome 36.0.1985.125 m

Ik heb het nog niet getest met een andere browser, zal ik zo even doen.

Met Internet Explorer 11 exact hetzelfde resultaat..

[ Voor 4% gewijzigd door Equator op 11-08-2014 08:20 ]

[rob_erwt]

Dat is een van de nadelen van een fixed header: een directe link springt naar de juiste anchor op een pagina en daarna wordt de fixed header er over heen geprojecteerd. Dan krijg je dus dat effect.

Naar ik begrepen heb, is dat nogal lastig op te lossen. Als workaround kun je een stukje custom css (met dank aan NMe) gebruiken dat in de meeste gevallen werkt (ik heb het zelf ook! ):

code:

/* fixed header anchor link fix */
a[name] { display:block; padding-top:50px; margin-top:-50px; }
#messages a[name][href] { display: inline; margin: 0; padding: 0; }

[Equator]

Dat fixt het inderdaad.

Maar kan dat niet voor iedereen met een fixed header ingevoerd worden? Of wordt die controle pas later uitgevoerd..

[Hero of Time]

rob_erwt schreef op maandag 11 augustus 2014 @ 08:42:
Dat is een van de nadelen van een fixed header: een directe link springt naar de juiste anchor op een pagina en daarna wordt de fixed header er over heen geprojecteerd. Dan krijg je dus dat effect.

Naar ik begrepen heb, is dat nogal lastig op te lossen. Als workaround kun je een stukje custom css (met dank aan NMe) gebruiken dat in de meeste gevallen werkt (ik heb het zelf ook! ):

code:

/* fixed header anchor link fix */
a[name] { display:block; padding-top:50px; margin-top:-50px; }
#messages a[name][href] { display: inline; margin: 0; padding: 0; }

Waar is regel #3 voor nodig eigenlijk? Want ik heb die niet in mijn Custom CSS staan (voor iteratie 55 had ik zelf met CSS een fixed header gemaakt met dezelfde fix als regel 2). Is het voor de FP?

Overigens, als fix, kan je niet bij de optie deze CSS laten toevoegen, desnoods via JS?

[Equator]

rob_erwt schreef op maandag 11 augustus 2014 @ 08:42:
Dat is een van de nadelen van een fixed header: een directe link springt naar de juiste anchor op een pagina en daarna wordt de fixed header er over heen geprojecteerd. Dan krijg je dus dat effect.

Naar ik begrepen heb, is dat nogal lastig op te lossen. Als workaround kun je een stukje custom css (met dank aan NMe) gebruiken dat in de meeste gevallen werkt (ik heb het zelf ook! ):

code:

/* fixed header anchor link fix */
a[name] { display:block; padding-top:50px; margin-top:-50px; }
#messages a[name][href] { display: inline; margin: 0; padding: 0; }

Met deze CSS code is dit probleem wel opgelost, maar heb ik een ander probleem.

De navigatie knoppen bovenin een groot topic (meerdere pagina's.) werken dan niet meer. De 'mouse over' werkt niet meer en klikken doet ook niets meer..
Haal ik de CSS weg, dan werkt het weer zoals het hoort, maar is mijn eerste oplossing weer ongedaan gemaakt

Edit: Ik kan dat echter nu niet meer reproduceren.. NU lijkt alles gewoon te werken..

[ Voor 4% gewijzigd door Equator op 14-08-2014 10:45 ]

[Hero of Time]

Equator schreef op donderdag 14 augustus 2014 @ 10:42:
[...]

Met deze CSS code is dit probleem wel opgelost, maar heb ik een ander probleem.

De navigatie knoppen bovenin een groot topic (meerdere pagina's.) werken dan niet meer. De 'mouse over' werkt niet meer en klikken doet ook niets meer..
Haal ik de CSS weg, dan werkt het weer zoals het hoort, maar is mijn eerste oplossing weer ongedaan gemaakt

Edit: Ik kan dat echter nu niet meer reproduceren.. NU lijkt alles gewoon te werken..

Mocht 't weer gebeuren:

Cascading Stylesheet:

#forumheading { 
    position: relative;
    z-index: 1;
}

Zorgt ervoor dat 't hoger ligt dan andere onderdelen die er mogelijk overheen vallen met margins. Als 't niet werkt, dan de waarde verhogen.

edit:
Kleine correctie gemaakt, position: relative is nog nodig, anders werkt 't nog steeds niet.

[ Voor 7% gewijzigd door Hero of Time op 14-08-2014 12:15 ]