Question about tableless (CSS) design

[Dragoon] · May 16, 2006

I'm just starting to mess around with using CSS instead of tables, and I've run into a problem with the page I'm working on right now.

I'm trying to get the menu and main content areas to stretch to the bottom of the page. Can't figure it out. I'll post the code as it is now.

HTML (minus <head>, <body>, etc):

Code:

<div id="wrapper">
	<div id="header">
		<div id="headerleft"></div>
		<div id="navlocation">Nav Location</div>
		<div id="headerright"></div>
	</div>
	
	<div id="content">
		<div id="contentleft">
			<div id="menu">Menu</div>
		</div>
		<div id="contentright">
			<div id="main">Content</div>
		</div>
	</div>
</div>

CSS:

Code:

/* General layout */
A:link        { font-weight: normal; text-decoration: none; color: #000000; }
A:visited     { text-decoration: none; color: #000000; font-weight: normal; }
A:hover       { text-decoration: none; color: #000000; }

div            { font-family: Verdana, Helvetica, Arial; color: #000000; font-size:11px}

#body {
	text-align: center;
	min-width: 760px;
	margin: 0px;
}

#wrapper {
	width: 720px;
	height: 100%;
	margin: 0px;
	text-align: left;
}

#header {
	width: 720px;
	height: 54px;
	margin: 0px;
	text-align: left;
	background: url(images/template/topbg.jpg);
}

#headerleft {
    width: 131px;
	height: 54px;
    margin: 0px;
    margin-left: 0;
    margin-right: 0;
    padding: 0px;
	background: url(images/template/topleft.jpg);
	float: left;
}

#headerright {
    width: 100px;
	height: 54px;
    margin: 0px;
    margin-left: 0;
    margin-right: 0;
    padding: 0px;
	background: url(images/template/toplogo.jpg);
	float: right;
}

#navlocation {
	position: absolute;
	width: 489px;
	top: 23px;
	margin: 0px;
	text-align: left;
}

#content {
	width: 720px;
	margin: 0px;
	text-align: left;
}

#contentleft {
    width: 124px;
    margin: 0px;
    margin-left: 0;
    margin-right: 0;
    padding: 0px;
	background: url(images/template/menubg.jpg);
	float: left;
}

#contentright {
    width: 596px;
    margin: 0px;
    margin-left: 0;
    margin-right: 0;
    padding: 0px;
	background: url(images/template/bglight.jpg);
	float: right;
}

#main {
    margin: 0px;
    margin-left: 7;
    margin-right: 0;
    padding: 0px;
	text-align: left;
}

#menu {
    margin: 0px;
    margin-left: 7;
    margin-right: 0;
    padding: 0px;
	text-align: left;
}

Anyone know how to do this? Other comments the code are welcome as well.

sinkoman · May 16, 2006

I made my last site 100% in CSS.

It's allot simpler.

What I did, was I set object backgrounds to be the image that I wanted, then I made the items object settings (in a seperate file) set to where I wanted the object to be in relation to the other objects on screen.

As soon as I find my CD with the site, i'll show you the code.

But i'm pretty sure I didn't use DIV tags because of some positioning issues. Forget what I did use though, that site is like, 2 years old :/

EDIT: You know your wrapper is smaller than your body object, right?

[Dragoon] · May 16, 2006

sinkoman said:
...

EDIT: You know your wrapper is smaller than your body object, right?

I don't even remember why that's there... I think it's left over from my experimentation before I started working on the layout.

Edit: I fixed the problem by creating a 1x2000 image out of a slice of the page and setting it as the background for the page. It works, but I'm not sure it's the best way to do that.

sinkoman · May 16, 2006

[Dragoon] said:
I don't even remember why that's there... I think it's left over from my experimentation before I started working on the layout.

Edit: I fixed the problem by creating a 1x2000 image out of a slice of the page and setting it as the background for the page. It works, but I'm not sure it's the best way to do that.

If you want to accurately place your objects around the page, then you'll need to make a big "holding" object, that's basically an invisible border around your page.

Then, you'd use negative and positive X and Y relations to the objects borders to make adequate margins on your objects.

That's how I did my page.

Cole · May 16, 2006

I use a lot of PHP and split up my pages a lot so for me it does not really matter if I use a tables or if I use a css design. I mean my code never looked cluttered from my point if view since it was all split up. Anyway I always use percents when making a page so I know it will look exactly the same on every single computer.

I never had a problem with Tables or Css Div's.

sinkoman · May 18, 2006

Minerel said:
I use a lot of PHP and split up my pages a lot so for me it does not really matter if I use a tables or if I use a css design. I mean my code never looked cluttered from my point if view since it was all split up. Anyway I always use percents when making a page so I know it will look exactly the same on every single computer.

I never had a problem with Tables or Css Div's.

Bah, I hate tables.

My last site was all tables and it was so ****ing horrible. The code was horrendous, and trying to get to a certain section of the code was impossible.

Not to mention getting my dynamic content to FIT in the tables was a completely ****ing different story.

Switched over to CSS, and all the problems went away.

Well, except for IE parsing CSS pages like the devil.

Cole · May 18, 2006

The code was horrendous, and trying to get to a certain section of the code was impossible.

Thats why lets say I used my life side for navigation, had a banner and a body.
I would have 3 different pages plus 1 for every body page including the home page. One page to give the layout but it would inlude no navigation links or text on the body.
Then I would use a simple Include("Navigiation.php"); to add my links, and when someone clicks on the link it would then Include the appropiate body page.

Overall it becomes very easy to read because everything is nicely split up.

Not to mention getting my dynamic content to FIT in the tables was a completely ****ing different story.

Never really had a problem with that. Considering I wrote all PHP scripts myself and constantly debugging them and fixing them and getting them to work with a smile on their face might explain why....

Beerdude26 · May 18, 2006

sinkoman said:
Bah, I hate tables.

My last site was all tables and it was so ****ing horrible. The code was horrendous, and trying to get to a certain section of the code was impossible.

Not to mention getting my dynamic content to FIT in the tables was a completely ****ing different story.

Switched over to CSS, and all the problems went away.

Well, except for IE parsing CSS pages like the devil.

But FF usually rapes table-only sites D:
So I usually use tables and CSS together

[Dragoon] · May 22, 2006

I finally got around to finding a place to upload the files.

http://dragoon.50webs.com/

Septih · May 22, 2006

just had a quick glance at a site i made last year which did this. the main css seems to revolve around these:

Code:

html, body 
{

  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #60616F;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;

}

#back
{

  margin: 0 auto;
  width: 600px;
  background: #FFF;
  text-align: left;
  position: relative;
  min-height: 100%; /* For Modern Browsers */
  height: auto !important; /* For Modern Browsers */
  height: 100%; /* For IE */
  border-left: solid black 1px;
  border-right: solid black 1px;

}

#footer 
{

  width: 100%;
  background: #CCC;
  position: absolute;
  bottom: 0 !important;
  bottom: -1px; /* For Certain IE widths */
  height: 30px;
  border-top: solid black 3px;

}

and the html would be as follows:

Code:

<div id="back">
your main page content
<div id="footer">
footer stuff
</div>
</div>

and the footer would stay at the bottom of the page no matter the content height

EDIT: oops got the wrong footer class :<

Question about tableless (CSS) design

[Dragoon]

Vortigaunt

sinkoman

Party Escort Bot

[Dragoon]

Vortigaunt

sinkoman

Party Escort Bot

Cole

Newbie

sinkoman

Party Escort Bot

Cole

Newbie

Beerdude26

Party Escort Bot

[Dragoon]

Vortigaunt

Septih

Newbie

Similar threads