I've been working on a new version of my website, and to make it cleaner I installed a jQuery Dropdown menu, so the navigation looks cleaner.
The thing is, the links appear underneath the following content div, and I'm not sure how I can fix this.. I've looked into the z-index property, and I tried setting the position and z-index of both divs, but to no avail, they stay improperly stacked.
Here's the link of the page, so you can see what I mean :
http://minecrafteurope.com/?theme=compositio
Any idea on how I can fix this ?
Thanks !
Mark
Remove overflow: hidden; from .menu
Related
while designing my website (for my school project), I find that my image keeps being placed on top of my navigation submenu when activated. Any help with what to do?
Here is a visual picture of what I am talking about
On a side note: any suggestions on which styles to wrap the text into a div/p tag to align properly by the laptop?
If I understand your question correctly, then you want your image of the laptop to stay behind your navbar, right?
If so, then you have so use the z-index CSS property.
Reference for it here:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
The higher the z-index, the further forward it will be placed. An element with z-index:100 will be displayed on top of an element with z-index:99 and below.
Set the z-index of your navbar to be 100 or so, then you're sure it will always be in the front, like such:
.nav {
z-index:100;
}
Add this code to your navbar css, and it should help.
Good luck with your school project!
Best regards, Kevin
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
I'm trying to make an drop down menu, and it's not going well. My submenu is hidden behind my wrapper/page/content. I've tried setting an z-index to different elements, also tried giving my menu and submenu giving:
z-index: 999999;
But nothing works..
Can you guys help?
http://jsfiddle.net/L8Y3K/
please remove overflow:hidden; from header id it will solve your problem
http://jsfiddle.net/L8Y3K/1/
Try Select2 jquery plugin. it works with overflow: hidden
http://jsfiddle.net/jEADR/2442/
I'm having what I believe to be a simple problem but I'm not sure how to fix it.
Basically, while hovering over links on the menu, the drop-down menus "go behind" the other elements on my page. I've tried implementing float css but it doesn't seem to work.
If you visit my site just for a second and hover on the navigation menu you'll see what I mean.
How do you fix something like this?
Will appreciate any help.
Thanks.
In your css, set your z-index to a really big number like 9005, so it's above everything else on the page.
Like: z-index: 9005;
add z-index:9999; to the #page-bar css
it solves the problem (tested in chrome)
Here (on Chrome 10) the footer seems to be aligning with the side bar (too far to the right) instead of center like it's supposed to be.
I didn't edit the footer's CSS. I was editing the sidebar and the index when this happened, but it's so far down the page that I didn't notice 'til later, so I have no idea what the problem is.
Any suggestions welcome! Thank you :)
Tara
UPDATE: I've checked all the DIVs are correctly closing. Some were missing in the side bar, and that's fixed the problem on the front page but not on sub pages or articles. Now there is a black line appearing at the top (under the menu) that appears to be the #footer!!. I can't understand why it's there.
you wrapper #casing contains floated elements, which are not cleared for following elements.
#casing { overflow: hidden; }
This should fix it for modern browsers. I recommend this article for better understanding and other clearing solutions.
You need to clear your floated elements by adding clear: left; to your #footer css.