[Solved] CSS layout help needed.

[robinettmw]

Hey guys. I lurk like there’s no tomorrow, but I finally need some help.

I’m designing a website for a class project and I stretched the background image to touch the sides of the browser at any size. However, a horizontal scroll bar continues to show up. I’ve tried modifying every height and width option I can find in my style sheet and, what once was a page that validated perfectly is now full of issues. If anyone could help me out, that would be awesome.

The site is http://info202.info/mrobinett

Happy hunting.

[TheDoc]

Having a container with a width of 100% is what is throwing it off. Specifically, because you’ve also set padding (which counts as width) and left: 100px;.

If you go width:90%; and give it a margin:0 auto; to center it, that’ll work better.

(all of this is referring to the #Container div)

[robinettmw]

Hey Doc,

Thanks for the help. The #Container change definitely helped. I have another question for you, as well.

I wanted the title to remain all the way at the top as a fixed item on the page (basically a heading on the page, no different from simple text). When I add the title to the top, it produces a white bar below. I know I need to set a z-index to pull it on top, but how should I go about doing that?

I’m thinking, on the CSS:

.Centered {
height: auto;
width: auto;
position: relative;
z-index: 1 (or 2?);
}

Thanks for any help!

[jamygolden]

Code:

#Container{
height: 100%;
top: 225px;
left: auto;
position: relative;
z-index: 1;}

If you remove ‘top: 225px’ everything will move up to the top of the page (I think that is what you were asking)

And are you talking about the white bar below "NERD"? That is the only white bar I can see, and that is part of the image.

[robinettmw]

Hello!

As far as I know, when I created this image, it consisted only of the black bar with the word "NERD" stenciled in. I’m not sure why the white bar is showing up. Looks like it’s back to the image-editing room. Thank you! I’ll come back and update if there are still placement issues.

[robinettmw]

Sorry to keep asking for help-it seems I keep running into the same problems and my eyes aren’t picking up the improper code (after staring at it for hours)…

The title and content of the webpage have disappeared behind the background image. I have set z-indexes to pull them up front, but they are still not showing up. Any help from someone?

http://info202.info/mrobinett is the website.

[Author]

Posts