...

View Full Version : Why should I abandon my table layout



nadamt
07-28-2005, 08:13 PM
This isn't meant to spark a debate over tables versus div tags. I am only concerned about what is best for my site.

Like fashion aficionados, whenever a fellow webmasters reviews my personal site layout (www.nickadt.5u.com), they arbitrarily suggest my dumping last season's table layout for newer div tags, without a second thought as to how good the old look looked on me. The consensual arguement for using div tags over tables for a layout: "it not the table tags intended purpose." Well, I shutter to think how many modern conveniences we would forfeit if they were used strictly for their "intended purpose."

There are ninenteen translucent table cells in the layout of my page. If I were to compose it with div tags, I would have to write nineteen unique id names, nineteen positioning and object perimeters, and nineteen opacity settings, all of which would be in an external stylesheet that has loading priority over my actual page. So why should I use divs when I have a perfectly good table?

anshul
07-28-2005, 08:32 PM
Well, CSS loads fast, its DHTML compliant.

TABLEs are necessary to display ( rows of ) data, especially, when pulled from db.

http://www.mediasworks.com/tutorial/


http://anshul.guideseeq.com/personal/

mlseim
07-28-2005, 08:37 PM
I agree that CSS is the better way to go ... but ...

Since it's your own site, I would do whatever you want. It would be a
different situation if you were coding for other people.

If you provide websites for other people, it might be best to show your
"personal site" as an example, thus, you would convert it to CSS.

The look is a personal preference ... I think it looks too dark myself.

But if you like it the way it is, tell your developer friends they can create a CSS version of your site if it bothers them that much.

oracleguy
07-28-2005, 08:39 PM
This isn't meant to spark a debate over tables versus div tags.

There is your first problem. It isn't tables versus div tags, it is tables versus semantic coding. Like lets say you have a header image on your page, you could use a div tag and use CSS to set the background to your image, or a more meaningful way would be actually use an image tag and style that. You should read up on some articles talking about XHTML semantics. An additional plus side to you, the programmer, is that it makes your code easier to understand by looking at the code. You might think this is silly because you wrote it and won't forget how you did it... just wait until you go back to something you wrote like 2 years before, you won't remember everything you thought you would, so making the code easier to understand for humans, in addition to the browser, is a good plus.

A couple common mistakes and/or misconceptions people usually have when "getting off tables" for you layout is that they go div crazy when they could use a simpler, more semantic layout. An easy way to test this is to go view your site, disable CSS and see if it still presents itself in a manner where you could understand like, oh, this is a title, this is body text, etc. Additionally they totally miss the first word in CSS, cascading, meaning you can cascade attributes down without having re-define them for each sub element.


There are ninenteen translucent table cells in the layout of my page. If I were to compose it with div tags, I would have to write nineteen unique id names, nineteen positioning and object perimeters, and nineteen opacity settings, all of which would be in an external stylesheet that has loading priority over my actual page. So why should I use divs when I have a perfectly good table?

I don't see why you would, especially given what I already said. Plus think about this, any CSS attributes you make and are in an external file, the viewer downloads that file once, and then from then on, while viewing subsequent pages, their browser just uses the cached version saving the time (and resources) of downloading it again.

nadamt
07-28-2005, 09:17 PM
I don't see why you would, especially given what I already said. Plus think about this, any CSS attributes you make and are in an external file, the viewer downloads that file once, and then from then on, while viewing subsequent pages, their browser just uses the cached version saving the time (and resources) of downloading it again.That's a good point, but it doesn't pertain to my site. All of my site's content will be viewed in the iframe, therefore, the top and bottom rows of my table act as a navigtional frame to the iframe's mainframe--my tables, like an external CSS file, are loaded only once (albeit after the aforementioned file). I'm perfectly willing to replace the tables if someone can explain why it would benefit my site. (i.e. would the fact that the external CSS file loads first be offset by the large amount CSS coding required to keep my layout? If so, by how much?)

And were you implying that I would go "div crazy" or be otherwise ignorant? I know how to use "semantic coding"--all of the content in the iframe is, and will continue to use it--moreover, I think I'm reasonalbly economical with my codes, and I've read many articles on the topic. I don't deny that it has it's advantages (i.e. "intended purpose"), but it should be used on a case by case basis. In my case, it would be tedious and cumbersome go the route of semantic coding for my layout.

Graft-Creative
07-28-2005, 09:45 PM
There are ninenteen translucent table cells in the layout of my page. If I were to compose it with div tags, I would have to write nineteen unique id names, nineteen positioning and object perimeters, and nineteen opacity settings

Well, there you go - nineteen translucent table cells for a layout like that?
You could make it with four divs, and the rest in semantic markup and CSS.

Think that speaks for itself...

Kind regards,

Gary

nadamt
07-28-2005, 10:04 PM
Well, there you go - nineteen translucent table cells for a layout like that?
You could make it with four divs, and the rest in semantic markup and CSS.

Think that speaks for itself...

Kind regards,

GaryCounterproductive sarcasim aside, could you please elaborate?

Graft-Creative
07-28-2005, 10:31 PM
Counterproductive sarcasim aside, could you please elaborate?

Certainly: You would have a container div to wrap your site into a fixed size unit. You could center this div horizontally, and probably vertically with CSS (a search on this forum for 'css vertical positioning' or some such should throw back some ideas)

A div for the top nav - with an unordered list for the navigation items (same for the footer)

A div for the main content with overflow: auto set in the CSS file....and Robert's yer Mums brother ;)

less code, quicker downloads, less maintenence, future proof blah blah blah - you know the score.

gary

nadamt
07-28-2005, 10:53 PM
A div for the top nav - with an unordered list for the navigation items (same for the footer)Wouldn't that require every cell being a link?

Graft-Creative
07-28-2005, 11:20 PM
Wouldn't that require every cell being a link?

Well, no - you wouldn't actually have any cells: the main blocks of your site would be contained and positioned in div tags, anything else could be marked up sematically, with the visual appearance dictated via your CSS file.

I'm not really sure where you're coming from, you say you don't want to spark a debate? Well I'm afraid most of the people on this forum have been in the debate for a good few years now - and the result has been decided, and not for nothing. The answers are already out there, as you know, it's your decision which way to go - so why come on here with the 'I'm not trying to start a debate, but I am' attitude?

This forum is for helpful people to help other helpful people, it's not an arena for gauntlet tossing.

Gary

nadamt
07-28-2005, 11:40 PM
Well, no - you wouldn't actually have any cells: the main blocks of your site would be contained and positioned in div tags, anything else could be marked up sematically, with the visual appearance dictated via your CSS file.Let me rephraze the question: wouldn't converting the navigational row of my table into a CSS horizontal menu require every li tag to contain a link?

Kurashu
07-29-2005, 04:03 AM
Why should you? To be accessible.

rmedek
07-29-2005, 05:33 AM
Let me rephraze the question: wouldn't converting the navigational row of my table into a CSS horizontal menu require every li tag to contain a link?
What else would it contain?

