[leeuniverse]

Hello....

I think I can basically fix basically everything else, but I'm having a problem with one issue, which prevents me from fixing everything else. I might just be missing something, but who knows.

I've got this template that I've made three columns.
Here is the original: http://www.leeuniverse.org/test2/html/index.html
Here's the three column version: http://www.leeuniverse.org/test2/html/index-12.html

The main problem is there is these two columns which aren't really actual columns, they are simply some sort of dead space. I've gotten rid of these before in other stuff I've messed with, but only after much adjustment, and not really knowing what I did. There is likely some size setting I'm missing or something that doesn't allow me to get rid of that dead space for both of those tables.




Also, I've somehow made the page so it's "off center", if you could fix that and anything else you see that is an obvious "code" issue, please do so. Since I'm on that issue, do any of you know how I can actually make the page slightly off center of the page and too the left? It looks kind of interesting being off center, so I'm currious, but as it is it's too far.

I appreciate any help you all can give..... Thanks

[tomdkat]

What are the chances of starting with a fresh three column layout? The severe table nesting is adding complexity I think is really not needed, not to mention the "bloat" in the HTML file size.

Peace...

[leeuniverse]

For a last resort I likely will.... (have done that before) But, was wondering if someone could fix it without too much trouble.

[tomdkat]

I started fixing it and got some of it cleaned up but given the trouble THAT was, I'm thinking a fresh, new layout would be best. I already started on one and almost have the header done. One of the problems with using a HTML tables based page layout is most people who use them don't realize the almost infinite nesting of tables really isn't needed. For example, in the page you've got now (not the three column one but the original one), the header "row" has 9 or so nested tables! This is completely unnecessary and adds soooo much complexity that it becomes damn near impossible to find and fix problems like you're experiencing now.

With the HTML tables based layout I started on today, I've got the header almost completed without nesting tables at all. Ideally, you'll want to use a CSS three column layout but I figured I would start with a three column tables-based layout and then we can go from there.

Peace...

[leeuniverse]

Sounds great..... Cleaning up most of the tables is a good thing. So, how are you doing it anyway? You just manually puting in the elements reshaping them etc.? Ya, but don't go too css crazy on me. I don't mind css for text stuff and whatever, but I don't do programing language, and that's basically what css is too me, when it's used to position stuff on the page etc.. I'm more visual. I like to see and adjust.

By the way, what is your editor? I'm using DreamWeaver, but I've found that it doesn't like css often times, the contents sometimes are all over the place. Expression Web seems to do fine with it. It seems to have come a long way as well. I'm thinking about switching to it.

Also, is there such a thing as a "visual" css webpage designing program?

One other thing.... Were you able to get rid of that Phantom spacing? How did you do it if so?

And again, for you or anyone else.... I have a proposal. I'm looking for someone who can do some ajax, php, mysql, and creating web forms, specifically like a multi-page one. I was thinking of using a tab content script to make a multipage order form, as well I have a couple of other things. Basically, I have or can have very quickly everything that is more or less already needed. I just need someone to put it all together, connecting the stuff, making it work, etc. with the necessary coding, some of which for example like the ajax/javascript I already have. Anyway, I'm looking for someone who would like to take on a small project for free who can do these things, and they can put it on their resume because it will seem like a big thing, when it wasn't so much. I'm basically setting up a business with nothing, but whomever helps me, will also when my business is going get to get the "paid" work to improve it's systems.

PM me if anyone is interested.....

[tomdkat]

Originally Posted by leeuniverse

Sounds great..... Cleaning up most of the tables is a good thing. So, how are you doing it anyway? You just manually puting in the elements reshaping them etc.?

Nope, not really. I'm just adding the elements you already had in their appropriate spots but using DIVs, as necessary, to position stuff instead of nesting tables. I'll post the HTML and a screenshot so you can see how my version looks.

Ya, but don't go too css crazy on me. I don't mind css for text stuff and whatever, but I don't do programing language, and that's basically what css is too me, when it's used to position stuff on the page etc.. I'm more visual. I like to see and adjust.

