18 replies [Last post]
purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

So, here's the page I did some work on to convert to tableless. I had every intention on converting, but I couldn't figure out what I was missing, so I gave up. I need overview, spacer, and products divs to all be side by side. The spacer div should be 100% of the height.

page containing no tables (please ignore the pricing tables inside of the products div :whistle: ):

http://novavisioninc.com/pages/prd_custom_security_tape.php

page it should look like:

http://novavisioninc.com/pages/prd_custom_security_tape.html

Content should be the same or similar on both pages. Also, should I put the navbar in its own div? The "Bookmark our page" button falls to the next line in IE. In firefox, the entire thing isn't centered. Dreamweaver automatically creates navbars in a table. I guess there's no way to overcome that... Hope I didn't miss anything!

Thanks for all the help,
Scott

purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

converting to tableless!

I reorganized the css since I had thrown everything together on the fly. Redownload it if you wish. Wink

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

converting to tableless!

Its a basic two column layout. You should be able to google to find lots of those. There are some here.

there should be no need for a spacer div in a CSS layout.

to centre a div within its container, use auto on margin-left and margin-right ...

#somediv {
  width: somewidth;  /* px, %, em, etc */
  margin: 0 auto;
}

purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

converting to tableless!

The spacer is actually a vertical divider. How else would I represent it?

purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

converting to tableless!

Ok, I got the divs to be side by side, but I still want the height of the spacer div to be 100%. Plus, IE is interpreting my margins to be 20 px not 10 px!

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

converting to tableless!

Scott

First remove this from the top of the html.
<?xml version="1.0" encoding=""?>
It throws IE into the non-standard quirks mode which seems to be the cause of the odd right "margin". Read about quirks mode here:
http://www.csscreator.com/css-forum/ftopic6534.html
That line may have been put in there by Dreamweaver in which case you should stop DW doing it.

Then you should put in a charset (character set)

Quote:
<meta http-equiv="Content-Type" content="text/html; charset=" />

After that validate the html doc. You've already said you're not interested in the missing alt tags - so for the time being just fix the others.
Then validate the css (it only seems to have a slight problem)

The following code will then give you the vertical line to the left of the products div.

#products {
	background-color: #FFF;
/* see css shorthand in How To section */
	/*background-position: left top; not necessary */
	float: right;
	width: 500px;
	/*clear: right; not necessary */
	border-left: 1px solid; /* "spacer" vertical line */ 
	padding-left: 9px; /* ie 10px  less 1px border-left */
}
/*   spacer div not needed now so remove div from html

#spacer {
	background-image: url(/images/widgits/spacer.gif);
	background-repeat: repeat-y;
	background-position: center;
	width: 20px;
	height: 100%;
	position: relative;
	float: left;
}*/

This works only while the right col is longer than the left col, so if any of the pages you haven't done yet have the left col longest, you should look at this article to find out how to do "apparently" even height columns http://www.alistapart.com/articles/fauxcolumns/

Don't worry about tables for the pricing details - that is data and tables are meant for data, not layout. They could probably be done by using css alone, but perhaps that's for another day.

purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

converting to tableless!

thanks Smile

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

converting to tableless!

The other thing I might point out is that it is not necessarily "bad" to use tables for your product list layout. They are robust and the information could be considered "data". Perhaps limit youself to one table, no nesting, though. Additionally, I would use <h2> and <h3> tags for the sections and products respectively to provide more semantic structure. (It may also help with SEO)

As for the divider, there are two techniques to use. If you want to use borders, you can put a right border on the left column and a left border on the right column and then jog the right column left margin -1px. This will cause the two borders to overlap and it won't matter which column is longer. If you want to have a shaded graphical border, however, faux-columns is the way to go.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

converting to tableless!

ok, nice. I got it to work. Now, i can move those particular divs (overview and products) anywhere in the html (ie. products first, then overview) and they will still end up in the same spot? Or how does that work? Also, if it does work, then will it tab to products then overview in the tab order?

purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

converting to tableless!

Uh oh... testing in IE for mac shows the two columns no longer side-by-side, but overview left, top, products on the right, underneath the overview div.

purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

converting to tableless!

Looks like it didn't like the padding on the right that I added to the product div, so I removed it, and floated that div left instead of right, and it works ok on all mac/pc browsers tested (safari, ie, firefox). So back to my last question:

Quote:
Now, i can move those particular divs (overview and products) anywhere in the html (ie. products first, then overview) and they will still end up in the same spot? Or how does that work? Also, if it does work, then will it tab to products then overview in the tab order?

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

converting to tableless!

purefusion wrote:
Now, i can move those particular divs (overview and products) anywhere in the html (ie. products first, then overview) and they will still end up in the same spot?

Try it and see if they end up in the same spot?
Quote:
Also, if it does work, then will it tab to products then overview in the tab order?

At the risk of sounding b o r i n g, try it.
I think you'll be pleasantly surprised. Cool Or at least you would have been before floating things hither and thither. Didn't type fast enough to keep up with your changes and I haven't tested this time.
Quote:
Uh oh... testing in IE for mac shows...

Do I take it that people in your company are still using IE5 for Mac, and that is why it is important for you? If so, it is obsolete now and can be a pig to code hacks for. But you are not giving us a chance until you validate your html as suggested before, adding a character set would be a good idea as well (although probably not related to the IE Mac phenomenon)
I think this is still relevant though. You'll need a guru to wander by to help you with IE Mac hacks.

purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

converting to tableless!

ha, IE 5.2. Must've been the default that came with the machine. We should be getting tiger soon, but the tech guy is too busy, plus he likes to wait until the bugs are worked out.

purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

converting to tableless!

Well, I tried it and it didn't work. You suggested that it might be because I floated the divs. What if I unfloat them, won't they become stacked again?

I guess the thing that was most difficult to understand in css was the float property. Also, though I understood the concept of absolute vs. relative, I don't actually get how it works. Basically, it acts differently in real life than in theory. Maybe it's because I'm using dreamweaver, but I'm scared to use positioning properties... I've seen what happens.

Any suggestions there?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

converting to tableless!

The problems are just possibly related to the IE mac bug of expanding flotas to 100% width when block elements are nested within but equally I may be wrong.

You could possibly test by commenting out any block elements or making them display:inline-block to see if that is the problem.

If it is you could use this filter to feed IE Mac only rules

* html body>#element{}

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

converting to tableless!

I got all browsers noted to read properly (Win: IE, Firefox; Mac: IE, Safari, Firefox)

Now what would happen if I changed the divs to absolute positioning? to reletive? I don't fully understand the two. Some people use absolute without any positioning pixel wise. I thought absolute positioning was to position something at x,y from the top left hand corner?

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

converting to tableless!

http://www.wpdfd.com/editorial/wpd0904news.htm#feature
scroll down to the feature article
If you need more info. there's oodles more on Google. Try searching for something like... absolute+relative

purefusion
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2005-07-22
Posts: 40
Points: 0

converting to tableless!

This one is good...

Quote:
The concepts of absolute and relative positioning in CSS can be quite confusing and are often misunderstood.

That's me!

I'm beggining to understand better now. Absolute isn't always in relation to the top left corner. \:D/

There's so much books don't tell you... and then we have to sleep Wink

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

converting to tableless!

You may want to google up "source ordered columns" which is a method that allows you to do columns with a different display sequence compared with their coded sequence. No absolute positioning, just clever use of floats.

We helped a fellow a while back with converting his site ameinfo.com from tables to source ordered columns with faux backgrounds. Check it.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS