Weird Layout Quirks

[Robin]

I've been working on a new design for my links page the last couple of days, but I'm having a few weird issues with it. (Here's the link so you can see how the layout is behaving now.)

Issue #1 is the fixed bottom navbar not acting "fixed." Ideally, I'd like for it to stay in place at the bottom as the page scrolls, so that the page content looks like it scrolls just between the top navbar and the bottom navbar, but apparently it doesn't work that way? I've Googled like mad and not found any solutions that quite match what I'm looking for--but it could be I just don't know the right terminology. (Also have tried z-index settings with no luck.)

Issue #2 is the hover state of the links in the top navbar. The two leftmost ones on the navbar work as designed when hovered over, but the two rightmost ones don't. Really weird! Never seen this bug before, LOL

Issue #3 is the scrolling content scrolling in front of the top fixed navbar. A couple of my other sites do this too (see: Gifted)...playing around with z-index didn't fix this one, either. (I might be just herp derp when it comes to using z-index, LOL)

Also, I welcome any feedback on this layout--I'm trying some new hand-coded tactics and I'm still not sure if they look good or not. My main worries are that the pages are too long, too hard to scan through, or just visually overwhelming.

Thank you in advance! :D

[Lethe]

Okay, I just woke up and I'm not chatty, but I toyed around with this and I got it.

#1 You need position: fixed for both navbars; you forgot to do so for the bottom one.

#2 This happens because you can't actually hover the links; the div is buried beneath the img div. Fixed with z-index.

#3 z-index only works when position is set; you forgot to set position for the content div (at least I think that's what it is; I know position: static is the default, but I added it and then it worked). The other z-index lines had to be edited too; I set the img div to 0, content to 1, navbars to 2.

Here are the parts from the code I altered; I hope it works!

Code: Select all

#top {
background-color: #16271C;
color: #FFFFFF;
padding: 5px;
height: 50px;
text-transform: uppercase;
text-align: center;
font-size: 35px;
position: fixed;
z-index: 2;
top: 0px;
width: 99%;
}

#content {
text-align: left;
position: static;
z-index: 1;
width: 50%;
float: left;
color: #7CB68F;
}

#img {
color: #000000;
opacity: .1;
z-index: 0;
float: right;
font-size: 400px;
width: 50%;
text-align: center;
text-shadow: 2px 2px #16271C;
position: fixed;
top: 0px;
right: 0px;
}

#bottom {
clear: both;
background-color: #16271C;
color: #FFFFFF;
padding: 5px;
height: 50px;
text-transform: uppercase;
text-align: center;
font-size: 35px;
position: fixed;
z-index: 2;
bottom: 0px;
width: 99%;
}

For Gifted, set position: static and z-index: 0 to the content div, then add z-index: 1 to navbar.

[Robin]

@Lethe: Thank you thank you thank you ^O^ all of those fixes worked BEAUTIFULLY!

I never knew about position: static before--perhaps that's why z-index has never worked for me in the past. The more you know...* :D

(Also, I did try to use position: fixed; on the bottom bar before, but it ended up only showing 25px of the bar's 50px height and hiding half the text, too. The pesky img div was probably at fault there as well, LOL)

I know that was a huge pain to dig through all my (badly written) CSS, so I appreciate your work!! *HUGS*