Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Creating a 3 Column types layout ?
Old 01-10-2009, 02:11 PM Creating a 3 Column types layout ?
Experienced Talker

Posts: 30
Trades: 0
Hi

I didn't think I would need to ask this but I would love some advice on the best way to creat a 3 column layout templated website.

Basically I am looking to include as much textual keyword info on the front page (for the purpose of SEO & ease of use for visitors), with use of various menus i.e. topbar nav, left sidebar nav, right sidebar nav and a footer with 3 vertical nav lists (blog style). Not to say spamming, as someone else suggested on another forum, which frankly offended me.

So I just went ahead and created something like:

div container
div wrapper
div header
div content-wrap
div left-sidebar
div central
div right-sidebar
div bottom
div footer

The issue I am having is do I position the left-sidebar/central/right-sidebar inside the content-wrap using :

1. Something like

div content-wrap{ width:900px}
div left-sidebar{ float:left; width:200px}
div central{ margin-left:200px; margin-right:200px}
div right-sidebar{float:right; width:200px}

or

2. position:relative

div content-wrap{ width:900px}
div left-sidebar{ margin-left: 0px}
div central{ margin-left:200px; width 500px}
div right-sidebar{margin-left: 700px; }

this is of course simplified not allowing for padding etc.

or is there a better way?

They both kind of work ok, but I want to seperate the site into php templates. So that I can use the right-sidebar on some pages and not on others. but change the left-sidebar.php and its altered on all pages.

The site s going to be around 100 pages, and frankly keyword crazy - I am not a fan of 3 column layouts at all, but needs must.....

Hope that all made sense.

Thanks

Ash
acknowledged74 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 01-10-2009, 04:19 PM Re: Creating a 3 Column types layout ?
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Overuse of positioning will cause you headaches. The only possible need for positioning for your examples would be on #wrapper and perhaps #content-wrap. Otherwise, use the floats.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 01-11-2009, 07:22 AM Re: Creating a 3 Column types layout ?
LBD
Novice Talker

Posts: 10
Trades: 0
LadynRed, that's not quite true. I have compared a standard 3-column layout being fully position based, with one that where float based, they where about equal in sizes, only 1-10 bytes difference.

The only dissadvantage is when working with headers and footers, where float based layouts would be a better choice due to better browser support, and that goes for 3+ equal height column layouts as well.
LBD is offline
Reply With Quote
View Public Profile Visit LBD's homepage!
 
Old 01-11-2009, 05:55 PM Re: Creating a 3 Column types layout ?
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
I guess you haven't tried doing a LOT of positioning and having to deal with IE's problems, particularly with position absolute. I see way too many newbies using positioning on everything and it just tends to complicate things. Yes, you can do all position-based layouts, but I would definitely NOT recommend it to anyone who is not very well versed in CSS and cross-browser compatibility.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 01-12-2009, 12:31 AM Re: Creating a 3 Column types layout ?
LBD
Novice Talker

Posts: 10
Trades: 0
I don't see the problem with using positioning, neither relative combined with floats or absolute. And, i would certainly not say that many newbies use AP for everything, actually many newbies wouldn't even know to apply the relatively positioned container technique, rendering their use of Absolute Positioning very limited.

As for cross-browser compatibility, i can't say its much more of an issue then when dealing with floats, and that's only when we target outdated browsers such as IE6 and earlier, all updated browsers works as intended.

Some web designers have even gone as far as to say floats where more flexible, which would only be the case when blindly supporting older browsers. You likely want to ditch support for such browsers, to enable features such as true min-width, and png alpha transparency without having to apply hacks anyway. Transparency is also very likely to become increasingly more popular with web graphics designers and/or web designers, as the web designer figures out how to make full use of it.

Creating a 3-column layout which works in all browsers, can be done equally easily as using AP, with about the same coding required, it more or less depends on what you want done, and that's only from my current experience.

For example in my experience, layouts with a footer are harder to deal with when working with pure AP, you either need to stick it at the bottom of the center column or do without. But as layouts with a footer that spans over multiple columns are quite popular for some reason (maybe because they are hard to make), float may be a more suitable choice.

This is only because the positioned columns are removed from the normal flow, so that the wrapping container stays collapsed, there might be a solution to this, its however not known to me yet.

In a float based layout, we got 2 options as of how to keep the footer at the bottom of the highest column, which I'm making an example of right now. :-)


But anyway, that's just in my experience, maybe someone else has found a solution to the footer problem in AP layouts.


But to give an answer on the post, i would assume that keeping the Content column before the left and right columns, would give search engines easier access to the content, without polluting it to much. This is both achievable in AP and float layouts.

The Content column would still be centered between the left and right columns visually, but would be placed before in the code.

As for keywords, its a good idea to link your pages, both for users and search engines, so having lots of content links to other internal pages would be good.

Instead of me debugging the suggested css, try to check out the links in my sig, there should be some of the best examples. Even though i doupt that the placement of the center column in the code wold matter much in practice, some of the layouts has been constructed that way, including the float based equal-height column layout.

It is more obvious how to do that in AP based layouts, so that may be why some suggest it as an advantage. Some playing with the floats, and use of relative positioning however gets it working in float layouts as well.
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE
LBD is offline
Reply With Quote
View Public Profile Visit LBD's homepage!
 
Old 01-12-2009, 12:39 AM Re: Creating a 3 Column types layout ?
LBD
Novice Talker

Posts: 10
Trades: 0
Hay, actually it might be possible in percentage based layouts. By positioning the footer at the bottom of the center column minus the usual height of the footer, with a calculated width defined in percentages.

So if we have a center of 75% width, well its just a matter of calculating the width, and I'm to busy for that now.

Such solutions just come when you less ecpect them, i might try to do an example and post it with my other layouts some time.
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE
LBD is offline
Reply With Quote
View Public Profile Visit LBD's homepage!
 
Reply     « Reply to Creating a 3 Column types layout ?
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.24022 seconds with 12 queries