Tableless layout not behaving

stuffradio · December 31, 2007

I want to make both the nav and the content the same size... what did I do wrong to make it not set the height to 100% to both nav and content?

http://seropets.com/

That's the site, any tips?

wildteen88 · December 31, 2007

I find the 'faux columns' technique the best for simple two column'd layouts. Apply the attached image below as a background image for the contentcontainer div (#contentcontainer) and apply the following css to to it:

background-image: url(content_bg.gif);
background-repeat: repeat-y;

Now remove the all borders (except the bottom borders) and background colours from #nav and #content. Reload your page and you should now find that both the nav and content divs appear to be of the same height of each other.

[attachment deleted by admin]

dbrimlow · December 31, 2007

First, a little critique.

The Good:

What is absolutely great about your site concept is that it uses superb, simple, text-based semantic markup code.

THAT leaves you a LOT of room for dramatic, yet easy, design with little to no changes to the markup (most design changes can be done using an external stylesheet).

The problems:

1. Using an XHTML Transitional doctype with an ISO charset and served as text/html.

2. Using old HTML 3 deprecated markup level styling tags -

<center>, <b>, <u>, "<table cellpadding='0' cellspacing='0' width='600'>

. These have no business being anywhere near an XHTML doctype.

3. Using a table for layout when everything else is perfectly setup for table-less layout.

4. You have closing paragraph tags in you table cells (td) but no opening paragraph tags. You use a break tag for spacing which will not work in all browsers (break tags belong within a block level tag (p, li, etc) to literally break text within a block tag to a new line.

4. this does nothing:

"<style type="text/css" src="showhint.css"></style>"

The fixes are easy.

1. Lose the XHTML. Switch to HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

2. Change this:

"<style type="text/css" src="showhint.css"></style>"

to this:

<link href="showhint.css" rel="stylesheet" type="text/css">

Now the column issue.

Convert the table altogether to a simple class container within <div id="content"> like this:

.contents {
width:600px;
float:left;
margin:5px;
padding:0 5px
}

then drop it into your id content:

<div id="content">
    <div class=".contents></div>
</div>

Now, lose all heights in the css.

#nav {
  float: left;
  background: #e6e2e2;
  width: 120px;
  border-top: solid 1px #000000;
  border-left: solid 1px #000000;
  border-right: solid 1px #000000;
  border-bottom: solid 1px #000000;
  }
#content {
  float: left;
  background: #fff;
  width: 798px;
  border-right: solid 1px #000000;
  border-bottom: solid 1px #000000;
  border-left: solid 1px #000000;
  border-top: solid 1px #000000;
}

Now we clear the floats in the css - add this to your css:

#contentcontainer:after, #bottom-bar:after {

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

#contentcontainer, #bottom-bar{display:inline-block;}

/* Hide from IE Mac \*/

#contentcontainer, #bottom-bar {display:block;}

/* End hide from IE Mac */

Once you fix the html errors, remove the table, have both nav and content floating and properly cleared, the columns will be equal.

stuffradio · January 3, 2008

Thanks for that information

Will that fix it in firefox?

dbrimlow · January 4, 2008

Actually ... no.

You have a lot of repair, changes and then tweaking to do.

As a start, here is how I would BEGIN fixing your page.

Start with the text and don't even consider how it looks. Just get it all ENCLOSED within the appropriate block level tag of some kind (h2, p, ul li, dl dt dd. etc) and have it flow semantically.

Never leave text flappin' in the breeze and never EVER use br tags for spacing (that's what block level tags and margins/paddings are for).

Drop any tables and start the layout structure.

Here is a VERY rough version of how to begin (I made it "flexible" - initial font-size and layout widths in percentages):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Seropets - The Next Generation</title>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
width:99.8%;
color: #000;
padding: 0;
margin: 0;
text-align: center;
background-image: url('http://seropets.com/layout/default/images/background.jpg');
background-repeat: repeat;
}