nadamt
07-29-2005, 06:27 AM
What else would it contain?My point is that I use empty empty table cells in my site layout, so simply making the top and bottom rows into horizontal menus would involve more than two unordered lists.

In other related news, when I manually increase or decrease the size of the text in Firefox, all of the opacity in my site turns solid until I reload the page. Could someone would be kind enough to confirm that this has to do with my using a table layout, or if this is a Firefox bug (or both...or neither)? Thanks.

oracleguy
07-30-2005, 04:31 AM
And were you implying that I would go "div crazy" or be otherwise ignorant? I know how to use "semantic coding"--all of the content in the iframe is, and will continue to use it--moreover, I think I'm reasonalbly economical with my codes, and I've read many articles on the topic. I don't deny that it has it's advantages (i.e. "intended purpose"), but it should be used on a case by case basis. In my case, it would be tedious and cumbersome go the route of semantic coding for my layout.

I wasn't implying anything, I was talking in general. I fail to see how it would be "tedious and cumbersome" based on the layout, the only way it would be is if you just didn't care about it enough to do it. How you write the code should always be the same, it is what you write that would depend on each layout.

One additional advantage of CSS is that you can re-design your entire site by simply using a different stylesheet (i.e. CSS Zen Garden), assumming you had that fore sight in mind when you originally wrote the (X)HTML. Even if you didn't, you can still make site wide changes very easily by simply changing the stylesheet, I have done it before and it is nice. Sure you could use SSI for some of that functionality but nonetheless...

