Nav goes whole way down webpage and displays between elements. What do? - html

as you can see the red nav seems to poke out between elements, it looks terrible.
How can I fix this? I've been doing web dev for a week so hoping a veteran can help!
If anybody wants to see the code just ask, I'm having problem posting it directly on here..
Thanks

In your case to bring nav in front of all the elements you can give it z-index:-1 and position:relative.
Also refer to this fiddle.Hope it may help you.
http://jsfiddle.net/Xb2UT/4/

Related

<a> link tags on site shifting around on click?

Our whole site (running bootstrap v3) has an issue with link tags where when clicked, it sometimes doesn't visit the page on that first click and instead it shifts slightly down and to the left, pushing other elements with it.
Example:
Before click on tag
After click on tag
I've tried using Display: block; and Display: inline-block; but that hasn't helped. There is no issue if I were to replace these as tags (nothing shifts around), but I shouldn't have to use tags.
I've never encountered this issue before so if anyone has dealt with this or might know what could be causing it, any help would be much appreciated!
Thanks in advance
Try display:block on a:active. define definite height and width to links. It is hard to determine the issue since you haven't posted any code, but I am sure this will fix it.

Show current div sidebar

a customer want this little thing on his Webseite.
But i have no idea how this thing is called...
it showes the current div on a fixed sidebar
Can someone help?
best regards
https://imgur.com/0MiqZrn
it's called ScrollSpy.
i guess this article could be helpful.

Space between two things on website

I'm kinda new to coding in html and css so I really need help.
I was wondering how i could make space between two things
like this: http://prntscr.com/6vo7lz
in this http://prntscr.com/6vo7x7.
I really need help, if someone needs more information to solve the problem please just comment the question.
Thanks in advance.
Sorry for bad english, I'm swedish.
From what I get from the two pictures you are trying to get padding in between to HTML elements. You can accomplish this easily by using CSS.
Try adding this to your CSS: `.header { padding-bottom:20px; }
This will tell all the HTML elements below it to move 20px below it.
Hope this helped!

Basic CSS Menu Not Working -- Something is Conflicting?

I'm not doing anything fancy. And I've double and triple checked my code and tried various things. I have no idea why the dropdown is getting cut off. What is going on here?
http://nbkclientsite.fuzzpopstudio.com/
Hopefully someone can help.
you have overflow:hidden on your menu-themainmenu-container remove that and it works.
Have you checked you z-index for the drop down and the container that is overlapping it? I don't have access to a decent browser ATM, at my 'day' job... but it looks like the z-index is simply off.

How to create a horizontal navigation in HTML/CSS above an image?

in my header I've got a large image. Above that image I want to place my navigation.
The clue about it: The ul-Navigation-element got a gradient background. But if I hover an li-Navigation-Link I would like to display the underlying image! (Hope that's clear? Otherwise I'll do some photoshop to demonstrate) This should be flexible, meaning not to give each li-Element a specific snippet form the backgroundimage.
I would prefer a JS-solution instead of a messy markup. But I appreciate every possible idea you have on your mind. Maybe I'm just overlooking the most obvious and easy solution..
Best regards (:
Here is an image of what I tried to descripe. Hope it helps:
http://s7.directupload.net/images/110226/pv4v4c5r.jpg
There's no need for JS to do this, simply make it so that when you hover over the li-Navigation-Link, the element doesn't have a background attribute set.
This will create the 'transparency' that you want to achieve.
you can use background:transparent for a:hover. This will show the background.
(for internet explorer you could use filter:alpha(opacity=100) );
Here an example: http://jsfiddle.net/3C9sZ/2/
I just solved my problem with javascript/jquery. It can be found here http://jsfiddle.net/QwJKY/.