Fixed boxes, how?
 

Hello all! I'm still fairly new to the programming world and I'm still learning HTML. I have a pretty basic concept on how to use html, but there are something’s that I'm currently having problems with.

I'm trying to figure out how to create a fixed box that will go down the left side of my website from just below h1 down to the bottom of the page. I have been doing a lot of searching and cannot find what I'm looking for. Furthermore, I'm also wondering if it is possible to put this in a CSS too. Can anyone give me any helpful suggestions or a shove in the right direction? Thanks head of time!

In your CSS for the element you want to have fixed:
This will work in every modern browser, except Internet Explorer, because IE sucks when it comes to supporting web standards. Fortunately, one can exploit one of the many, many bugs in the IE rendering engine to make "position: absolute" elements behave like "position: fixed".
It's messy, I know, and not without it's disadvantages. However, until IE joins the 21st century along with every other major browser, it's the only option I know of outside even messier Javascript.

More on the hack here and here.

Arevos, thank you for the info. That's what I've been looking for. Both websites are excellent forms of info for this. Thanks a ton!

Make your <div> and in the stylesheet give it float:left, a small margin-right, and a small width. Be sure to use percents for the latter two so it works on different resolutions. For the <div> that the rest of the page is on, make it 100%-(the width of the navigation+margin). Of course this doesn't work in IE without some silly hack.

If you use XHTML 1.0 Strict, you'll need to set the height property of html to 100% as well, as it contains body. Apparently that's a feature, not a bug. :)

Thanks for the info guys. I just got done reading some info on that A Thing, even learned how to get around the IE problem from the websites Arevos gave me and HERE. Ooble I think I'm going to stick with XHTML 1.0 Transitional, seems to be the way to go by majority :D .

Well I finally finished what I started the other day. For my first build I don't think I did to bad. I'm open for suggestions and constructive criticism. If you like, check it out here. Thanks again for the help guys.

It's a good start, but I'd like to suggest a few things.

In your banner, due to all the contrasting colors, you need to put some sort of border on your font, so it doesn't blend in with the light colors. You would need to put the font in to the banner to do that (not just in the HTML). You can do that in Photoshop quite easily.

You have dark black font on a dark blue background. It makes the font very difficult to read, when that is what you want people to be looking at most importantly.

You should have some contrast to act as a backing on the text beside each picture, to separate it aesthetically from the pictures, and make it stand out.

<hr> seperators aren't really used anymore. It's much more effective to create a border using <div> tags, which allows you to control more specific attributes than a plain <hr>.

The navbar could use an unordered list (<ul>), combined with CSS, to achieve a more stable navigation with hover graphics and the works. Right now the idea of it being inside a table, and the font growing larger seems a little novice to me.

Other then that, it's a good start. If you're too busy to keep learning, there are always people who'd be willing to remake a website for low prices.

Sane, thanks for the suggestions and comments. I will start looking into what you had to say. The bgcolor is getting changed real soon, along with the #mainheader :D . If you get a chance send me a pm some info on what you mean by a ul, css, and hover graphics. Never to busy to learn ;) .

I would PM this, but it's useful stuff to know. Some other people might want to read this and pick up on it.

It's basically making use of lists in a different manner. I found out about this from the w3 website and ColdDeath (another member here).

If you'd like to see an example: www.jammersbase.com ... the nav-bar at the top is an unordered list. It uses "float:left" to make it tile horizontally. Although it can easily be modified to tile vertically by removing "float:left" and playing with the widths.

And here is the relevant stuff:

HTML

CSS

As you can see, the html is very straight forward. It's just a bunch of items wrapped in a <ul>. However, the CSS is where the tricky stuff comes in to play, and the magic occurs.

If you're interested in getting it to tile vertically, remove the "float:left", and set the width of each item to the same as the width of the entire navbar. It will require some playing around with, and some frustration. But I think it's worth it. It's all up to you. :)