_Aerospace_Eng_
07-30-2005, 04:48 AM
This link (http://www.hotdesign.com/seybold/index.html) points out some valid points.

SpirtOfGrandeur
07-30-2005, 02:32 PM
This link (http://www.hotdesign.com/seybold/index.html) points out some valid points.

Nice read thanks :)

oracleguy
07-30-2005, 10:13 PM
This is also a good read: http://www.alistapart.com/articles/slashdot/

nadamt
07-31-2005, 12:07 AM
One additional advantage of CSS is that you can re-design your entire site by simply using a different stylesheet (i.e. CSS Zen Garden), assumming you had that fore sight in mind when you originally wrote the (X)HTML. This is a very compelling reason. But you overlook the fact that all my table cells contain a "class" attribute, so if I were to combined the stylesheet in my iframe with the one from my hompage (which, now that I think about it, I should do), I could make an alternative stylesheet complete with different fonts and/or colors for every aspect of my page(which, I should also do, depending on whether alt-sheets load with the page, or when you select them from the view menu in Firefox. (When do they load?))

There would have to be eighteen unique elements (complete with opacity settings) to replace the two rows that reside in my header and footer rows. That's sixteen (after removing the class elements currenting decorating my table cells) additional classification properties, that would be loaded before the first line of content is rendered. I defy anyone to tell me that using a simple table with two different class attributes would be slower. Couple that with my site not loading a new table with every page (rather, in the iframe), and two of the most logical reasons for dumping the table layout in my site are gone.

As for the code being easier to read: I hand-code, and am therefore less likely to forget, my pages. Secondly, I'm pretty good about keeping a codes trim. Third, my code for my home page is, at the moment, only 35 lines long (though, in all likelyhood, this number will be 55 once I insert my drop down menus). Fourth, I have a syntax highlighter and am generous with my comments.

As for CSS being future-proof: How far in the future would we have to be for validated HTML 4.01 to no longer be supported via backwards compatibility? I'll tell you: about as far as semantic coding being outdated with the coming of the next big thing (which will of course be future-proof...until the next big thing).

I like semantic coding. It is embedded into every aspect of my page. But I use tables for the layout for the aforementioned reasons. So I again I ask, why should I abondon my table layout for my site specifically, not in the general sense.

STDestiny
07-31-2005, 03:39 AM
It seems to me, It would be useful if someone recreated the layout using css/semantic coding to show what is meant. If I get a chance I'll work something out tomorrow.

Kurashu
07-31-2005, 03:51 AM
So coding meaningfully and being accessible to people not using a traditional web browser (e.g. IE, Mozilla, Opera, et cetra) is alright because you believe semantic coding is going the way of the dinosaurs? I'll admit that I'm looking forward to the day when the internet will be obsolete because of an advancment in technology that gives birth to something like we see in the futuristic movies and books where data is freely availabe in a 3d format.


I like semantic coding. It is embedded into every aspect of my page. But I use tables for the layout for the aforementioned reasons.

That's a contradiction. Tables are to be used for tabular data. Not layouts. Therefore, that arugument is moot.


So I again I ask, why should I abondon my table layout for my site specifically, not in the general sense.

Accessiblity. Bloat and bandwidth issues (though this can happen with a CSS layout too if you get over zealous with it). Being semantic. Creativity.

With tables, everything is bolted into place. With a CSS driven design, not only can you easily change the colors of the page, but you can easily completely rearrange a page. How long until you get bored looking at that design and want to change it? Admittly, it is only one page, however, changing tables is a hassle.

As for the HTML 4.01 Strict standard. That will be a strandard for as long as the W3C sees fit, which will most likly be until XHTML is widely supported properly (IE7 will hopefully support it, which will help out greatly).

nadamt
07-31-2005, 05:15 AM
That's a contradiction. Tables are to be used for tabular data. Not layouts. Therefore, that arugument is moot.That doesn't make my arguement moot because I never declared what a table's specific use was. The fact is that table can be used for (though not limited to) layouts. Just because certain people say otherwise, doesn't make it any less true. Nobody is going to shut your site down because of it, visitors aren't going to know the difference, and as long as it is a decently written code, it will be readable as long as browsers support tables and the format it was written in. And how am I contradicting myself? If anything I implied that I was taking advantage of tables to get a smaller sized site (see "intended purpose") Therefore, your rebuttal is moot.


As for the HTML 4.01 Strict standard. That will be a strandard for as long as the W3C sees fit, which will most likly be until XHTML is widely supported properly (IE7 will hopefully support it, which will help out greatly).I have a feeling that there are some amount of millions of sites still using html 3.2, let alone 4.01. The browser that cuts off backwards compatibility to these formats is the browser least supported. Don't get me wrong, change will come, but slowly.

oracleguy
08-01-2005, 06:24 PM
That doesn't make my arguement moot because I never declared what a table's specific use was. The fact is that table can be used for (though not limited to) layouts. Just because certain people say otherwise, doesn't make it any less true. Nobody is going to shut your site down because of it, visitors aren't going to know the difference, and as long as it is a decently written code, it will be readable as long as browsers support tables and the format it was written in. And how am I contradicting myself? If anything I implied that I was taking advantage of tables to get a smaller sized site (see "intended purpose") Therefore, your rebuttal is moot.

No, you never said what a table's specific use was, you didn't have to, everyone already knows what its use is. It is an accepted industry concept, at least by web development professionals and the people that originally designed the language. Why did someone start using table layouts in the first place then? Because CSS didn't exist, so they hacked something up to get the job done. Does it work? Well, yeah. But that doesn't mean its right.

Your argument is moot because given that a table is for tabular data, thats what its original purpose was and given the definition of the word semantic (http://dictionary.reference.com/search?q=semantic), you contradict yourself by saying you support semantic coding yet use tables for layout.

anshul
08-01-2005, 06:43 PM
Please see

http://www.workingwith.me.uk/tablefree/

That guy is campaigning against table based desgin.

:cool:
-------------

http://www.mediasworks.com/

Graft-Creative
08-01-2005, 10:38 PM
Did I really see the words 'I defy anyone' and 'Rebuttal' in this thread?

All the signs of a debate going nowhere - why are you asking us to defy you, or rebut you?

Pointless.

Gary

nadamt
08-01-2005, 11:46 PM
It seems to me, It would be useful if someone recreated the layout using css/semantic coding to show what is meant. If I get a chance I'll work something out tomorrow.I couldn't let you do that, especially after the trouble I had getting the css layout you see here (http://www.nadamt.xmgfree.com/sc/container.html). The only advanage thus far is that my menu drop down menu (which still doesn't work in IE), no longer flickers, but I have a feeling that has nothing to do with the layout, rather some arbitrary tweak I made in rewriting the stylesheet.

A table layout maybe (and I empathize maybe) harder to re-design but a css layout is harder to build. Having to go between the external stylesheet and the main page constantly, previewing and not knowing how to solve mistakes intuitively; where a table, with bgcolors and a border, can easily display mistakes, css relies on too many modifiers to know what needs to be done imediately.

I don't know if anyone was reading my actual posts, but a lot of the disadvantages of tables in general don't apply to my site. My tables only loaded once (when I had the iframe), and my code was extremely concise. I'm only entertaining the css layout because I've decided to use php importing rather than the iframe (because in importing, the tables would have to loaded with every page).

On a side note: I was able devise a somewhat simple solution to the task of coding the empty table cells:

/***COMMON DENOMINATORS FOR INTERFACE ELEMENTS**.*/
/*ALL NAVIGATIONAL*/
div.a2, div.a4, div.a6, div.a7, div.a8, div.a9, div.b1, div.b2, div.b3, div.b4, div.b5, div.b6, div.b8 { position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: rgb(100,100,100); height: 26px; z-index: 3; filter: alpha(opacity=20); -moz-opacity: 0.2; opacity: 0.2; }
/*ALL TOP ELEMENTS*/
div.a2, div.a4, div.a6, div.a7, div.a8, div.a9 { top: 0px; }
/*ALL BOTTOM ELEMENTS*/
div.b1, div.b2, div.b3, div.b4, div.b5, div.b6, div.b8 { bottom: 0px; }
/*ALL BIG SPACERS*/
div.a7, div.a9, div.b1, div.b3, div.b5 { width: 160px; }
/*ALL SMALL SPACERS*/
div.a2, div.a4, div.a6, div.a8, div.b2, div.b4, div.b6, div.b8 { width: 40px }
/*LINKS*/
div.hub, div.log, div.works, div.info, div.net { position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

div.hub { top: 0px; left: 0px; }
div.a2 { left: 163px; }
div.log { top: 0px; left: 206px; }
div.a4 { left: 369px; }
div.works { top: 0px; left: 412px; }
div.a6 { left: 575px; }
div.a7 { left: 618px; }
div.a8 { left: 781px; }
div.a9 { left: 824px; }

div.b1 { left: 0px; }
div.b2 { left: 163px; }
div.b3 { left: 206px; }
div.b4 { left: 369px; }
div.b5 { left: 412px; }
div.b6 { left: 575px; }
div.net { bottom: 0px; left: 824px; }
div.b8 { left: 781px; }
div.info { bottom: 0px; left: 618px; }

Graft-Creative
08-02-2005, 12:31 AM
Well, yep, we're all convinced.

You seem to be suffering from http://www.healthyplace.com/communities/personality_disorders/narcissism/

You won't be happy till we all admit you're right?

Gary

nadamt
08-02-2005, 01:27 AM
Well, yep, we're all convinced.

You seem to be suffering from http://www.healthyplace.com/communities/personality_disorders/narcissism/

You won't be happy till we all admit you're right?

Gary(Talk about pointless.) Sure. And I went out of my way to build a css layout because...

hemebond
08-02-2005, 03:07 AM
It makes maintenance easier it reduces file sizes (my recoded version was only 30% the size of yours) seperation of style from structure is good practiceThat is some really bad code. These guys are trying to help you. Listen to them.

rmedek
08-02-2005, 03:32 AM
Web design as a whole is only around a decade old. So, table-based layout was a way to get things working in the beginning. And now there is better technology, and better coordination between site developers and browser developers. So it would be wrong to consider CSS a "fad" or "fashionable" (I believe you referred to it as "this season's css layout"?)... it would be more accurate to say it is the modern way to style a webpage.

As far as this "my site" versus "other sites," if you want to use table-based layout on your site, go ahead. No one here is stopping you. But more and more developers are using css layouts to complement their semantic html pages, and if you are serious about web design than you would do well to listen to the advice of the many people on here who are a) more experienced and b) more informed than you are.

nadamt
08-02-2005, 04:24 AM
It makes maintenance easier it reduces file sizes (my recoded version was only 30% the size of yours) seperation of style from structure is good practiceThat is some really bad code. These guys are trying to help you. Listen to them.I hate to get off topic, but, really bad? Certainly you've seen worse. Also, if your version (of my site?) is really 70% smaller, I'd love to see the code. It's one thing to scribble vague, one sentence critiques, it's another thing to back it up. If its really as bad and bloated as you claim it, then be true your own advice and help me, rather than using it as a proxy to degrade my arguement of the topic at hand.


As far as this "my site" versus "other sites," if you want to use table-based layout on your site, go ahead. No one here is stopping you. But more and more developers are using css layouts to complement their semantic html pages, and if you are serious about web design than you would do well to listen to the advice of the many people on here who are a) more experienced and b) more informed than you are.I think you took my post of context. When I empathized my site, it wasn't in a possessive tone so much as it was specific. I was trying to say "Look at my site, specifically, from an subjective point of view and tell me that it needs a css layout." As to the advice, it's a valid point but seeing as few of said experienced webmasters took the time to deal with my website from a subjective standpoint, I therefore can't be certain that my site's interest is placed over some prophecy.

Also, I'm thinking that the criticism of my code (criticism for the sake of criticism, mind you) and/or implied criticism of my skill level is more or less irrelevant. True, I am no pro, but I'd rather defend my site than myself, so I'll respond to no more personal criticisms.

