Can I do this using CSS?
In the past, I have been a heavy user of html tables and frames for anything to do with the display of my website.
However, as I am now trying to code the website for SEO, I am looking to use CSS for my layouts where I am currently struggling.
What I am looking to do is have 3 layouts as follows:
1. First layout with the following:
fixed height header at the top,
top menu just below the header,
left menu of fixed width,
main content area of a minimum width depending upon content
right menu of fixed width
footer either at the bottom of the screen or bottom of content depending upon amount of left menu, content or right menu
2. Second layout similar to the first without any right menu giving content more room
3. Third layout similar to the first menu with no left or right menus
First of all, is this possible using CSS?
Can the footer be fixed at the bottom of the screen/content?
Can the content be variable width and height?
Best Regards,
Ashish.
http://www.ebizss.com
http://www.ashishkulkarni.com
http://www.sapforbusiness.com
Clarification added May 30, 2008:
Hi all,
Thanks to all your answers, I have been able to get a layout that I can now use.
In the true community spirit, I have posted all my layouts on my blog at:
http://www.ashishkulkarni.com/archives/search-for-the-holy-grail-of-css/
Thanks for all your help. I am closing this question now.
Best Regards,
Ashish.
Good Answers (7)
You can certainly do these things with CSS. The Layout Gala below would be a great starting point for someone new to CSS. There are variable width layouts there. Most CSS layouts fit to the height of the content.
The footer can be fixed at the bottom of the screen. There is a few ways to do it. You can use fixed positioning which is easy to look up (homework for you). I like the method shown at A List Apart (second link).
Links:
Philip S
Director Owner at Minutecoach Limited
Best Answers in: Using LinkedIn (8), Starting Up (5), Blogging (3), E-Commerce (3), Computers and Software (3), Web Development (3), Internet Marketing (2), Business Development (2), Organizational Development (2), Small Business (2), Facilities Management (1), Freelancing and Contracting (1), Occupational Training (1), Events Marketing (1), Graphic Design (1), Customer Relationship Management (1), Sales Techniques (1), Writing and Editing (1), Planning (1), Non-profit Management (1), Project Management (1), Positioning (1), Career Management (1), Ethics (1), Enterprise Software (1), Computer Networking (1)
That would be a yes on all three.
Hints:
1) Take a leaf out of TypePad's book and double some of your divs, having an outer and an inner. This allows you to use the outer div for size/layout/positioning/background (pushing off the other divs) and the inner for spacing off your text/setting out basic text info (alignment, color, size) without getting into a margin/padding nightmare. I'd suggest for simplicity you zero all margins and padding as your first CSS rule. Crude I know, but a simple start point.
Your basic structure is going to be _something_ like this:
<body> *set text-align: center;
<div id="container"> *set width: to max you want 3 columns to be, use margin: 0 auto; to center
<div id="container-inner"> *color this if you want the background to go right down past the content and finish at the footer
<div id="header">
<div id="header-inner">
</div><!-- header-inner-->
</div><!-- header-->
<div id="menulist">
</div><!-- menulist -->
<div id="page">
<div id="page-inner">
<div id="leftcol"> *fixed width
</div><!-- leftcol -->
<div id="centercol"> *width set to auto (you should really make sure this comes first in the markup for SEO, but I digress)
</div><!-- centercol -->
<div id="rightcol"> *fiixed width
</div><!-- rightcol -->
</div><!-- page-inner -->
<div id="footer"> *fixed height, has clear: both; to be sure of clearing the columns
<div id="footer-inner">
</div><!-- footer-inner -->
</div><!-- footer -->
</div><!-- page -->
</div><!-- container-inner-->
</div><!-- container -->
</div><!-- body -->
Your footer div might change order in that list depending what you are trying to achieve visually.
Delete either (or both) of the fixed width columns and the center column will expand to take up the slack.
I'm sure someone will pop along with a better, leaner solution but when you are starting out using lots of floats for fluid layouts is really painful, especially if you end up trying to manage Internet Explorer's margin and padding handling in concert with everbody elses different interpretation.
Extra div markup as in the above (apologies if there are typos) takes _almost_ all that pain away.
Philip
Clarification added May 29, 2008:
N.B. For your minimum width you cheat and put in an image, a clear gif the width you want your minimum to be, don't struggle with the CSS for this.
Since you have a relatively easy layout, I suggest using Ryan Faits CSS sticky footer. (http://ryanfait.com/sticky-footer/).
For the rest it's relatively easy with a little homework. You may even want to cut up your pages into php includes (http://uk.php.net/include/) or asp includes (http://www.w3schools.com/asp/asp_incfiles.asp).
Not only will you be able to update your left and right column information across the entire site very quickly, but you can include / exclude the left/right columns as and when you want to.
Links:
Yes. If you have the similar code as follows,
//* CSS code begins.
#nonFooter
{
background-color: white;
position: relative;
min-height: 100%;
}
.html #nonFooter
{
background-color: white;
height:100%;
}
#content
{
min-height: 100%;
padding-bottom: 9 em;
background-color: white;
}
#footer
{
position: relative;
bottom: 0;
padding: 0px;
background-color: Silver;
width: 100%;
font-size: xx-small;
}
.siteTitleItem
{
/* background-color: #EEEEEE;*/
background-color: #7CA9F8;
color: Green;
}
//* CSS ends.
in the HTML
if you use #sitetitleitem for title or header and #content and #nonfooter for content and #footer for Footer, that will fulfill your requirement.
"Height" and "Position" are to be adjusted with the required values.
-Kathiravan
Yes this is possible.
Try using BlueprintCSS framework:
Overview - http://blueflavor.com/blog/2007/oct/24/blueprint-css-101/
Your html would be something like:
<div class="container">
<div class="span-24 last">Header</div>
<div class="span-24 last">Nav</div>
<div class="column span-6">Left</div>
<div class="span-12">Content</div>
<div class="column span-6 last">Right</div>
<div class="span-24 last>Footer</div>
</div>
Hope this helps,
Brant Messenger
Links:
Yassir Y
Visionary Entrepreneur and Web Designer Extraordinaire
Best Answers in: Web Development (2)
Yep, that is all possible with CSS. What I would suggest you however, is to try the various CSS Framework that are available on the net, for a start until you're more familiarized with CSS.
Here's a few :
1. YAML (http://www.yaml.de/en/home.html)
2. Blueprint (http://code.google.com/p/blueprintcss/)
3. YUI Grid (http://developer.yahoo.com/yui/grids/)
I would personally go for YAML :)
I've provided the link for the online generators for the frameworks specified above.
Links:
Definately a yes on your question, although I personally wouldn`t recommend using using Frameworks for your websites.
Although frameworks present you with a cut and paste way to make your website it`s best to do all coding by hand to truely learn and understand xhtml/css. But that`s just my humble opinion.
Check out the attached link for a great xhtml/css resource.
Links:
More Answers (10)
Hitesh L suggests this expert on this topic:
Rutger V
Independent Service Professional
Best Answers in: Starting Up (1), Software Development (1), Using LinkedIn (1)
Ashish,
Certainly the things you ask are possible using DIVs with STYLE parameters (defined in CSS) such as absolute and relative position, etc.
Please refer to the attached link for a good resource to get started on CSS.
Best of luck!
Cheers,
Rutger
Links:
Chaim E
Web Developer at Intuit
Best Answers in: Web Development (2), Search Marketing (1), Software Development (1)
Actually, one of those things you won't be able to do with just css - the main content area with a minimum width depending on content. You're going to need to set a width on any floated element. I'm not saying you can't have a flexible middle content element, but just that the browser won't be able to set a minimum width based on the content of that element. Added a couple great html/css references as well.
Links:
Mike H
Freelance Executive Producer and Projects Director / Project Manager for websites, web applications and multimedia
Best Answers in: Web Development (3), Customer Service (1), Freelancing and Contracting (1)
I've not looked at your needs in detail, but I'd suggest checking out the site below for CSS layout information and inspiration. Also, a Google search on "CSS layout" and "CSS
Links:
- http://www.alistapart.com/articles/practicalcss/
- http://www.glish.com/css/
- http://www.oreillynet.com/pub/a/javascript/synd/2002/03/01/css_layout.html
Clarification added May 29, 2008:
Sorry! Pressed the Return key by mistake... Here's what I meant to say:
I've not looked at your needs in detail, but I'd suggest checking out the sites below for CSS layout information and inspiration. I'd also recommend this book: The Essential Guide to CSS & HTML Web Design by Craig Grannell, who also writes excellent articles for .Net magazine.
Clarification added May 29, 2008:
Another excellent CSS resource for layouts is Stu Nicholls':
http://www.cssplay.co.uk/
Clarification added May 29, 2008:
And finally:
You might find Andreas Viklund's template andreas08 helpful:
http://andreasviklund.com/templates/
That's all folks!
Jim R
President, MCSD, FlamboroCanadaSystems
Best Answers in: Small Business (4), Search Marketing (2), Web Development (2), Business Development (1)
Hi...I too struggled a bit ago with the change from <tables> to css...and a great forum with css folks who "know" how to help is here below. DO however read the sticky notes at the top of each forum category to learn why and how to post a question and the pre-reqs for same...
Good help, if needed!
:-)
Jim
Links:
Cynthia W
Performing Arts Professional/Teacher
Best Answers in: Using LinkedIn (6), Career Management (5), Market Research and Definition (2), Customer Service (1), Regulation and Compliance (1), Education and Schools (1), Job Search (1), Accounting (1), Corporate Taxes (1), Staffing and Recruiting (1), Internationalization and Localization (1), Customs, Tariffs and Taxes (1), Criminal Law (1), Writing and Editing (1), Change Management (1), Equity Markets (1), Personal Investing (1), Wealth Management (1), Professional Networking (1), Green Products (1), Blogging (1)
You might also try the tutorials at w3.org. I learnt how to do all kinds of clever things, and the great thing is they have a box where you can type code and see the results instantly without messing up the code for your page!
Links:
The simple answer is YES! Every thing you want to do is definitely possible with XHTMl and CSS. Believe it or not it's easier than using tables. Once you learn the proper methods and syntax coding and management are much faster and easier. Suggestions for learning:
I am just starting to learn
http://www.w3schools.com/
I want to become a CSS Jedi
http://www.w3.org/TR/CSS21/
To answer your question simply: Yes, CSS and XHTML can do those things. I recommend, like others, the w3schools.com to learn more about CSS and XHTML. I also recommend the "Missing Manual" series from Pogue/O'Reily Press.
Something else you should consider is adapting a blogging platform and/or using a content management system to build your website. For example, a simple website with lots of dynamic content may (upon doing a sitemap ahead of time) show you that you only need three different page layouts: homepage, subpage, alternate subpage. Of course, this is the most basic idea and they get more complex from here.
I'm recommending using a content manager or adapting a blogging platform such as WordPress because you can let the system do the SEO for you. These systems are designed (depending on the program) to give you searchable permalinks for page entries, bread crumbs, site maps, integrated search features, and much more. These are all elements that improve searchability.
I believe using your time more productive in building on top of a content manager will provide you with a much more robust website that is also adaptable as technology changes. There is no need for you to build from the ground up when there are excellent resources to build robust dynamic sites while giving you back your ability to be designer and think of usability instead of how to make your code work for modern search engines. See what is out there and how it might work for you. I've provided three diverse options below that focus on different methods of building such sites.
Links:
Jamil Khan B suggests this expert on this topic:
Oh this is very easily done with css and is actually recommended especially for the variable width. The fixed footer can be done with CSS as well. With css you can make it to where each layout is selectable on your site with out having to make a new page with each layout.
Look into it CSS is the way to go.