a:link, a:visited {color:#227629}
a:hover, a:active {color:#009933}

ul, dl {margin:5px; padding:5px; list-style-position:inside}
li, dt, dd {list-style-type:none; padding:0.25em; margin:5px;}
ul ul, li li {list-style-type:disc}
li a:link, li a:visited, li a:hover, li a:active {list-style-type:none}
dt {font-weight:bold}
#header {
  background: #FFFFFF url('http://seropets.com/layout/default/images/header.jpg') left repeat-x;
  width: 100%;
  height: 110px;
  border-right: solid 1px #000000;
  border-bottom: solid 1px #000000;
  border-left: solid 1px #000000;

}

#userdetails {
  background: #e6e2e2;
  text-align: center;
  border-top: solid 1px #000000;
  border-bottom: solid 1px #000000;
  border-right: solid 1px #000000;
  border-left: solid 1px #000000;


}
#nav {
  float: left;
  font-size:90%;
  background: #e6e2e2;
  width: 20%;
  Margin:0 0 0 5px;
  padding:0 0 0 5px;
  font-weight:bold;

  }
#content {
margin:0 0 0 5px;
padding:0 5px;
  float: left;
  background: #fff;
  width: 73%;
  border-right: solid 1px #000000;
  border-bottom: solid 1px #000000;
  border-left: solid 1px #000000;
  border-top: solid 1px #000000;
}
#content ul {padding:0.25em; margin:5px;}
#content li {list-style-type:upper-alpha; font-weight:bold;}
#content li li {list-style-type: square; font-weight:normal;}
#contentcontainer {float:left; width:99%; background: #e6e2e2;}
#footer {
  background: #e6e2e2;
  float:left;
  width:100%;
  text-align:center;
  border-top: solid 1px #000000;
  border-left: solid 1px #000000;
  border-right: solid 1px #000000;
  border-bottom: solid 1px #000000;
}
#container {
width:100%;
text-align: left;
}


.contents {
width:100%;
float:left;
margin:5px;
padding:0 5px
}
#contentcontainer:after, #bottom-bar:after {

content:".";

display:block;

height:0;

clear:left;

visibility:hidden;

}

#contentcontainer, #bottom-bar{display:inline-block;}

/* Hide from IE Mac \*/

#contentcontainer, #bottom-bar {display:block;}

/* End hide from IE Mac */
-->
</style>
<!--[if lt IE 7]>
<style>#content {width:70%}</style>
<![endif]-->
</head>

<body>
<div id="container">

<div id="contentcontainer">

<div id="header"> </div>
   <div id="userdetails">
         <p>You aren't logged in! Please Do!</p>
</div>
     <div id="nav">
 <p>Nav</p>
 <ul>
 <li><a href="http://seropets.com/index.php">Home</a></li>
 <li><a href="http://seropets.com/news.php">News</a></li>
 <li><a href="http://seropets.com/board/index.php">Forums</a></li>
 <li><a href="http://seropets.com/login.php">Login</a></li>
 <li><a href="http://seropets.com/register.php">Register</a></li>
 <li><a href="http://seropets.com/toolbar.php">The Toolbar</a></li>
 </ul>

                 <hr>

<p>Stats:</p>
<p>Not logged in!</p>


               <hr>

<p>Help:</p>

<ul>
<li>Skills</li>
<li><a href='http://seropets.com/staff.php'>Staff</a></li>
<li>Contact Us</li>
</ul>           
<!-- closes nav --></div>


<div id="content">
    <div class="contents">
               
<h2>Seropets</h2>
               
<p>Seropets is a game that's being developed. It is a story based RPG Pet Site! What does this mean?</p>
<p>It means, each month there is a bit more information released on the events that happened before.</p>
<p>We don't think you can ever remember every thing that happened, hence the game will never end!</p>

<ul>
<li>The Plot
<ul>
<li>You're one of the only survivers after a huge earthquake... or so it seemed.
</li>

<li>
    As you explore more and more of the main land, you discover new and familiar
        faces ... some are your foe, and some are your friend.
</li>
<li>
    Each one of you have a few furry friends following you around; they're the
    only thing you can trust. Make sure you're loyal to them.
</li>
</ul>
</li>
<li>The Quest
<ul>
<li>
The Quest, should you choose to accept... is to try and find out what happened. 
</li>
<li>
    With each quest
    comes a reward. Sometimes a new skill will be discovered, or you might even
        find some of your family members!
</li>
</ul>
</li>
<li>The Skills
<ul>
<li>At the beginning you have 3 basic skills. </li>
<li>
    You can only use one type of skill at a time. 