rmedek
08-02-2005, 05:27 AM
Okay. Your main html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" title="exoskeleton" href="style/index.css" type="text/css" media="screen">
<link rel="shortcut icon" HREF="nickadt.5u.com/favicon.ico">
<title>No Need for a Page Title</title></head>
<body onload="document.getElementById('iframe').allowTransparency='true';">
<!-- VALIGN TABLE -->
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="height:100%"><tr><td align="center">
<!-- SITE TABLE -->
<table width="960" cellpadding="0" cellspacing="3.5">
<!-- HEAD NAVIGATION ROW -->
<tr>
<td class="parent"><a href="hub.htm" target="iframe">hub</a><td class="trans">&nbsp;
<td class="parent"><a href="log.htm" target="iframe">log</a><td class="trans">&nbsp;

<td class="parent"><a href="works.htm" target="iframe">works</a>
<td class="trans">&nbsp;<td class="trans">&nbsp;
<td class="trans">&nbsp;<td class="trans">&nbsp;
<!-- IFRAME ROW -->
<tr>
<td width="960" height="470" colspan="9">
<iframe src="hub.htm" frameborder="0" name="iframe" width="100%" height="100%" scrolling="no"></iframe>
</tr>
<!-- FOOT NAVIGATION ROW -->
<tr>
<td class="trans">&nbsp;<td class="trans">&nbsp;<td class="trans">&nbsp;
<td class="trans">&nbsp;<td class="trans">&nbsp;<td class="trans">&nbsp;
<td class="parent"><a href="info.htm" target="iframe">info</a><td class="trans">&nbsp;
<td class="parent"><a href="net.htm" target="iframe">net</a>

</table>
</table>
<!-- BACKGROUND -->
<div id="bg"></div>
</body></html><script><!--
function SiteStats_144(){
var t=new Date();
var u='http://www.nickadt.5u.com/cgi-bin/sitestats.gif?p='+escape(location.href)+';r='+escape(document.referrer)+';t='+t.getTime();
var I=new Image(1,1); I.src=u;
}
SiteStats_144();
//--></script><noscript><img src=http://www.nickadt.5u.com/cgi-bin/sitestats.gif?p=http%3A%2F%2Fwww.nickadt.5u.com%2Findex.htm;r=http%3A%2F%2Fcodingforums.com%2Fshowth read.php%3Ft%3D64680%26page%3D1%26pp%3D15;t=144; width=1 height=1></noscript>
Your main css:

html, body {
height: 100%;
width: 100%;
overflow: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
body {
background: rgb(30,30,30);
font-family: tempus sans itc, trebuchet ms, sans-serif;
font-size: 20px;
letter-spacing: 1px;
word-spacing: 2px;
font-weight: 700;
text-transform: lowercase;
}
a {
color: rgb(255,255,255);
float: left;
font-weight: 700;
width: 160px;
text-decoration: none; /*INITIAL LINK BGCOLOR*/
background-color: rgb(50,50,50);
text-decoration: none;
}
a:hover {
text-decoration: none; /*MOUSEOVER LINK BGCOLOR*/
background-color: rgb(14,14,14);
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
tr {
background: transparent;
}
/*BACKGROUND*/
#bg {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
background-image: url(http://nickadt.5u.com/escher.png);
}
/*LINK TRANSLUCENT TABLE CELLS*/
td.parent {
filter: alpha(opacity=90);
-moz-opacity: .9;
opacity: .9;
background: rgb(100,100,100);
text-align: left;
width: 160;
}
/*EMPTY TRANSLUCENT TABLE CELLS*/
td.trans {
filter: alpha(opacity=20);
-moz-opacity: 0.2;
opacity: 0.2;
background: rgb(125,125,125);
text-align: right;
width: 160;
}

Your iframe html code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<link rel="stylesheet" href="style/iframe.css" type="text/css" media="screen"/>
<title>hub</title></head>
<body>
<!-- FOREGROUND -->
<div id="fg">
<p>This is the "hub" section of my website. Updates, general happenings, and whatnot will be shown here.</p>
</div>
<!-- BACKGROUND -->
<div id="bg">&nbsp;</div>
</body></html>
<script><!--
function SiteStats_9236(){
var t=new Date();
var u='http://www.nickadt.5u.com/cgi-bin/sitestats.gif?p='+escape(location.href)+';r='+escape(document.referrer)+';t='+t.getTime();
var I=new Image(1,1); I.src=u;
}
SiteStats_9236();
//--></script><noscript><img src=http://www.nickadt.5u.com/cgi-bin/sitestats.gif?p=http%3A%2F%2Fwww.nickadt.5u.com%2Fhub.htm;r=http%3A%2F%2Fwww.nickadt.5u.com%2F;t=923 6; width=1 height=1></noscript>

Your iframe css:


html, body {
height: 100%;
width: 100%;
overflow: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
body {
color: rgb(230,230,230);
font-family: tempus sans itc, trebuchet ms, sans-serif;
font-size: 16px;
font-weight: bold;
letter-spacing: 1.25px;
word-spacing: 2px;
background-color: transparent;
width: 100%;
text-align: left;
}
p {
text-indent: 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
}
a {
color: rgb(255,255,255);
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
/*FOREGROUND*/
#fg {
position: absolute;
top: 0px;
left: 0px;
width: 960px;
height: 470px;
background-color: transparent;
}
/*BACKGROUND*/
#bg {
z-index: -1;
position: absolute;
top: 0px;
left: 0px;
width: 960px;
height: 470px;
background-color: rgb(125,125,125);
filter: alpha(opacity=20);
-moz-opacity: 0.2;
opacity: 0.2;
}


Now. I coded an example for you. It uses your fixed width, centered thing, and leaves a couple of niceties off (like letter-spacing, the tempus font I don't have, a png hack for IE, etc).

My html code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>table to css example</title>
<link rel="stylesheet" href="css/style.css" media="screen, projection">
</head>
<body>

<div id="wrapper">
<ul id="nav">
<li id="nav_hub"><a href="#">hub</a></li>
<li id="nav_log"><a href="#">log</a></li>
<li id="nav_works"><a href="#">works</a></li>
<li id="nav_info"><a href="#">info</a></li>
<li id="nav_net"><a href="#">net</a></li>
</ul>

<div id="content">
<p>Enter whatever you want here.</p>
</div>
</div>

</body>
</html>

My CSS code:



* {
margin: 0;
padding: 0;
}

body {
background: url(images/escher.png) top left;
font: 1em "trebuchet ms", verdana, arial, sans-serif;
color: #fff;
}

a {
font: 1em "trebuchet ms", verdana, arial, sans-serif;
color: #fff;
text-decoration: none;
}

#wrapper {
margin: -257px 0 0 -477px;
width: 954px;
height: 514px;
position: absolute;
top: 50%;
left: 50%;
background: url(images/boxes.png) no-repeat top left;
}

#nav {
width: 100%;
height: 100%;
position: relative;
}

#nav li {
position: absolute;
width: 160px;
height: 19px;
list-style: none;
}

#nav li a {
display: block;
height: 19px;
background: url(images/linkbg.png) no-repeat top left;
}

