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
Related
When I create a relative link in HTML, Bot Workshops it links properly, but places the anchor at the top of the page, covered by a navigation bar. Is there a way to make it be lower so that the anchor is underneath the navbar?
If I understand it correctly, when the user clicked Bot Workshops, it should go underneath the navbar.
In your navbar, add an id. For example:
<div id="bot"></div>
Maybe you need to change the display of the anchor link.
a {
display: block;
...
}
You should add a padding-top to the #bot div (approx the height of the navbar plus some space). (This is based on some assumptions below)
I think your navbar is fixed?
If that is the case, the top of the #bot anchor div will be on the top-edge of the browser viewport. But the navbar will be obfuscating some of that content underneath.
This is more of a css/styling issue.
If you do add a padding-top, you might also want to make sure that value is responsive.
I have a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
I have an image on my site that I want to be set as it's own entity that I can freeform and adjust without it conflicting with other elements, I have it's CSS as
#backgroundImage{
position:absolute;
float:right;
top:0;
left:50%;
}
Using fixed and absolute positions cause the image to stack level to the Nav bar, but any other position will cause the Nav bar to jump right under the image I'm using (it's a picture of the moon) It is cutting off the image, text, but it's behind the Nav bar.
Things I have tried: Putting it inside of a I have no idea how that would work out, and I tried floating it contained inside of a div.
I have also read some comments about putting it on the z or y axis, but I have no idea what that means, I'm still reading about it or trying to find something to help me understand it.
This is for a school project, I am still very basic in this field.
Use a z-index of -1:
#backgroundImage {
z-index: -1;
}
Also, it's not recommended that you name elements with camel-case - use dashes instead.
If you want the element completely on it's own try using the element from html. However, then it won't necessarily stay in the background. Hopefully this is what you were looking for
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 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/