Neverside

A few CSS Problems

Well, I decided to help my friend out with his site and code his new layout. I'm doing it in full-CSS, and I have run into a few snags.

(Currently only works in Mozilla)
Layout: http://root.dbc-network.com/g5/htdocs/template.html

Problem #1: No matter how many tutorials I've read and how many variations I've tried, I can't get the left and right menus to span all the way to the footer. Need some help on that one.

Problem #2: If I take out the '#topNav a' property, the whole menu dissappears. Kind of wierd.

Problem #3: In the left and right menus, you'll see the menu headers: 'sign in' and 'today's events'. Both of those are sapose to have a background (nav_bg.jpg) as defined in the '.navbg' property. However the bg seems to be hidden for some unknown reason.

Problem #4: Umm... this problem is a doozy. Basically, look at it in IE and judge for yourself.

Help on any of these 4 problems would be great.

Thanks

___________________

I don't suffer from insanity; I enjoy every minute of it.
Unintended Theory | Cacrew v4

Originally posted by Kickboy:

Problem #1: No matter how many tutorials I've read and how many variations I've tried, I can't get the left and right menus to span all the way to the footer. Need some help on that one.

http://www.alistapart.com/articles/fauxcolumns/

Originally posted by Kickboy:

Problem #2: If I take out the '#topNav a' property, the whole menu dissappears. Kind of wierd.

On Safari I don't even see it with the property. Go figure.

Originally posted by Kickboy:

Problem #3: In the left and right menus, you'll see the menu headers: 'sign in' and 'today's events'. Both of those are sapose to have a background (nav_bg.jpg) as defined in the '.navbg' property. However the bg seems to be hidden for some unknown reason.

.navbg and #signin both have background properties. IDs have a higher importance so the styles from #signin overwrite .navbg.

Originally posted by Kickboy:

Problem #1: No matter how many tutorials I've read and how many variations I've tried, I can't get the left and right menus to span all the way to the footer. Need some help on that one.

or in this case, since your only using colors, create a <div id="bg"> or wahtever you want to name it, that holds the three columns, then give it a bg color of the two sidebars. so its like

Code:

<div id="bg">
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
</div>

with bg's css being:
bg{
background-color:#4a4a4a;
}

or wahtever color you use

___________________

scudworkz.com.

Quote:

http://www.alistapart.com/articles/fauxcolumns/

That was already pointed out to me. It wasn't of help.

coolaid: I'll toy with that idea. Thanks

___________________

I don't suffer from insanity; I enjoy every minute of it.
Unintended Theory | Cacrew v4

The idea coolaid gave you is the exact same thing in that article...

Look at the menu and content sections of this css i did for aP a while back, see if you can adapt it somehow.
http://actionplant.com/leaf/lando.css

Some Alternate Methods?

This post is going to address your column problem:

Have the entire body section (The section with all the columns, between your header and your footer) saved as one big background for the container div tag, then have the columns inside the container. Define the width for container class but leave the height empty and make sure the background can be tiled.

HTML:

Code:

<div id="container">
<div id="contents">More text here</div>
<div id="leftNav">text here</div>
<div id="rightNav">Text! wee!</div>
</div>

CSS:

Code:

#container {
background-image: url(<container background image here>);
}

#leftNav {
float: left;
}

#rightNav {
float: right;
}

Another way is to add the following to all columns:

Code:

height: 99%;

I hope this helps

___________________

Every complicated thing is just many simple techniques put together.

Last edited by mifuyne, July 17th, 2005 01:50 AM (Edited 1 times)

using xhtml/css, percentages in height dont exist

if it did, there wouldnt exist threads like this one

___________________

scudworkz.com.

Last edited by coolaid, July 17th, 2005 04:05 AM (Edited 1 times)

#4

I've figured out a fix, its not as good as I'd like but IE is such a pain because it figures width as width + left padding + right padding + left border + right border. So to fix it as I'd like, it would require a couple new classes and divs, which would just be a real pain. Not to mention, it would "clutter" the code up.

Anyhow, add the following code any place within your css:

Code:

/* The following only Ie will read, because it happens to be stupid that way */
* html #content {
width : 462px;
}

And now, to #main add

Code:

background-color: #262626;

That last bit will also fix problem number 1. So yeah, thats it.

Good luck with your other problems, although I believe they've all been covered at this point in time.

___________________

Bored? Join us at #Central on irc.Neverside.com

Thanks for the replies, guys. I think I got it workin.

http://root.dbc-network.com/g5/htdocs/template.html

Still doesn't work in IE, so I'm going to have to do some fun IE hacks to work that out.

Mostly just problem #1 was fixed, still got some work to do with the others.

___________________

I don't suffer from insanity; I enjoy every minute of it.
Unintended Theory | Cacrew v4