I'm currently working on this website and have just noticed a problem with the div#top its covering the menu so you can only hover a link when just under the text. Does anyone have any idea how to fix this?
http://gridironstuds.com/
specify the height to the div#top{height:100px;} and reduce the size of logo image.
I used chrome inspector and simply changed this
div#top {position:absolute;}
to
div#top {position:static;}
and it fixed right up. Question though, why is your title in the body? It should be in the head of your html.
You've nailed the problem: the div#top is covering the menus. To fix this, shorten the element: change its height attribute to something smaller (looks like 88px is about perfect).
Try your page with <div id="top" class="centerContainer" style="height:88px;">.
If that looks good, add that to your div#top rule in your master.css.
You could try using a z-index to bring the menu above the header image. Then maybe the menu's background could be transparent so that it is still visible afterwards.
Related
I want to fix this menu bar at the top of the page, so that when user scrolls down, the menu bar continues to appear and the content flows into it. I tried everything, some help would be nice.
Heres the CSS and below the HTML:
CSS: https://www.dropbox.com/s/a0z0eov71wvha1c/style.css
HTML: https://www.dropbox.com/s/qyvb0oqhx8550ym/html.txt
Thank you!
Use the position: fixed css property. Then the position of the div is relative to the window's viewport rather than the content of the page.
You spelled position in #navigation wrong in your stylesheet, could that be the problem?
This is really easy if you correctly understand how the position attribute works in css.
I have a demo which should help you. You just need to understand how position:fixed is used to make the menu bar stick to top.
http://codepen.io/anon/pen/mvGqf
The website I'm building features a large background header image with a transparent fixed navigation bar on top. View it here: www.bedriftsdesign.no
Right now when you scroll the content scrolls over the header image just as planned, but when it reaches the navigation bar, I'd like it to disappear under the content, the same way the header background does, but it stays on top. To see the effect I'm trying to get, take a look here: http://www.googleventures.com/
Any idea on how to solve this? I've tried messing about with the z-indexes with no result yet.
Would be really grateful for some help.
Add to your <feature> tag that holds all the content, the following css:
feature{
position:relative;
z-index:10;
}
You should probably put it as an answer if it worked for you :).
It seems I'm having an issue with a design I'm working on. I'm using the kickstart HTML framework but I have a couple issues.
Firstly is that there is a very large white gap between the top of my page (logo, navbar) and the text.
Secondly I've tried to overlay the logo over the the navbar by using z-index. However it causes a negative horizontal scroll. I've tried to hide it by hiding overflow-x but it just doesn't seem like the best solution.
You can see the issues at http://jkr.me.uk/problem.html
Thanks,
John
Using position: relative on the logo makes it take up space that you're refferring to.
Instead, use float: right, or position it with position: absolute;
The issue with the white gap is the image. If you disable the position:relative property the image bottom will be touching the top margin of the fist header tag. A dirty fix for this would be something like margin-top: -200px on the first header or alternatively margin-bottom: -200px on the logo image. You could also use the method from the previous answerer.
As for the logo image overlaying the navbar, it does for me in both Chrome and IE 9.
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/
I havee been looking at the source and stylesheet for the following address to work out how you can make a ... be "surrounded" by a broken horizontal rule. At the page http://www.joindiaspora.com/ there is a navigation menu having an example of it. In the html source there is used no tag so I am thinking it must be done using the styling, but I can not work out how to do it. Ideas ?
Yes, it's with CSS, not an HR. There's a border-bottom on the #header DIV, and the #floating_nav is simply positioned over it. That nav contains a SPAN with a solid white background which covers the middle part of the border.