And if you use a web standards oriented tool, you can position elements and stuff and use CSS to do it AND without writing the styles manually. I'm using a GUI tool to position stuff using CSS and am not writing the CSS styles by hand.

By the way, what is your editor? I'm using DreamWeaver, but I've found that it doesn't like css often times, the contents sometimes are all over the place. Expression Web seems to do fine with it. It seems to have come a long way as well. I'm thinking about switching to it.

I'm using Kompozer and I do agree Expression Web is far MORE web standards compliant than DreamWeaver. Keep in mind, you should really be testing the pages in actual browsers rather than going by how things look within DreamWeaver.

Also, is there such a thing as a "visual" css webpage designing program?

I think this is more of a function of the design tool you're using. For example, when I add a table using Kompozer and assign that table a specific width and I center it, Kompozer generates CSS styling to accomplish that.

One other thing.... Were you able to get rid of that Phantom spacing? How did you do it if so?

Oh yeah, so far what little I have looks great! How did I do it? I chucked all of that nested table crapola and am keeping things much simpler. When I was playing with your three column version, I was able to get rid of those "repeated" columns, but not fully. I'll post a screenshot of that too.

Peace...

[leeuniverse]

Is Komposer the best tool to do what your talking about, or does Expression Web also do all that that one does (and more of course)?

Or what would actually be the best tool to do what your saying?
I kind of like that being able to design a page like a "true" wysiwyg.
That's why tables have been used for so long because div's simply didn't want to work right in past years. So, are you saying that things are finally staying in place and working right so I could switch to a real wysiwyg? Again, what the best? Thanks

Also, in order to create the new page, are you actually taking one element at a time and puting it on the page, and trying to position it correctly? Man, that sounds ruff.

[tomdkat]

Originally Posted by leeuniverse

Is Komposer the best tool to do what your talking about, or does Expression Web also do all that that one do (and more of course)?

Kompozer does some things well and other things not so well. It's free and I like it, so I use it. I haven't used Expression Web enough to know how much CSS it will or can use in its HTML generation by default but if you have access to it, it's pretty easy to find out.

Or what would actually be the best tool to do what your saying?
I kind of like that being able to design a page like a "true" wysiwyg.