</li>
<li>
    When you start to wander
    off(stop playing the game during the day or night) you can still gain some
    experience/resources!
</li>
</ul>
</li>
</ul>
<dl>
<dt>Mining:</dt>
<dd>Level 1-10: You can Mine some items that are surrounding your area at the time.</dd>
<dd>- Rocks(1-5): 10 Sero coins(SC)/bundle</dd>
<dd>- Coal(5-10): 15 Sero coins(SC)/bundle</dd>
<dd>Level 10-30: You can look for a gold mine, and mine in them.</dd>
<dd>- Gold(10-20): 25 Sero coins(SC)/bundle</dd>
<dd>- Rubies(20-30): 50 Sero coins(SC)/bundle</dd>
</dl>

<dl>
<dt>Lumber Jack:</dt>
<dd>You can use Lumber Jack to chop wood for your basic weapons. These things are handy to have, however they can be heavy at times.</dd>
<dd>Level 1-5: Shrubs can be used to make bows and arrows.</dd>
<dd>Bows: 5 Sero coins(SC)/bow</dd>
<dd>Arrows: 5 Sero coins(SC)/group of 25 arrows</dd>
<dd>Level 5-10: Oak can be used to make clubs</dd>
<dd>Clubs: 10 Sero coins(SC)/Club</dd>
</dl>

<dl>
<dt>Smithing</dt>
<dd>You can use Smithing to melt melt your materials together.</dd>
<dd>Level 1-10: Can smelt Rocks and Coal</dd>
<dd>Swords(1-5): 10 Sero coins(SC)/sword</dd>
<dd>Daggers(1-5): 10 Sero coins(SC)/dagger</dd>
<dd>Axe(5-10): 20 Sero coins(SC)/Axe - It requires level 10 Lumber Jack, and a pile of oak per Axe</dd>
</dl>

<h4>Development/Beta</h4>
<p>Beta Date: March 1st, 2008</p>
<p>I will ask for people to sign up for Alpha/Beta testing.</p>

<p>I am working hard to get everything running flawless. You can see all updates by going to the news page.</p>

<!-- closes class contents --></div>
<!-- closes id content --></div>
<div id="footer"><p>All material Copyright Seropets, Inc.</p>
<p>All rights reserved. Use of this site signifies your acceptance of the Terms and Conditions. </p>
<!-- closes footer --></div>

<!-- closes contentcontainer --></div>
<!-- closes container --></div>
         
</body>

</html>

It gives you all the tools needed to tweak this layout into how you want it.

The use of lists is a very powerful tool. After digesting this for a while, go to maxdesign.

After a few tutorials you will have this stuff down.

Good luck,

Dave

TheFilmGod · January 4, 2008

Actually ... no

.. and everything else ..

Although I encourage your preaching on good semantic code, I don't want anyone to freak out. Different sites require different level of semantic detail. For instance a school/government site needs to be optimized 100% while a personnal page doesn't even need to worry about.

I agree with you, but sometimes it isn't as important as other times.

dbrimlow · January 4, 2008

If I understand you correctly, I think you were trying to tell people that they don't HAVE to use semantic code if they don't want to. Which is true. It is optional.

Different sites require different level of semantic detail.

No site "requires" semantic detail. ALL sites SHOULD use semantic detail. 90% of sites DON'T use semantic detail.

I agree with you, but sometimes it isn't as important as other times.

It is and will always be not only important, but necessary ... the blind or sight impaired will tell you that (and they deserve to visit and understand websites, as well). THAT said, I admit that 70% of my sites are not semantically coded ... but every new site I start is.

But all that aside, I gotta say, whenever I come across someone who already THINKS and codes semantically, like stuffradio here, I will help and push them to continue doing so, and learn how to take advantage of it ... because they are far and away closer to "getting it" than most of the people using css.

bronzemonkey · January 4, 2008

I don't get anyone who suggests that writing semantic code is somehow more laborious. By saying you "don't have to worry" about writing semantic code for certain websites is making out that writing semantic code is harder than writing unsemantic code.

Starting with your html it is far easier to write a nice clean piece of semantic code than it is to write a mess of elements. The positioning, styling, debugging, and updating of every part of the site is made so much easier as well as having a document that makes sense (including to other people!) when there is no position or styling.

