School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,443
  • Replies: 826,070
  • Topics: 137,465
  • Snippets: 4,419
  • Tutorials: 1,148
  • Total Online: 1,539
  • Members: 92
  • Guests: 1,447

Welcome to Dream.In.Code
Become an Expert!

Join 300,443 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,539 people online right now. Registration is fast and FREE... Join Now!




Good way to layout a site?

 

Good way to layout a site?
Slice

1 Jul, 2009 - 10:38 AM
Post #1

New D.I.C Head
*

Joined: 24 Nov, 2008
Posts: 21


My Contributions
After coming across a website that had some fixed areas throughout its site, i decided to start making some new layouts that I've never really tried before. What are your opinions on some of the best ways to lay out a website? Here's the style sheet for one i've been working on:

CODE

body {
  margin:0;
  border:0;
  padding:0;
  height:100%;
  max-height:100%;
  background:#eee;
  font-family:arial, verdana, sans-serif;
  font-size:76%;
  overflow: hidden;
  }

#header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:120px;
  overflow:auto;
  background:#66aadd;
  color:#fff;
  text-align: center;
  }


#footer {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:60px;
  overflow:auto;
  text-align:center;
  background:#6688dd;
  }

#contents {
  position:fixed;
  top:120px;
  left:0;
  bottom:50px;
  right:0;
  overflow:auto;
  background:#fff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  }


At the moment there is a fixed area for the header and footer with some contents in the middle. I was thinking about adding a left column so that the contents of the website are in a box off to the right, and there is a header, footer and side-nav all looking as they are joined together.

What are your opinions on these types of layouts? good or rubbish? pros and cons?

This post has been edited by Slice: 1 Jul, 2009 - 10:39 AM

User is offlineProfile CardPM
+Quote Post


BetaWar

RE: Good Way To Layout A Site?

1 Jul, 2009 - 11:42 AM
Post #2

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
I have done those layouts for years. They work out pretty well, you have the side bar that you can add easy-to-see navigation on and other small things (affiliates, poll, logon form, etc.). The only cons I have found with them is that you have a smaller place for the content (unless the site is liquid - resizes to use the entire width of the browser window).

Overall they work pretty well, the only other main ones I have seen are 3 column sites (one on the right and one on the left of the content), and single column sites (using a navbar at the top for navigation - normally for blogs).
User is offlineProfile CardPM
+Quote Post

Slice

RE: Good Way To Layout A Site?

1 Jul, 2009 - 12:48 PM
Post #3

New D.I.C Head
*

Joined: 24 Nov, 2008
Posts: 21


My Contributions
I've been messing around for a while now (making a new site with a friend of mine. I was to use it for a forum and news site about computers and he is using part of it selling refurbed computers.)

Not written any php or made any graphics yet (and the name is just me messing about) so its just the layout we are trying to agree on. Here is one i've just made : http://www.freewebs.com/comeback-of-the-year/index.html

Its gone slightly off in IE but looks alright in Firefox, I'll probably fix that in a minute, working in %'s.

Yeah i do agree about the space issue for the contents, especially since Ive gone full border style.

Any suggestions?
User is offlineProfile CardPM
+Quote Post

hadi_php

RE: Good Way To Layout A Site?

1 Jul, 2009 - 08:42 PM
Post #4

D.I.C Regular
***

Joined: 23 Aug, 2008
Posts: 259



Thanked: 5 times
My Contributions
1 . choose a repeat background image that will enhance your site's interface.
2 . use div width height donnt use absolute position......[sometime its need]
User is offlineProfile CardPM
+Quote Post

neit

RE: Good Way To Layout A Site?

2 Jul, 2009 - 06:02 AM
Post #5

D.I.C Head
**

Joined: 13 Feb, 2009
Posts: 137



Thanked: 12 times
My Contributions
When your doing a layout for a site you will need to decide on either
a) 1 column site
cool.gif 2 column site with main content area on the right
c) 2 column site with main content area on the left
d) 3 column site.

What you decide to choose is whole on the content you will providing on
the side. If you have no need for alot small content areas on the sides
than prehaps a 2 column layout would suite best.

If you are going for a fixed width I tend to use 800px to 900px with no margins on the left and right and position the site centrally. Then go with
a 2 column layout with either the navigation across the top or down the
left side.

At the moment you site has the appearance of a 4 column layout and I got a scrollbar on the header and the main content area which you should not get.
User is offlineProfile CardPM
+Quote Post

sbromley

RE: Good Way To Layout A Site?

2 Jul, 2009 - 06:10 AM
Post #6

New D.I.C Head
*

Joined: 20 May, 2009
Posts: 42



Thanked: 7 times
My Contributions
Here is the best part about a website: You can do whatever you want!

You don't have to conform to any layout standards. Often times the best websites are the ones that don't. Do whatever feels right, looks nice, and has a logical flow for what you are designing. Make sure you bring attention to the main points of the site.

Beyond that you should feel free to play with and experiment.
User is offlineProfile CardPM
+Quote Post

xclite

RE: Good Way To Layout A Site?

2 Jul, 2009 - 06:27 AM
Post #7

LIKE A BOSS
****

Joined: 12 May, 2009
Posts: 629



Thanked: 13 times
My Contributions
banner
sidebar content
footer


is popular. I'm considering going more radical on my site's redesign once I get more experience with CSS/HTML. Innovative sites are always really cool.
User is offlineProfile CardPM
+Quote Post

gregwhitworth

RE: Good Way To Layout A Site?

2 Jul, 2009 - 07:11 AM
Post #8

(this).problem + "sucks";
Group Icon

Joined: 20 Jan, 2009
Posts: 1,131



Thanked: 82 times
Dream Kudos: 50
Expert In: HTML, CSS, Web Design

My Contributions
I mainly go:

BANNER
___________
NAVIGATION
____________
IMAGE/FLASH:NEWS UPDATES(or TWITTER)
____________
SUB NAV(on subs only | and it's a float so then the content can get the rest of their space back) | Content
____________
Footer
____________
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/8/09 01:31AM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month