I have a fixed header followed by a list with various anchor tags. By default, the anchor will jump to the top of the browser. I need to offset this so it displays below the header.
I found a solution online, but became quite annoyed once I found out that yes it works but only in FF, not webkit.
So if anyone can figure out a nice way to do above that also works with webkit, I'd be so happy. It's one of the last bits of my UI I have left to finish and it's starting to frustrate me.
Have a look at Twitter Bootstrap - they have something similar I believe.
Second that picking up and tweaking a responsive framework like bootstrap is the way to go... I have and I've yet to regret doing so.
I've used one in my CMS platform ignitedcms (github).
You can also find prestyled bootstrap themes on TF for $10 one of them is sure to fit your existing theme with minor tweaks.
offtopic are you still writing java apps, it's been a while
I'm trying to do this as well. I found that you can set:
section
{
padding-top: 50px; /* or however the height of your header */
margin-top: -50px;
}The negative margin will offset the padding and it will all look correct and the anchor will work. But unfortunately it layers each section to be anchored on top of each other such that the text is no longer selectable when doing something like:
<section id="#a">A</section>
<section id="#b">B</section>
<section id="#c">C</section>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.