#nav_hub { top: 0; left: 0; }
#nav_log { top: 0; left: 199px; }
#nav_works { top: 0; left: 398px; }
#nav_net { bottom: 0; right: 0; }
#nav_info { bottom: 0; right: 198px; }

#nav li a:hover {
background-position: 0 -19px;
}

#content {
margin-top: -490px;
}

This is only one way to approach it. The CSS gets cached so it only loads one time. I don't feel like doing the math on how much file size gets saved or how much easier this is to update.

BTW, Hemebond is much better than me at coding, so I'm sure he has a more elegant solution. I'll post this example online (my server is down at the moment) when I can.

Do whatever you want with this, and if you still feel your site is better coded with tables, then go right ahead and do it.

SpirtOfGrandeur
08-02-2005, 06:13 AM
Just one man's take on the subject...

*Edit: rmedek I would have not worked on this if i knew you where. Sorry about that!

Style

<style type='text/css'>
html, body {
padding: 0px;
margin: 0px;
color: black;
font: 16px Verdana;
font-weight: bold;
}


#mainContainer {
position: absolute;
left: 50%;
top: 50%;
width: 984px;
height: 536px;
margin-left: -492px;
margin-top: -268px;
padding: 0px;
}

ul.menu {
padding: 0px;
margin: 0px;
display: block;
}

ul.menu li {
display: block;
float: left;
}

ul.menu li.menuOption, ul.menu li.menuOptionEmpty {
background: cyan;
width: 164px;
height: 20px;
}

ul.menu li.menuSpace {
background: pink;
margin-left: 3px;
margin-right: 3px;
width: 35px;
height: 20px;
}

#content {
background: fuchsia;
float: left;
width: 100%;
height: 470px;
margin-top: 3px;
margin-bottom: 3px;
}

li.menuOption li {
position: relative;
width: 10em;
display: block;
margin-left: -35px;
}

li.menuOption ul {
background: cyan;
display: none;
position: absolute;
top: 1em;
left: 0px;
width: 10em;
}

li.menuOption>ul {
top: auto;
left: auto;
}

li.menuOption:hover ul {
display: block;
}

</style>

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>No Need for a Page Title</title>
</head>
<body>
<div id='mainContainer'>
<ul class='menu'>
<li class='menuOption'>hub</li>
<li class='menuSpace'></li>
<li class='menuOption'>
<a href="log.php">log</a>
<ul>
<li>
<a href="#">log option 1</a>
</li>
<li>
<a href="#">log option 2</a>
</li>
</ul>
</li>
<li class='menuSpace'></li>
<li class='menuOption'>
<a href="works.php">works</a>
<ul>
<li>
<a href="#" target="iframe">works option 1</a>
</li>
<li>
<a href="#">works option 2</a>
</li>
<li>
<a href="#">works option 3</a>
</li>
</ul>


</li>
<li class='menuSpace'></li>
<li class='menuOptionEmpty'></li>
<li class='menuSpace'></li>
<li class='menuOptionEmpty'></li>
</ul>
<div id='content'>
This is where i can dance! :)
</div>
<ul class='menu'>
<li class='menuOptionEmpty'></li>
<li class='menuSpace'></li>
<li class='menuOptionEmpty'></li>
<li class='menuSpace'></li>
<li class='menuOptionEmpty'></li>
<li class='menuSpace'></li>
<li class='menuOption'>info</li>
<li class='menuSpace'></li>
<li class='menuOption'>net</li>
</ul>
</body>
</html>

rmedek
08-02-2005, 06:59 AM
Just one man's take on the subject...

*Edit: rmedek I would have not worked on this if i knew you where. Sorry about that!


That's okay, there's more than one way to skin a cat. But I don't think you're on the right track, either: the big reason for the move from tables to CSS (as Oracleguy keeps saying) is the semantic web.

So, things like this...


<ul class='menu'>
<li class='menuOptionEmpty'></li>
<li class='menuSpace'></li>
<li class='menuOptionEmpty'></li>
<li class='menuSpace'></li>
<li class='menuOptionEmpty'></li>
<li class='menuSpace'></li>
<li class='menuOption'>info</li>
<li class='menuSpace'></li>
<li class='menuOption'>net</li>
</ul>

...aren't that much of an improvement over tables because you're using markup that has meaning (list items in this case) as an empty element for a style. Just my two cents there :)

hemebond
08-02-2005, 08:24 AM
I hate to get off topic, but, really bad? Certainly you've seen worse. Also, if your version (of my site?) is really 70% smaller, I'd love to see the code. It's one thing to scribble vague, one sentence critiques, it's another thing to back it up. If its really as bad and bloated as you claim it, then be true your own advice and help me, rather than using it as a proxy to degrade my arguement of the topic at hand.Oh, of course it's not the worst, but you are challenging the idea that your is fine the way it is. Even as a table-based layout it could be better. But then, if every website used clean semantic markup, the web as a whole would be much better off. Anyway, here's another way you could achieve a similar result to what you've got.

64680.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>No Need for a Page Title</title>
<link rel="stylesheet" href="64680.css" type="text/css">
</head>
<body>
<div id="container">
<ul id="topnav">
<li><a href="/hub.html" target="iframe">hub</a></li>
<li><a href="/log.html" target="iframe">log</a></li>
<li><a href="/works.html" target="iframe">works</a></li>
</ul>

<ul id="lownav">
<li><a href="/info.html" target="iframe">info</a></li>
<li><a href="/net.html" target="iframe">net</a></li>
</ul>

