I have a layout where the header section uses absolute positioning and when I click on an anchor
link in my content, the link takes me to the right place but it pushes my content up behind the header.
What is causing this and how do I fix it?
Here is the URL:
http://digitaldemo.net/joy/krippen-a-b-c/
Many thanks!
Cynthia
You have a 'overflow: hidden' on your #container style and your #content style. Try commenting those two declarations out and see if that helps.
Check z-index css property of the anchor tag as well as header tag.
Related
I have a fixed header in the top of my page and also I used anchors in angularjs. My problem is when I clicked anchor 1 the div jump in the top of the page and I cannot see it. The anchor is behind of the fixed header which should not.
How can I fixed this one. Thanks in advance.
I am currently referring to this plunker: http://plnkr.co/edit/0ZqAWjHZbTJCtlDL2qpu?p=preview
Website is: http://www.talons-guild.com/forums/
Please try to click the link on the left side that says "Home"--it does not work for me. Any idea why?
You can fix it by removing the z-index property from div#header on your CSS.
Because your div with ID of header is on top of it with a higher z-index, which essentially blocks it. Give your paragraph with class menu a higher z-index (and a position) and it will work.
The Header Div Container witch include bird size over the text and it z-index over it too so change size or z-index for item menu
<a style='z-index:10;' href="http://www.talons-guild.com/index.php">Home</a><br />
regard's
I have a layout like this: http://jsfiddle.net/MTWu5/
Centered page, with sticky header. Inside the header there's menu links to anchors in the page. My problem is when I click on them, I want the anchor to scroll just under the header, not behind it.
How could I do this??
First, i'd write the anchor that way.
<a name="anchor" id="anchor"></a>
If you don't use the close tag for the a element, no position style can be applied without missed up everything.
Then i just applied that style
#anchor{position:absolute;margin-top:-100px;}
It seems to works. Your layout is preserved, no margin. That solution works only if you work with fixed height. The margin top is the height of your header.
Hope that is what you were looking for.
Link to example jsfiddle
hai your problem is fixed "The path is: http://jsfiddle.net/MTWu5/2/
Please check out this fiddle: http://jsfiddle.net/dppJw/8/
I've used a pseudo-element for the body (also tried with html) and the overlay doesn't go all the way to the end of the document (try scrolling).
How can I have the overlay on the whole document?
Change position:absolute to position:fixed. This will cause the element to stay at the same location, even if the user scrolls.
Fiddle: http://jsfiddle.net/dppJw/9/
Note: Your current pseudo-element overlaps the body. Add z-index: -1 if you don't want the text inside the body to be selectable.
I am trying to create one advert that use both empty sides of the website content. So i add the advert image as a background on BODY tag. look nice. But the problem is to add a link to it. I start with onclick att on body, but them all site content become clickable. Also i try to use different z-index for body and the content div. Don;t work as well.
This the website i take the idea from. I just want to do some thing similar.
http://www.sport.co.uk/
Any help are welcome.
I would forget about the body background and use 3 div columns.
Other possibility would be to use absolute positioning in css and for new browsers you can make the div to stay on its position and not to scroll.