However, obviously a lot of people are working on websites from a business or practical perspective, and busting your balls to work out what a perfectly semantic class name for your div should be can get a little ridiculous. If you want to have an accessible image replacement technique then you might have to resort to an unsemantic empty span element in your markup (although not for much longer). These sorts of things are practical considerations...but I see them more as acceptable exceptions (in the current browser environment) that take place within a semantic document.

The way I see it: writing semantic code is about making things more simple, more clear, have meaning...it shouldn't be seen as more effort, an exercise in pedantry, a set of highly rigid rules, or a barrier to business goals. It makes sense if you care about delivering content on the internet, whatever that content is, whoever you are, and whoever you are delivering the content to.

In that respect, converting a table-based layout to non-table-based and keeping the code lean and meaningful is a worthwhile pursuit. Business/practical/time constraints might mean that a current project cannot meet all these goals but maybe the next one can once you are able to start a project from a position of increased knowledge and experience.

dbrimlow · January 5, 2008

LOL. What bronzemonkey said.

Another point that cannot be ignored is the impact of good semantic structure on SEO (search engine optimization).

Everyone wants to do well in search engine results. And aside from quality high end links TO your site, clearly well structured text, based on the standard document levels of importance, presented in an understandable hierarchy, is a google bot's meat and potatoes.

Anything that makes a search engine bot perform its spidering faster is going to directly impact with better bot indexing placement.

TheFilmGod · January 6, 2008

HOw can I test a page for good semantic code?

dbrimlow · January 6, 2008

At rankquest.com (SEO website) they have a lynx viewer.

Lynx is a text-only web browser that displays just the unformatted text (the way a search engine bot would see it). If your page is semantic, you should be able to make sense of the page by reading from top to bottom. It will include text based links, so you can click the "show links on the page", instead of just showing the links text.

This really helped me to get a handle on my site's text and how it is seen without graphics or layout.

[url="http://www.rankquest.com/tools/Lynx-View.php]rankquest.com lynx view tool

stuffradio · January 7, 2008

Thanks for your comments so far guys. I will be working on it some time this week to try and fix it up. This is actually my first fully coded tableless css layout. lol.

I find the 'faux columns' technique the best for simple two column'd layouts. Apply the attached image below as a background image for the contentcontainer div (#contentcontainer) and apply the following css to to it:

Code:

background-image: url(content_bg.gif);

background-repeat: repeat-y;

Now remove the all borders (except the bottom borders) and background colours from #nav and #content. Reload your page and you should now find that both the nav and content divs appear to be of the same height of each other.[/Quote]

I just tried what you did... and it stops half way on one of my pages. Any ideas?

TheFilmGod · January 7, 2008

At rankquest.com (SEO website) they have a lynx viewer.

Lynx is a text-only web browser that displays just the unformatted text (the way a search engine bot would see it). If your page is semantic, you should be able to make sense of the page by reading from top to bottom. It will include text based links, so you can click the "show links on the page", instead of just showing the links text.

This really helped me to get a handle on my site's text and how it is seen without graphics or layout.

[url="http://www.rankquest.com/tools/Lynx-View.php]rankquest.com lynx view tool

alright, I tested my site... what is a good semantic site vs. a bad semantic site suppose to look like.

And can you tell me the most important things to keep in mind when optimizing the site. I have spent almost two years trying to learn php/mysql/css/html and really want to stop learning and get moving on this project I'm doing. But I guess I can't afford to miss this information.

dbrimlow · January 7, 2008

I have spent almost two years trying to learn php/mysql/css/html and really want to stop learning and get moving on this project I'm doing.

LOL!! I HEAR THAT!

I have a feeling this damn learning nonsense is a black hole, patience sucking vortex from hell!

I totally STOPPED learning php and have concentrated on nothing but css and SEO for the past two years, as well ... at this point I am only beginning to be confident in my css skills.

And it wasn't until @ 3 or 4 months ago, when I stopped wasting my time with XHTML and started using html 4.01 strict that I feel like I have re-learned proper html.

Here is how I look at semantic markup ... if I turn off my css and the page looks basically like a well presented "word" document, then I succeeded.

Here is a good explanation at wikipedia:

http://en.wikipedia.org/wiki/Style_sheet_%28web_development%29

Sign In

Tableless layout not behaving

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information