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
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 have a SPA application that is to display a fixed header at the top of the page. This is normally working except that there are some pages that, when scrolling down, some contents of the pages is shown on top of the header (I mean, from the layer point of view, not the location).
For instance, certain divs are hidden by the header, but buttons within those divs are shown on top of the header.
Is there a way to force the header to be always on top?
Thanks!!
I think its about z index property of your fixed header.. increase the z-index property set it to something like 9999 so that it is always above everylayer..
You can use z-index for this...
HTML:
<header></header>
CSS:
header{
z-index:9999;
}
The value of z-index should be higher than all other Divs
Like others said, your problem can be fixed with the z-index CSS property, but I think the root of your problem lies deeper than this. You need to check your components for the position CSS property, it is possible that you missed to add it (along with z-index) on some divs/components.
I have created a dropdown menu but the problem I'm having is that when I hover over the top navigation menu, the drop-down menu items are hidden behind the slider and content.
I looked online and trying to figure out the problem but cannot fixes.
Does anyone can hel me? Please if is possible explain really well.
Thanks in advance,
Helen
This is most likely down to the css z-index of the various elements on the page. Higher z-index values will position stuff on top of lower z-index values (providing they have a positioning value). However, you have to bear in mind that child elements cannot gain a higher z-index than their parent element, or at least you can assign the z-index to any value but they will always remain within the parent element at the parent elements z-index value. Most likely the slider on your page has a higher z-index than your header/menu bar.
Also, make sure you have position:relative, position:absolute or position:fixed or the z-index will be ignored.
If you're using a HTML list e.g. <ul> try adding a higher z-index to your list to bring it over everything else.
.dropdown li {
z-index:999;
position:relative;
}
I had a similar problem when working with my drop down menu and it showing up behind the slider. The slider z-index ranged from 1-5 so I made the z-index of the drop down much larger and it now displayed correctly.
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 have so much trouble figuring out where my mistake are. I want to build website with some divs on the right to each other...later there should be a horizontal navigation which automatically scroll to the right via anchors.
Anyways...each div has an image in the background and a container with some text. The navigation menu is fixed and is always displayed.
My trouble: Why is the text container not showing up on the first div?
Please see my fiddle on http://jsfiddle.net/pvvFR/
Thank you in advance for reading and if so...for answering
Is this something like that a solution
http://jsfiddle.net/pvvFR/7/
I've put a position absolute on you slider
and i've put your container div out of the slider
EDIT :
Look at this: http://jsfiddle.net/pvvFR/13/
everything is relative
And i've given a height to your slider, and position your container to a negative top
If I did got you right, if you use img to set a background (which I think is not good at all), you should exclude it from the common layer (for example position:absolute), so the content could overlay it. Your problem is not in text, but in image.
try to have each container a unique class and replace with for example and put the image to div background like
background:url('http://www.wiesenhof-online.de/upload/Chicken-Ribs-BBQ-quer.jpg');
http://jsfiddle.net/pvvFR/10/
Well, answer to your question about the REASON behind this happening is that Z-INDEX only works with positioned elements and as you are not positioning your image element that's why 'some text' is buried behind the image and its z-index doesn't take effect.
Check this. http://jsfiddle.net/pvvFR/14/