Jump to content
Stef's Coding Community
Sign in to follow this  
cowboyandy

Problem with 3-Column

Recommended Posts

Well, I'm getting a handle on css, I think, but I can't seem to get a 3-column page working properly. The problem can be seen on my test page here: www.renttexashillcountry.com/3columntest/testindex.html. The nav column intended for the right side is all the way on the bottom right.

 

I've attached the css - following the information in here, I just can't seem to get the dang thing right. The changes/additions I made to the css for this are "nav-right" and "info-column2".

 

I know it's something simple - can anyone give me a hint?

 

Thanks!

 

Cowboy

rthc.css

Share this post


Link to post
Share on other sites

The very first thing you must do is remove this line:

<meta name="author" content="Andrea Barnett for Killersites">

I don't write code like that.

 

Basically, your 3rd column is at the bottom because the sum of all your columns, including any margins and paddings, are more than the width of your container - so they simply don't fit.

 

To improve things:

 

Fix the doctype line - yours is incomplete and incorrect.

 

Then I'm taking out the JavaScript for now - fix the layout first, worry about slide shows later.

 

Now I'm going through the code and fix the alignment - that doesn't affect how a page is displayed, but the way it's now makes it hard to work with it. I'm also removing all font tags and anything else that should be handled via CSS. (examples: non-breaking spaces, line-breaks, target-=blank"s,

 

As I clean up your header, I notice that you have two div id="column1 - that does not work. IDs can only be used one time on a page. so I'm changing the first column1 to navigation - because it is really not a column anyway.

 

I'm also changing the name of your div id="nav-column' - that's also more a row than a column, and while the name itself has no effect on look or function, it's better to have one that's accurately descriptive. I'll go with link-list.

 

Then I'm removing the second body tag you have here - there should be only one. If you want to load a slideshow, you have to add the 'onLoad="runSlideShow()" to the one and only body tag right after the closing head tag. But since I'm not worrying about slide shows at the moment, I'm taking it all out.

 

Deleting all the table formatting - this is no place for a table, but applying a header tag and list tags instead.

 

I'm running out of time, and there is a whole lot more cleaning up left to do. I have not even begun to worry about properly styling navigations as lists, or addressed any text formatting - but this is a much neater outline to get you started:

http://aandbwebdesign.com/KSforum/cowboy.html

Share this post


Link to post
Share on other sites

Hey, Andrea!

 

Wow! You make students get right into brass tacks and figure things out! :wacko: I've been spending most of the day gittin' me some learnin'!

 

The very first thing you must do is remove this line:

<meta name="author" content="Andrea Barnett for Killersites">

I don't write code like that.

 

I honestly have no idea where this came from. I didn't type it, and it isn't on my original index, so I guess I must have copy/pasted something to work from. I sure wouldn't try to give you credit for my newbie attempts! It's gone - sorry.

 

Basically, your 3rd column is at the bottom because the sum of all your columns, including any margins and paddings, are more than the width of your container - so they simply don't fit.

 

High school diploma and college degree, and I can't add.....Found the error. Thanks for the heads-up!

 

To improve things:

 

Fix the doctype line - yours is incomplete and incorrect.

 

Did it - I think. Changed it to...<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. Is that correct?

 

Then I'm taking out the JavaScript for now - fix the layout first, worry about slide shows later.

 

Took it out - would like to put it back, though, once I have a better handle on the design.

 

Now I'm going through the code and fix the alignment - that doesn't affect how a page is displayed, but the way it's now makes it hard to work with it. I'm also removing all font tags and anything else that should be handled via CSS. (examples: non-breaking spaces, line-breaks, target-=blank"s,

 

OK, this is where you forced me to learn some more. I worked on the css and figured out (I think) how to get around most of them. Still had to use a few non-breaking spaces, and haven't been able to find information yet on how to get around the "_blank" target - I want links outside the site to open in a new window. Still looking.... :unsure:

 

As I clean up your header, I notice that you have two div id="column1 - that does not work. IDs can only be used one time on a page. so I'm changing the first column1 to navigation - because it is really not a column anyway.

 

Followed your lead and changed it.

 

I'm also changing the name of your div id="nav-column' - that's also more a row than a column, and while the name itself has no effect on look or function, it's better to have one that's accurately descriptive. I'll go with link-list.

 

Same thing here - it's been changed.

 

Then I'm removing the second body tag you have here - there should be only one. If you want to load a slideshow, you have to add the 'onLoad="runSlideShow()" to the one and only body tag right after the closing head tag. But since I'm not worrying about slide shows at the moment, I'm taking it all out.

 

Again, followed your guidance. We'll get back to it later.

 

Deleting all the table formatting - this is no place for a table, but applying a header tag and list tags instead.

 

Another learnin' thang! Corrected those problems with css - although I had a little problem with the "lists" part - think I got it, though.

 

Sure got more information than I had expected - thanks! Hope you'll hang in there with me some while I try to get this thing finalized and online. What's online is old and heavy-html - in fact, different page designs while I tinkered. But I'm not marketing it yet, so it's all good.

 

I've attached what I've accomplished so far.

 

Thanks again for pushing me into learning more - helps me keep my mind working! Hope to work with you some more - I promise I'll try to figure things out myself!

 

If I don't talk to you, have a great Turkey day!

 

Cowboy

 

I'm running out of time, and there is a whole lot more cleaning up left to do. I have not even begun to worry about properly styling navigations as lists, or addressed any text formatting - but this is a much neater outline to get you started:

http://aandbwebdesign.com/KSforum/cowboy.html

rthc.css

testindex.html

Share this post


Link to post
Share on other sites

He's working on it - it's nice to be listened to for a change :D

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...