I don't think ANY tool will produce desirable results without at least inspecting the generated HTML and possibly fine tuning it. I'm able to do a LOT with Kompozer without having to edit the raw HTML (and I haven't edited any raw HTML or CSS in my work on your page) but it likes to add blank lines to the HTML file, creating some enormous files (over time). Those lines I have to remove by editing the raw HTML file(s).

That's why tables have been used for so long because div's simply didn't want to work right in past years.

I don't think so. IMO, tables have been used for so long because people couldn't wrap their brains around CSS and CSS had some limitations in the beginning (from what little I understand). CSS2 has been out for a VERY long time now yet a lot of people still stick to using a tables-based layout. They are used to it and aren't really interested in or are "scared" of using CSS. This comes from someone who used to use tables for page layout and yes, I've done my share of nesting tables. I mean you really have to in order to make tables behave the way DIVs can.

So, are you saying that things are finally staying in place and working right so I could switch to a real wysiwyg? Again, what the best? Thanks

I'm saying I'm making some good progress on the page and my use of tables is minimal, basically the main three column structure is a table and everything else I'm adding, I'm doing without nesting any other tables (at least so far).

Also, in order to create the new page, are you actually taking one element at a time and puting it on the page, and trying to position it correctly? Man, that sounds ruff.

Well, considering it looks like the original page was designed in a graphics tool and "chopped up" into a HTML table for page layout, I'm having to wade through the original HTML to find the graphics images used for different portions and put those in the page I'm working on. Part of the reason it's taking so long is I'm working in my spare time. I should have something I can show you tomorrow.

Peace...

[leeuniverse]

I see.... hmmm....

It's funny you say that.... I was just looking through some stuff the other day, I think it was a paid template site. Looking at what "used" to be good looking templates some 10 years ago. And I laugh because with the invention of turning a graphic layed out page in Photoshop or whatever into HTML, the templates have become AMAZINGLY nice and professional looking. It's amazing how bad they were before, even good ones.

[tomdkat]

Yep, I agree you can create some AWESOME looking sites in a graphics tool but in my opinion, the graphics tool shouldn't be the "main" tool to create the site. The tool should be used to create the graphics that will be used for the site.

Check out CSS Zen Garden to see some really neat layouts. Those aren't mean to be "templates" for use by others but you can get an idea of what kinds of things can be done and without using HTML tables or a mostly "graphic driven" or "graphic oriented" design.

Here is a thread with a list of free website templates, some of which use HTML tables and some of which don't.

Peace...

[tomdkat]

Ok, attached are screenshots of the original page and the "simplified" version I came up with. The main differences here are:

• Far LESS use of nested tables
• More use of CSS styling for element placement

Keep in mind, this HTML is not polished and if I were doing this for a site I was actually going to deploy, I would move all of the inline CSS to an external stylesheet to make the HTML more readable, etc. The purpose of this is to demonstrate how the severe nesting of tables in the original HTML file isn't really necessary. My HTML DOES use a HTML table for the main, three column layout.

leeuniverse, in your case I would start with a "fresh" table with 5 rows and 3 columns and fill that in with your graphic content. I didn't use any of the "spacer" images and the text won't look right since I didn't bring over any of your styling for fonts, etc.

Here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Business Consulting template</title>
  <style type="text/css">
.nav img {
padding-left: 5px;
}
body {
margin-top: 0px;
padding-top: 0px;
}
.service-table {
font-family: Arial,Helvetica,sans-serif;
font-size: small;
margin-top: 10px;
}
.service-table p {
margin: 0px;
padding: 0px;
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
font-size: x-small;
font-weight: bold;
}
  </style>
</head>

<body style="color: rgb(0, 0, 0); background-color: rgb(118, 118, 118);" alink="#000099" link="#000099" vlink="#990099">
<table style="width: 705px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="background-image: url(home_files/header00.jpg); background-repeat: no-repeat; height: 323px; vertical-align: top; background-position: center top; text-align: left; width: 545px;" colspan="2">
      <div style="display: block; margin-top: 170px; margin-left: 25px;"><img style="width: 146px; height: 19px;" alt="Home" src="home_files/m1m00000.jpg"><br>
      <img style="width: 146px; height: 19px;" alt="About us" src="home_files/m2000000.jpg"><br>
      <img style="width: 146px; height: 19px;" alt="Services" src="home_files/m3000000.jpg"><br>
      <img style="width: 146px; height: 19px;" alt="Solutions" src="home_files/m4000000.jpg"><br>
      <img style="width: 146px; height: 19px;" alt="Contact Us" src="home_files/m5000000.jpg"></div>
      </td>
      <td style="background-image: url(home_files/bgr_top0.jpg); background-repeat: repeat-x; vertical-align: top; background-color: rgb(222, 226, 229); width: 171px;">
      <div style="display: block; float: right; padding-top: 10px;" class="nav"><a href="mailto:email@address.com?subject=Message%20from%20website"><img title="E-mail us" style="border: 0px solid ; width: 17px; height: 14px;" alt="mail" src="home_files/mail0000.jpg"></a><a href="#"><img title="Site map" style="border: 0px solid ; width: 17px; height: 14px;" alt="sitemap" src="home_files/sitemap0.jpg"></a><a href="home.html"><img title="Home page" style="border: 0px solid ; width: 17px; height: 14px;" alt="home" src="home_files/home0000.jpg"></a></div>
      <div style="display: block; padding-top: 55px; padding-bottom: 1.42em;">
      <input style="height: 10px;" size="15" name="search" value="SITE SEARCH"> <img style="width: 25px; height: 18px; display: inline; margin-left: 2px;" alt="go button" title="Search Now!" src="home_files/go000000.jpg"></div>
      <div style="background-image: url(home_files/bgr10000.jpg); background-repeat: repeat-y; display: block;">
      <div style="border-top: 1px solid silver; border-bottom: 1px solid silver; text-align: center; display: block; margin-right: auto; margin-left: auto; position: relative; width: 161px; height: 216px;"><img style="border-bottom: 1px solid rgb(153, 153, 153); width: 126px; height: 10px; display: block; margin-right: auto; margin-left: auto; padding-bottom: 10px; padding-top: 15px;" alt="News and Events" src="home_files/a1_news0.jpg"><img style="width: 120px; height: 46px; display: block; margin-right: auto; margin-left: auto; padding-top: 12px;" alt="Faces" src="home_files/a2_pic00.jpg">
      <p style="font-family: Tahoma,arial,geneva; color: rgb(112, 112, 112); font-size: x-small; text-align: left; display: block; margin-left: 20px;"><a style="text-decoration: none; color: rgb(112, 112, 112);" href="#"><span style="font-weight: bold;">December
10, 10</span></a><br>
Lorem ipsum dolor sit amet consectetuer adscing elit</p>
      <div style="text-align: left;"><img style="width: 64px; height: 5px; display: block; margin-top: 12px; margin-left: 20px;" alt="Read more" src="home_files/more0000.jpg"><img style="width: 120px; height: 1px; margin-left: 20px;" alt="divider" src="home_files/line_c10.jpg"><br>
      <img style="width: 92px; height: 7px; display: block; padding-top: 9px; margin-left: 20px;" alt="Read more news" src="home_files/a3_more0.jpg"></div>
      </div>
      </div>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; height: 4px; background-color: rgb(222, 226, 229);" colspan="3"><img style="width: 705px; height: 4px; display: block;" alt="divider" src="home_files/divider.jpg"></td>
    </tr>
    <tr>
      <td style="width: 185px;">
      <div style="border: 4px solid rgb(223, 228, 231); display: block; width: 185px; background-image: url(home_files/bgrzag12.jpg); background-repeat: no-repeat; background-color: white; height: 187px;"><img style="width: 117px; height: 13px; display: block; margin-top: 18px; margin-left: 15px; margin-bottom: 0px; padding-bottom: 0px;" alt="Our Services" src="home_files/a4_serv2.jpg">
      <div style="border-left: 1px solid rgb(204, 204, 204); border-right: 1px solid rgb(204, 204, 204); display: block; margin-top: 0px; padding-top: 15px;">
      <div style="border-left: 1px solid rgb(102, 102, 102); display: block; float: right; width: 105px; text-align: center;">
      <p style="margin-top: 0px; margin-bottom: 0px;"><strong>1.</strong><a href="#">Lorem
ipsu</a><br>
      <strong>2. </strong><a href="#">Consectet</a>
      </p>
      </div>
      <img style="width: 36px; height: 29px; display: block; margin-left: 15px;" alt="Logo" src="home_files/a5_pic02.jpg"></div>
      <div style="border-left: 1px solid rgb(204, 204, 204); border-right: 1px solid rgb(204, 204, 204); display: block; text-align: center;">
      <img style="width: 142px; height: 1px;" alt="divider" src="home_files/line_c22.jpg">
      <table class="service-table" style="width: 142px; text-align: left; margin-left: auto; margin-right: auto;">
        <tbody>
          <tr>
            <td style="width: 5px; background-color: rgb(205, 205, 205);">&nbsp;</td>
            <td style="background-color: rgb(234, 234, 234);">
            <p>&nbsp;<a href="#">LOREM IPSUM</a></p>
            </td>
            <td style="width: 32px; background-color: rgb(234, 234, 234); vertical-align: top; text-align: center;">&nbsp;<img style="width: 7px; height: 5px;" alt="arrows" src="home_files/a6_stren.jpg"></td>
          </tr>
          <tr>
            <td style="background-color: rgb(234, 234, 234);">&nbsp;</td>
            <td style="background-color: rgb(234, 234, 234);">
            <p>&nbsp;<a href="#">CONSECTETUER</a></p>
            </td>
            <td style="background-color: rgb(234, 234, 234); text-align: center;">&nbsp;<img style="width: 7px; height: 5px;" alt="arrows" src="home_files/a6_stren.jpg"></td>
          </tr>
          <tr>
            <td style="background-color: rgb(234, 234, 234);">&nbsp;</td>
            <td style="background-color: rgb(234, 234, 234);">
            <p>&nbsp;<a href="#">MAURIS URNA</a></p>
            </td>
            <td style="background-color: rgb(234, 234, 234); text-align: center;">&nbsp;<img style="width: 7px; height: 5px;" alt="arrows" src="home_files/a6_stren.jpg"></td>
          </tr>
        </tbody>
      </table>
      </div>
      </div>
      </td>
      <td style="background-color: rgb(220, 224, 227); vertical-align: top;">
      <div style="border: 1px solid silver; background-image: url(home_files/bgrzag_4.jpg); background-repeat: no-repeat; display: block; margin-top: 3px; height: 187px; background-color: white;"><img style="width: 267px; height: 13px; display: block; margin-top: 20px; margin-left: 22px;" alt="Welcome to our website" src="home_files/a7_welc1.jpg"><br>
      <div style="text-align: center;">
      <p style="display: block; float: right; width: 210px; margin-right: 5px; margin-top: 0px; padding-top: 0px; top: 0px; font-size: small;"><a href="" class="text"><strong>Lorem
ipsum dolor sit amet,</strong></a> et diam set consectetuer
adipi scing elit. tincidunt.quis, libero. Aenean sit.<br>
      <a href="#"><img src="home_files/a8_more1.jpg" border="0" height="5" width="178"></a></p>
      <div style="text-align: center;"><img style="width: 98px; height: 58px; display: block; margin-left: 20px;" alt="Photo" src="home_files/a8_pic01.jpg">
      <img style="width: 299px; height: 1px; display: block; margin-top: 20px; margin-right: auto; margin-left: auto;" alt="divider" src="home_files/a9_line1.jpg">
      <p style="margin-left: 21px; width: 297px; font-size: small; text-align: justify;"><a href="#" class="text"><strong>Lorem ipsum dolor
sit amet,</strong></a>
urna urna, varius et, diam interdum tincidunt quis. libero. Aenean sit
amturpis. </p>
      </div>
      </div>
      </div>
      </td>
      <td style="text-align: center; background-color: rgb(220, 224, 227);"><a href="#"><img style="border: 0px solid ; width: 163px; height: 187px; display: block; margin-right: auto; margin-left: auto;" alt="Best customer support" src="home_files/ban00001.jpg"></a></td>
    </tr>
    <tr>
      <td colspan="3" style="background-image: url(file:///D:/techguy/leeuniverse/home_files/bgr_dowp.jpg); background-repeat: repeat-x;">
      <p style="margin-top: 24px; font-size: small;" class="menu" align="center"><span class="menul">Home</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.leeuniverse.org/test2/html/index-1.html">About
Us</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.leeuniverse.org/test2/html/index-2.html">Services</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.leeuniverse.org/test2/html/index-3.html">Solutions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.leeuniverse.org/test2/html/index-4.html">Contact
Us</a></p>
      <p style="margin-top: 4px; font-size: small;" class="copy" align="center">© All rights reserved. Your company name.
2006. <a href="" class="copy">Privvacy policy</a>
| <a href="" class="copy">Terms of use</a></p>
      </td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>

Here is the HTML table I started out with:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
</head>
<body>
<table
 style="width: 705px; text-align: left; margin-left: auto; margin-right: auto;"
 border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td colspan="3"></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="3"></td>
    </tr>
  </tbody>
</table>
</body>
</html>

The browser screenshots are Safari 3.1.2 on Windows XP. I also posted a screenshot of the HTML table I started out with as viewed in Kompozer.

Peace...

[leeuniverse]

Could you upload all the files to rapidshare.com or something...?
Cause, you've changed stuff, and I want to see how it looks as the real deal.

Also, is your program able to make the links "relative"? Because all the links are shown as your hard drive path.

Looks interesting thanks.... Something to learn from. It might help finally starting to learn css a bit better.

[tomdkat]

Yep, I've created a ZIP file with my HTML file and the images I downloaded from your site. Everything should load in your browser off your local machine. I haven't had a chance to see how it looks in IE7 yet but it looks about the same in IE6 (Maxthon 2.1.1), Opera 9.51, Firefox 3.0.1, and Safari 3.1.2 on Windows XP.

Peace...