<iframe id="iframe" name="iframe" src="64680_iframe"></iframe>
</div>
</body>
</html>64680.css
body
{
font-family:sans-serif;
background-color:#000;
color:#fff;
}
a:link,
a:visited
{
color:#fff;
}
#container
{
background:transparent url(http://nickadt.5u.com/escher.png) top left repeat;
position:relative;
}
iframe
{
height:470px;
width:100%;
border:none;
margin-bottom:1em;
}
#topnav,
#lownav
{
list-style:none;
padding:0;
margin:0;
overflow:auto;
}
#topnav li,
#lownav li
{
float:left;
margin-right:2em;
}
#topnav li a,
#lownav li a
{
display:block;
width:160px;
padding:0.25em 0.5em;
text-decoration:none;
font-weight:bold;
background-color:#444;
}
#lownav
{
position:absolute;
bottom:0;
right:0;
}64680_iframe.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>hub</title>
<link rel="stylesheet" href="64680.css" type="text/css">
</head>
<body>
<p>This is the "hub" section of my website. Updates, general happenings, and whatnot will be shown here.</p>
</body>
</html>Keep in mind, of course, that iframes are a poor way to get content repeated on all pages.

nadamt
08-02-2005, 08:37 AM
Thank you, all. I'm sure I can take something from each one. Here's a roughcut of my css version, sans the iframe, with dropdown menus, opacity, and nearly identical to the original: (viewable in FF only).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" title="Grey" href="grey.css" type="text/css" media="screen">
<title>No Need for a Page Title</title>
</head>
<body>
<div id="phony">
<div id="container"></div>

<div class="hub"><ul><li><a href="hub.php">hub</a></li></ul></div>
<div class="a2">&nbsp;</div>
<div class="log"><ul class="link"><li><a href="log.php">log</a><ul>

<li><a href="#">log option 1</a></li>
<li><a href="#">log option 2</a></li></ul></ul></div>
<div class="a4">&nbsp;</div>
<div class="works"><ul><li><a href="works.php">works</a><ul>
<li><a href="#" target="iframe">works option 1</a></li>
<li><a href="#">works option 2</a></li>
<li><a href="#">works option 3</a></li></ul></ul></div>
<div class="a6">&nbsp;</div>
<div class="a7">&nbsp;</div>
<div class="a8">&nbsp;</div>
<div class="a9">&nbsp;</div>

<div class="b1">&nbsp;</div>
<div class="b2">&nbsp;</div>
<div class="b3">&nbsp;</div>
<div class="b4">&nbsp;</div>
<div class="b5">&nbsp;</div>
<div class="b6">&nbsp;</div>
<div class="info"><ul><li><a href="info.php">info</a></li></ul></div>
<div class="b8">&nbsp;</div>
<div class="net"><ul><li><a href="net.php">net</a></li></ul></div>
<div id="fgbg">
<div id="fg">
Text goes here.
</div></div></div>
</body>
</html>

Stylesheet:

html, body { height: 100%, width: 100%; }
body { font-family: "tempus sans itc", "trebuchet ms", sans-serif; font-size: 16px; font-weight: bold; letter-spacing: 1.25px; word-spacing: 2px; background-image: url(http://www.nadamt.xmgfree.com/images/escher.png); text-align: left; font-size: 20px; color: rgb(230,230,230); margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
p { margin: 0px 0px 0px 0px; padding: 0px 0px 15px 0px; }

#container { position: absolute; top: 30px; left: 0px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 984px; height: 410px; background-color: rgb(30,30,30); filter: alpha(opacity=20); -moz-opacity: 0.5; opacity: 0.5; }
#fgbg { overflow: auto; width: 100%; height: 100%; }
#fg { position: relative; margin: 0px 0px 0px 0px; padding: 30px 20px 0px 0px; z-index: 2; background: transparent; }
#bg { position: absolute; top: 30px; left: 20 px; bottom: 30px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: rgb(100,100,100); height: 26px; z-index: 0; filter: alpha(opacity=20); -moz-opacity: 0.2; opacity: 0.2; height: 500px; width: 984px; }
#phony { position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: transparent; width: 984px; height: 470px; }

/***COMMON DENOMINATORS FOR INTERFACE ELEMENTS**.*/
/*ALL NAVIGATIONAL*/
div.a2, div.a3, div.a4, div.a5, div.a6, div.a7, div.a8, div.a9, div.b1, div.b2, div.b3, div.b4, div.b5, div.b6, div.b7, div.b8, div.b9, #fill { position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: rgb(100,100,100); height: 26px; z-index: 3; filter: alpha(opacity=20); -moz-opacity: 0.2; opacity: 0.2; }
/*ALL TOP ELEMENTS*/
div.a2, div.a3, div.a4, div.a5, div.a6, div.a7, div.a8, div.a9 { top: 0px; }
/*ALL BOTTOM ELEMENTS*/
div.b1, div.b2, div.b3, div.b4, div.b5, div.b6, div.b7, div.b8, div.b9 { bottom: 0px; }
/*ALL BIG SPACERS*/
div.a3, div.a5, div.a7, div.a9, div.b1, div.b3, div.b5, div.b7, div.b9 { width: 160px; }
/*ALL SMALL SPACERS*/
div.a2, div.a4, div.a6, div.a8, div.b2, div.b4, div.b6, div.b8 { width: 40px }
/*LINKS*/
div.hub, div.log, div.works, div.info, div.net { position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

div.hub { top: 0px; left: 0px; }
div.a2 { left: 163px; }
div.log { top: 0px; left: 206px; }
div.a4 { left: 369px; }
div.works { top: 0px; left: 412px; }
div.a6 { left: 575px; }
div.a7 { left: 618px; }
div.a8 { left: 781px; }
div.a9 { left: 824px; }

div.b1 { left: 0px; }
div.b2 { left: 163px; }
div.b3 { left: 206px; }
div.b4 { left: 369px; }
div.b5 { left: 412px; }
div.b6 { left: 575px; }
div.net { bottom: 0px; left: 824px; }
div.b8 { left: 781px; }
div.info { bottom: 0px; left: 618px; }

/*NAVIGATIONAL LINKS*/
ul, ul li, li ul, ul li a, li ul a { z-index: 3; font-weight: bold; text-decoration: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
ul { list-style: none; width: 160px; }
ul li { position: relative; }
/*DROP DOWN MENU STYLE*/
li ul { position: relative; width: 250px /*SAME AS OPTION STYLE*/; display: none; }
/*DISPLAY*/
li ul a, li ul a, ul li a { display: block; background-color: rgb(100,100,100); filter: alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; position: relative; top: 0px; left: 0px; }
/*DROP DOWN MENU LINK STYLE*/
ul li a { color: rgb(255,255,255); background-color: rgb(100,100,100)/*SAME AS OPTION STYLE*/; }
li:hover ul, ul li a:hover, li ul a:hover { display: block; background-color: rgb(125,125,125); filter: alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; z-index: 3; }
/*DROP DOWN MENU LINK HOVER STYLE*/
ul li a:hover { background: rgb(50,50,50) /*SAME AS MENU HOVER*/; width: 160px; }
/*DROP DOWN MENU OPTION HOVER STYLE*/
li ul a:hover { width: 250px/*SAME AS DROP DOWN MENU STYLE*/; background: rgb(50,50,50) /*SAME AS DROP DOWN MENU STYLE*/; }

SpirtOfGrandeur
08-02-2005, 01:56 PM
That's okay, there's more than one way to skin a cat. But I don't think you're on the right track, either: the big reason for the move from tables to CSS (as Oracleguy keeps saying) is the semantic web.

So, things like this...


<ul class='menu'>
<li class='menuOptionEmpty'></li>
<li class='menuSpace'></li>
<li class='menuOptionEmpty'></li>
<li class='menuSpace'></li>
<li class='menuOptionEmpty'></li>
<li class='menuSpace'></li>
<li class='menuOption'>info</li>
<li class='menuSpace'></li>
<li class='menuOption'>net</li>
</ul>

...aren't that much of an improvement over tables because you're using markup that has meaning (list items in this case) as an empty element for a style. Just my two cents there :)
I was just trying to make it look exactly like his... I wouldnt have done it this way either but it is the only way to make it look exactly like the one he already has... or at least I think so... then again I could be wrong.

e-Raser
08-02-2005, 05:15 PM
I've just started to use divs instead of tables and I found it much easier to use. You don't need to keep using rowspan and colspan, makes coding neater and easier to position.

_Aerospace_Eng_
08-02-2005, 06:08 PM
I was just trying to make it look exactly like his... I wouldnt have done it this way either but it is the only way to make it look exactly like the one he already has... or at least I think so... then again I could be wrong.
You could have used margins instead...

Thank you, all. I'm sure I can take something from each one. Here's a roughcut of my css version, sans the iframe, with dropdown menus, opacity, and nearly identical to the original: (viewable in FF only).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" title="Grey" href="grey.css" type="text/css" media="screen">
<title>No Need for a Page Title</title>
</head>
<body>
<div id="phony">
<div id="container"></div>

<div class="hub"><ul><li><a href="hub.php">hub</a></li></ul></div>
<div class="a2">&nbsp;</div>
<div class="log"><ul class="link"><li><a href="log.php">log</a><ul>

<li><a href="#">log option 1</a></li>
<li><a href="#">log option 2</a></li></ul></ul></div>
<div class="a4">&nbsp;</div>
<div class="works"><ul><li><a href="works.php">works</a><ul>
<li><a href="#" target="iframe">works option 1</a></li>
<li><a href="#">works option 2</a></li>
<li><a href="#">works option 3</a></li></ul></ul></div>
<div class="a6">&nbsp;</div>
<div class="a7">&nbsp;</div>
<div class="a8">&nbsp;</div>
<div class="a9">&nbsp;</div>

<div class="b1">&nbsp;</div>
<div class="b2">&nbsp;</div>
<div class="b3">&nbsp;</div>
<div class="b4">&nbsp;</div>
<div class="b5">&nbsp;</div>
<div class="b6">&nbsp;</div>
<div class="info"><ul><li><a href="info.php">info</a></li></ul></div>
<div class="b8">&nbsp;</div>
<div class="net"><ul><li><a href="net.php">net</a></li></ul></div>
<div id="fgbg">
<div id="fg">
Text goes here.
</div></div></div>
</body>
</html>

Stylesheet:

html, body { height: 100%, width: 100%; }
body { font-family: "tempus sans itc", "trebuchet ms", sans-serif; font-size: 16px; font-weight: bold; letter-spacing: 1.25px; word-spacing: 2px; background-image: url(http://www.nadamt.xmgfree.com/images/escher.png); text-align: left; font-size: 20px; color: rgb(230,230,230); margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
p { margin: 0px 0px 0px 0px; padding: 0px 0px 15px 0px; }

#container { position: absolute; top: 30px; left: 0px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 984px; height: 410px; background-color: rgb(30,30,30); filter: alpha(opacity=20); -moz-opacity: 0.5; opacity: 0.5; }
#fgbg { overflow: auto; width: 100%; height: 100%; }
#fg { position: relative; margin: 0px 0px 0px 0px; padding: 30px 20px 0px 0px; z-index: 2; background: transparent; }
#bg { position: absolute; top: 30px; left: 20 px; bottom: 30px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: rgb(100,100,100); height: 26px; z-index: 0; filter: alpha(opacity=20); -moz-opacity: 0.2; opacity: 0.2; height: 500px; width: 984px; }
#phony { position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: transparent; width: 984px; height: 470px; }

/***COMMON DENOMINATORS FOR INTERFACE ELEMENTS**.*/
/*ALL NAVIGATIONAL*/
div.a2, div.a3, div.a4, div.a5, div.a6, div.a7, div.a8, div.a9, div.b1, div.b2, div.b3, div.b4, div.b5, div.b6, div.b7, div.b8, div.b9, #fill { position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: rgb(100,100,100); height: 26px; z-index: 3; filter: alpha(opacity=20); -moz-opacity: 0.2; opacity: 0.2; }
/*ALL TOP ELEMENTS*/
div.a2, div.a3, div.a4, div.a5, div.a6, div.a7, div.a8, div.a9 { top: 0px; }
/*ALL BOTTOM ELEMENTS*/
div.b1, div.b2, div.b3, div.b4, div.b5, div.b6, div.b7, div.b8, div.b9 { bottom: 0px; }
/*ALL BIG SPACERS*/
div.a3, div.a5, div.a7, div.a9, div.b1, div.b3, div.b5, div.b7, div.b9 { width: 160px; }
/*ALL SMALL SPACERS*/
div.a2, div.a4, div.a6, div.a8, div.b2, div.b4, div.b6, div.b8 { width: 40px }
/*LINKS*/
div.hub, div.log, div.works, div.info, div.net { position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

div.hub { top: 0px; left: 0px; }
div.a2 { left: 163px; }
div.log { top: 0px; left: 206px; }
div.a4 { left: 369px; }
div.works { top: 0px; left: 412px; }
div.a6 { left: 575px; }
div.a7 { left: 618px; }
div.a8 { left: 781px; }
div.a9 { left: 824px; }

div.b1 { left: 0px; }
div.b2 { left: 163px; }
div.b3 { left: 206px; }
div.b4 { left: 369px; }
div.b5 { left: 412px; }
div.b6 { left: 575px; }
div.net { bottom: 0px; left: 824px; }
div.b8 { left: 781px; }
div.info { bottom: 0px; left: 618px; }

/*NAVIGATIONAL LINKS*/
ul, ul li, li ul, ul li a, li ul a { z-index: 3; font-weight: bold; text-decoration: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
ul { list-style: none; width: 160px; }
ul li { position: relative; }
/*DROP DOWN MENU STYLE*/
li ul { position: relative; width: 250px /*SAME AS OPTION STYLE*/; display: none; }
/*DISPLAY*/
li ul a, li ul a, ul li a { display: block; background-color: rgb(100,100,100); filter: alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; position: relative; top: 0px; left: 0px; }
/*DROP DOWN MENU LINK STYLE*/
ul li a { color: rgb(255,255,255); background-color: rgb(100,100,100)/*SAME AS OPTION STYLE*/; }
li:hover ul, ul li a:hover, li ul a:hover { display: block; background-color: rgb(125,125,125); filter: alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; z-index: 3; }
/*DROP DOWN MENU LINK HOVER STYLE*/
ul li a:hover { background: rgb(50,50,50) /*SAME AS MENU HOVER*/; width: 160px; }
/*DROP DOWN MENU OPTION HOVER STYLE*/
li ul a:hover { width: 250px/*SAME AS DROP DOWN MENU STYLE*/; background: rgb(50,50,50) /*SAME AS DROP DOWN MENU STYLE*/; }
You still have a lot of divs that don't seem to be used for spacers or something, this is why there is margin and padding. If its just one li then I don't see the need for using a list for that one li.

SpirtOfGrandeur
08-02-2005, 07:42 PM
You could have used margins instead...


Margins for what? Margins are for empty space between boxes. Which was defined. He wants empty filled boxes. How am I supposed to use margins for that?

Any ways I did get a way to fix the above to be semantic but it comes at a price of making an image to give the desired effect that he wants. You have to make a transparent png for the background of the menuTop and menuBottom which you would set as the background to div.menuStyle. Then you can use this HTML which is what people want.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>No Need for a Page Title</title>
</head>
<body>
<div id='mainContainer'>
<div class='menuStyle'>
<ul class='menuTop'>
<li class='menuOption'>hub</li>
<li class='menuOption'>
<a href="log.php">log</a>
<ul>
<li>
<a href="#">log option 1</a>
</li>
<li>
<a href="#">log option 2</a>
</li>
</ul>
</li>
<li class='menuOption'>
<a href="works.php">works</a>
<ul>
<li>
<a href="#" target="iframe">works option 1</a>
</li>
<li>
<a href="#">works option 2</a>
</li>
<li>
<a href="#">works option 3</a>
</li>
</ul>


</li>
</ul>
</div>
<div id='content'>
This is where i can dance! :)
</div>
<div class='menuStyle'>
<ul class='menuBottom'>
<li class='menuOption'>info</li>
<li class='menuOption'>net</li>
</ul>
</div>
</div>
</body>
</html>

rmedek
08-02-2005, 07:54 PM
Any ways I did get a way to fix the above to be semantic but it comes at a price of making an image to give the desired effect that he wants.
What price is that? Using an image to create a style is perfectly acceptable. Take a look at the myriad of background images used at the Zen Garden (http://csszengarden.com).

As a matter of fact, his design (fixed width and height) lends itself to using a background image. I'll show you once my server is back online :o

rmedek
08-02-2005, 08:29 PM
Ah, finally:

Old site, table layout:
http://www.nickadt.5u.com/

New site, html/css:
http://richardmedek.com/temp/example16.htm

Standards-compliant only for now (due to pngs).

SpirtOfGrandeur
08-02-2005, 08:34 PM
What price is that? Using an image to create a style is perfectly acceptable. Take a look at the myriad of background images used at the Zen Garden (http://csszengarden.com).

Yes i know about the ZEN but what I was talking about is IE's lack of transparent png's.

*Edit:
And on a side note I just realized that you just posted again. rmedek, thanks for the quick lesson. I have been trying my hardest to learn this CSS overnight, and it seems that while I was trying to take a stab at the answer I should have watched instead of playing. As a programmer who has been thrown into a dozen and a half classic asp/php projects none of which are standards complaint I decided to start learning it to make it easier for future generations of programmers. And From what I can tell I have a little further to progress.

rmedek
08-02-2005, 09:49 PM
And on a side note I just realized that you just posted again. rmedek, thanks for the quick lesson. I have been trying my hardest to learn this CSS overnight, and it seems that while I was trying to take a stab at the answer I should have watched instead of playing. As a programmer who has been thrown into a dozen and a half classic asp/php projects none of which are standards complaint I decided to start learning it to make it easier for future generations of programmers. And From what I can tell I have a little further to progress.

Thanks, and no problem... CSS definitely requires a a steeper learning curve than most people are used to with HTML. The biggest thing, I've learned, is that it takes a different approach to design--content first, then style.

As far as IE goes... here's my updated solution:

http://richardmedek.com/temp/example16.htm

rmedek
08-02-2005, 10:07 PM
I defy anyone to tell me that using a simple table with two different class attributes would be slower.

http://www.websiteoptimization.com/services/analyze/wso.php?url=http://richardmedek.com/temp/example16.htm

Bring it on. :D

hemebond
08-02-2005, 10:22 PM
Thank you, all. I'm sure I can take something from each one. Here's a roughcut of my css version, sans the iframe, with dropdown menus, opacity, and nearly identical to the original: (viewable in FF only).You're still missing it. Your code there is not much better than the original. Look at my code. You need to markup the page without any regard to how it is suppose to look at the end. Forget CSS for now. Concentrate on using meaningful (semantic) markup. For example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<h1>My Website</h1>

<h2>This section</h2>
<p>This is a paragraph of text.</p>
<p>This is a paragraph of text.</p>

<h3>A Sub-Section</h3>
<p>This is a paragraph of text.</p>
<p>This is a paragraph of text.</p>
<p>This is a paragraph of text.</p>

<ul>
<li>A</li>
<li>list</li>
<li>of</li>
<li>items</li>
<li>possibly</li>
<li>a</li>
<li>menu</li>
</ul>
</body>
</html>Do that, then start thinking about your CSS.

cf2sg
08-03-2005, 04:16 AM
css load only for one time if the browser cache it, so save a lot of bandwidth ;)

nadamt
08-03-2005, 05:13 AM
http://www.websiteoptimization.com/services/analyze/wso.php?url=http://richardmedek.com/temp/example16.htm

Bring it on. :DTaken out of context (the thread wasn't called "why should I use composite images for my layout" (I originally wanted at least part of the layout to increase with the font size, and the fixed demensions were a placeholder)), but point well taken; it's faster...a lot faster.

To homebond:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
Page title
</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="6">
<h4>
Guess what?...
</h4>
</td>
</tr>
<tr>
<td>
I
</td>
<td>
hate
</td>
<td>
reading
</td>
<td>
and/or
</td>
<td>
writing
</td>
<td>
html
</td>
</tr>
<tr>
<td colspan="6">
<h1>
Parse Trees!!
</h1>
</td>
</tr>
<tr>
<td colspan="6">
Or anyother type of formatted code.
</td>
</tr>
</table>
</body>
</html>

(:(. Sigh...and I said I wouldn't respond.)

rmedek
08-03-2005, 05:23 AM
The real point is that the examples shown are more semantic than what a table layout offers, which is the point of modern coding, which is why CSS isn't a fad, it's the future.

And before you get all bent out of shape because Hemebond wrote an example for you, keep in mind he WROTE AN EXAMPLE FOR YOU, which is to say he went out of his way to help you be a better web coder. He didn't even approach his post with sarcasm.

I can't believe that with all these members trying to help you out, you're going to react this poorly. I'm done here... no point in trying to help those who don't want or appreciate it.

nadamt
08-03-2005, 05:07 PM
Geez, I sincerely hope I didn't offended anyone. I do appriciate the time anyone took to help me. It wasn't my iintention to come across as ungrateful, forgive me if I did. Though, I personally feel justified in my response to homebond, I apologize if he took it as my being malicious; I could understand if he felt he was trying to help, but formatted code is a matter of prefrence.

Again, thank you and good night.

oracleguy
08-03-2005, 07:01 PM
I can't believe that with all these members trying to help you out, you're going to react this poorly. I'm done here... no point in trying to help those who don't want or appreciate it.

I've been thinking the same thing.


Though, I personally feel justified in my response to homebond, I apologize if he took it as my being malicious; I could understand if he felt he was trying to help, but formatted code is a matter of prefrence.

Regardless, it was the wrong thing to do, when people are going out of their way to help you be a better coder, you should be nice to them. You asked the question, don't get all upset at us if you don't like the answer.

And on that note, thread closed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum