Horizontally spacing links in navbar with CSS

[David Gillaspey]

CSS gurus:

I'm redesigning my own site (which hosts this forum) -- offline -- to do away with the use of tables for layout and use CSS instead. (I already was using CSS in many other ways.)

Take a look at the navigation links under the banner on my site (http://www.greatchurchwebsites.org). These are currently laid out using a table row, which automatically expands the cells to fill the available space horizontally. How is this accomplished using CSS?

I played with this for a while last night. At present, each link is surrounded by a SPAN tag, one after the other. All the links, with their surrounding SPAN tags, are contained within a DIV container set in the style sheet to a certain width.

If you need to see actual style sheets, which is probable, I can add those tonight.

Thanks in advance.

Sincerely,

David Gillaspey
President
Great Church Websites

[xhtml]

UmOOzP <a href="http://oouujczivokb.com/">oouujczivokb</a>, qghrdiyposxp (http://qghrdiyposxp.com/), bbiqwzjnnpcy, http://xenxsfwpnmpy.com/

[Faithhb_lutheran]

Ed,
that was an excellent link I bet it would greatly help some of the amateurs and code tweakers in our midst You might want to repost it under the "what tools do I use section".

David,
Below is just my opinion and is not a criticism!

Why are you switching. Your Nav bar is doing the exact thing that tables were meant to do in HTML, display data horizontally. I am all for improving the web but a new technology is only an improvement if it does something more efficient than its predecessor did and it seems to me that the CSS is more complex than tables in this instance. I wish that more than a small percentage of the W3C community actually understood basic business principles then we wouldn't have so many bad side roads that people get led down.

[JackWolfgang]

Ed stole my thunder, but I will add to what he said:


For an example of what Ed spoke about that isn't on the Listamatic site:
http://TriStateCamp.org

The whole thing is XHTML/CSS/PHP. The list design did come from Listamatic's site, but it needed some tweaking to work properly in Internet Explorer.
A List Apart (http://alistapart.com), a web standards blog-zine (yes, I just made that up) founded by Jeffery Zeldman (http://www.zeldman.com/) (who wrote the book Designing with Web Standards), featured an article called Retooling Slashdot with Web Standards (http://www.alistapart.com/articles/slashdot/). The idea was to move the popular news site from HTML 3.2 nested-tables design to XHTML 1.0 Transitional and CSS. The article discussed using "semantic markup" for the site, and this is the quote about lists:
Essentially, anything that there was more than two of was put it into a list, for example: login, sections, help, stories, about, services, etc. Lists can be described and positioned in any way that we want, and by stating that elements are part of a list, we are describing their relationship to each other.


So to summarize, lists are a great way to do menus!

[flutem3]

Hi, Everyone,

Which is the good link for amateurs? I couldn't tell when I went to them.

I have a question which will make you laugh, but that is okay. I have 54 processes running on my computer. How do I turn some of them off? I think they are slowing down the computer. Someone told be to go to "run" and then find where it says "start up" and delete unwanted stuff. I did that, but I am here to tell you that nothing like 54 showed up...just a few. I found two to delete.

I don't want the programs (processes ?) to go away forever. I just want to turn some of them off. I know there are also processes which must run.

I am having a wonderful time reading all of your posts. And I am paying attention to what you are saying. Sometimes I wonder what it all means, but that is okay.

While I am here, I want to ask something unrelated. What so you have in your software that enables you to design the drop down or pop sideways menu. For example: Major section: Activities Click "Activities" and under that will be Boy Scouts, Choir, etc. I would like to do that since I have this montrously long menu. Is there anywhere I can pick up some HTML script to do that? I can insert script in my software.

Thank you.

Have a wonderful and glorious Easter!

Carol

[flutem3]

So to summarize, lists are a great way to do menus!__________________


Hi,

I don't understand that, but I am going to check it out. By the way, are there other nifty things you can do with lists other than make lists.

When you use the word, list, do you mean it the way I understand the word? Or does it have a special computer meaning that I don't know?

Where did you find how to use lists to make menus? Can I import the HTML to do it?

Thanks,

Carol

[xhtml]

Kyle;

Not trying to answer for David but he's already using some CSS on his main navigation - so why not eliminate the use of tables and do it the semantically correct way? Can save you a lot of trouble down the road if you have to add/remove navigation links - don't have to edit a lot of table cells for example. Same reason you never want to use the obsolete <font> element - why edit hundreds of <font> elements to change a few colors on your pages when you can do it by editing one or two lines in a single CSS file?

When I visit a web site, if I turn off styles on the site, I would expect to see a semantically correct - ordinary web page that is viewable by any user agent, from PDA to screen reader to graphical browser. In other words if I viewed the Great Church Websites home page with styles turned off, I would see something on the order of:
A skip link so that users with text only or screen readers can skip the masthead area and go straight to the content and would be hidden when styles are on.
Conversation Starter (a simple paragraph of text)
Site Title - Great Church Websites - a level 1 heading
The Tag line "Helping Churches Fulfill..." a level 2 heading or just a paragraph
The Main Navigation as an unordered list of links
Then either the left side bar content or the main content area...If for some reason you didn't want to use an unordered list, say for simple breadcrumb navigation, you could use either a <div> or <p> element and just style the anchor elements themselves - problem with that is that with styles turned off all the links may be run together - so a list is more logical. They can be simple anchors that change colors when you hover over them, or they can be styled to look like buttons (complete with background images), etc., and no need for JavaScript which would fail if a user has JavaScript turned off or their device doesn't have it.

It may seem like a lot more work to use CSS to style the navigation, but it can be as simple or fancy as you like. It really isn't hard and the benefits of being able to change the look of the navigation or other list elements by editing one file as opposed to many table cells makes it worth the effort.

Sure you will see differences in some browsers, but IE 6 in standards compliance mode usually works out pretty well with little or no tweaking. IE versions 5.1 and less are obsolete and Netscape 4 has officially gone to browser heaven, so don't worry about them. Good way to get people to upgrade to a better browser. IE 7 promises to take care of most of the old bugs/issues, but of course it will be a very long time before it becomes common place. Gee, MS, why didn't you make it available for all versions of Windows? Huh?

Carol;

The first example I linked (http://css.maxdesign.com.au/) to is probably best for a beginner, since all the examples show the CSS source used to style the lists. Once you get the idea and see examples, you can quickly workout your own styling.

Also when we speak of lists in (X)HTML we're talking about the:
1. Unordered list
<ul>
<li>List Item</li>
...
</ul>
Or
2. Ordered list
<ol>
<li>List Item</li>
....
</ol>

These lists can be styled in all sorts of ways.

In some cases you could even use the <dl> (definition list) element for navigation (the W3C site used to do that) or for say a list of links to other sites. Not truely a definition but a logical method to use instead of nested <ul> lists. You could do something like this:
<dl>
<dt><a href="somesite">Website Name</a></dt>
<dd>A brief description of what the website is about</dd>
</dl>

Your other question - are you talking about operating system services running in the background or just all that junk that many programs will install that fill up your menu bar with all those "cute" little icons and basically aren't needed?

There are some services that can be disabled but a lot of that other stuff may require you to get into the Windows Registry to eliminate. You are right - that stuff will slow down the computer and waste a lot of memory too. Some of those add-on's should have a way to turn them off (try right clicking on the icon and see).

Jack, et all;

Here's another CSS book that I would highly recommend
CSS Mastery (http://www.cssmastery.com/) - really explains some things about CSS much better than I've seen before and well worth the money. I think you'd like it. I have Zeldman's book, but don't like the idea that he used a so-called hybrid layout for examples - still it's pretty good.

[xhtml]

So to summarize, lists are a great way to do menus!__________________
I don't understand that
Carol;

Just as an example of what we're talking about with using lists for menus and ways to style them, I put up a sample page that demonstrates a properly marked up web page with and without CSS styling and the use of a lists for navigation menus (styles both horizontal and vertical menus). Note that the pages are identical as far as the XHTML markup and content (demo stuff for a template) is concerned.

Choose item 1. to see the page without CSS style and 2. to see the same page with CSS styles applied.

Basic page without CSS style (http://chrysler.websitewelcome.com/%7Eevasser/styletest/nostyle.html)
Same page with CSS style applied (http://chrysler.websitewelcome.com/%7Eevasser/styletest/styled.html)
Where did you find how to use lists to make menus? Can I import the HTML to do it?
Using lists to make navigation menus is pretty basic CSS stuff that you'll see in most any good book or tutorial about CSS and there are numerous ways that lists can be styled - horizontally - vertically (like this example) - made to look like buttons with roll-over effects, even drop-down lists that don't require the use of JavaScript (well not for IE!).

Yes, you can often copy the CSS styling from someone's (non-copyrighted) styles sheet and use if for the basis of your own styled list menu. The basic (X)HTML markup for such a list is always pretty much the same - example:

<ul>
<li><a href="about.html" title="About My Website">About</a></li>
<li><a href="interest.html" title="Interesting Stuff">Interesting</a></li>
<li><a href="contact.html" title="Contact The Author">Contact</a></li>
</ul>

Of course you'd change the page links to whatever your actual pages are and the title (if used) and link content. The title attribute can be used to give the user a brief popup description of what the page pertains to that may be more descriptive than just the link content.

Do these examples make this a little clearer for you?

[Faithhb_lutheran]

Ed,

I thought I would get a rise out of you, good. What I was trying to get at is the way david has his table is semantically correct, non nested, a straight tabular is the correct use of the table element, thus my question. I could likely come up with a few good reasons, ie to improve personal CSS proficiency, to make site completely CSS based, etc..,

Below is off topic :D sorry for the rant

but the larger issue that I wanted everybody to think about is that a lot of times web professionals and especially church webmasters don't take the basics of business into account when they do planning. One of the first things taught at management 100 classes is the definition of management (and we are webMASTERS). It usually goes something like this "Management is working through others to accomplish tasks that help fulfill organizational objectives as efficiently as possible". Our jobs as webmasters is to accomplish the task of evangelism to the world through the web as efficiently as possible, thus we must not adopt technology for technology's sake but because it fits within our planning on how to most efficiently spread the gospel to the world. The worst of any made object comes not in the object itself but in our use of it.

Humanity is acquiring all the right technology for all the wrong reasons.R. Buckminster Fuller (http://www.quotationspage.com/quotes/R._Buckminster_Fuller/)
US architect & engineer (1895 - 1983)

[David Gillaspey]

Hi Ed, Kyle and Jack (and Carol),

Thanks for your responses! Sorry to take so long to jump back into my own thread; I had some other stuff I had to take care of.

Ed, I followed your instructions as well as that contained in the CSS list tutorial you cited. The results look great, but ? and this is a very big "but" ? the styled horizontal list does not appear to automatically fill the available space horizontally. That was the critical requirement.

Tables, antiquated though they may be, do this automatically, if you set the table width to 100% (and don't set specific widths for cells in a table row). Each cell in a table row is displayed with the maximum width it can have, so that the table row fills out the width of the table, sort of like justified type.

Is this not possible with CSS? I tried setting the padding around the links in the horizontal "list" to "auto" which can be helpful in other situations, but that doesn't yield the desired result.

The tutorial used "relative" units for padding around the links, e.g., 1em, but even if I use such "relative" units to specify the padding, I would still end up increasing or decreasing the amount of padding until it looked right on my screen, with no guarantee that the navigation bar will look right in someone else's browser.

(It's interesting that a horizontal row of links would be considered a list. The buttons on my car radio for preselected stations, buttons that are arranged horizontally, would never be thought of as "a list of buttons that happen to be arranged horizontally." However, your reference to making sure that horizontally arranged links appear in a usable and accessible form ? as a vertical list ? in a cell phone browser shows the advantage of the paradigm.)

If a CSS styled, horizontally arranged list can't be made to fill out the available space automatically, then I guess I'll have to go with Kyle's suggestion: just use an old-fashion table to accomplish my purpose.

Thanks again for your responses, and the good discussion.

Sincerely,

David Gillaspey
President
Great Church Websites

[Faithhb_lutheran]

David,
I don't want to step on Ed or Jack's expert toes but wouldn't the following work

add width property to the ul.class selector of 100% to give you the same effect as a table with the width set to 100%

Then, add text align center ( so that there isn't a gap at the right of the screen) and a width 100% properties to the li.class selector to get them to auto fill like td elements would.

Or will li elements auto fill like td's if the enclosing tag is set to 100%?

Hope this helps and if not someone please chew me out:)

P.S. I just made this post and realized I'm at 100 posts. Cool
God willing I'll be around for a hundred more:D

[JackWolfgang]

I was just wondering about setting the width of the ul to 100% myself.

[David Gillaspey]

Hi Kyle and Jack,

Thanks for responding.

I did try setting several things to 100% width, but don't remember ? I'm writing from work at the moment ? if I tried the techniques that you (Kyle) suggested.

It will be Thursday night before I can check out the suggestions. I have to focus on my art studies for the next few days. I'll let you know later this week, then, whether the suggestions worked, or not.

Sincerely,

David Gillaspey
President
Great Church Websites

[David Gillaspey]

Hi everyone,

My current efforts to redesign my website to webs standards can be seen here:

http://www.davidgillaspey.com/thankyou.php

(Ignore the content of the page; I just chose this page to work with because I knew it had just simple content.)

I was stymied for a couple of weeks by Firefox's seeming refusal to obey the CSS stylesheets I was writing. I found a site on the internet that suggested the problem was my Macintosh OSX-based Apache server was missing the correct MIME type. This was confirmed by the web developer plugin for Firefox, which some of you have extolled highly.

Since I don't know how to add a MIME type to Apache at all, much less a Mac OSX implementation of it, I was stuck. But finally I hit upon the scheme of uploading my test page (and, in the future, test pages) to another of my websites. The Apache implementation that my web hoster runs does have the correct MIME type for Firefox to load and interpret a CSS stylesheet. (That could pretty much be assumed.)

It looks like the navigational links under the banner will have to continue to be laid out using a table, which naturally divides the available horizontal space up equally among all cells in the table row. CSS seems incapable of doing this.

The big problem I now have can be seen by the 1 point red box on my test page, when viewed in Firefox (it looks OK in Internet Explorer). That will eventually be a black box, that is supposed to go around all the content of the site. Thus it needs to be deeper than the lefthand column, always, or deeper than the main content area in the event the main content is deeper than the lefthand column. The red box that displays makes it clear that that is not happening. (There's a number of break returns under the single paragraph that comprises the main content, which explains why the red box is as deep as it is currently. I need it to be as deep as the lefthand column, or deeper than the main content when the main content area runs long.)

Below is my CSS code (the relevant portions, that is.) Any advice that would help solve this problem would be appreciate.

Now on the positive side, the page as a whole shows a cleaner design than you see on my current website (http://www.greatchurchwebsites.org), thanks to CSS-based layout.

Thanks in advance.

Sincerely,

David Gillaspey
President
Great Church Websites


#browserWideContainer {
width:100%;
height:100%;
margin:0px;
background-color:transparent;
}
#actualSiteContainer {
width:900px;
height:100%;
margin:12px auto 12px auto;
border-width:1px;
border-color:red;
border-style:solid;
}
#banner {
margin:0px;
padding:0px;
}
#topNav table {
margin:0px;
padding:0px;
font-size:x-small;
background-color:#DFD2B3;
}
#mainContainer { <!-- holds left column and main content area -->
height:100%;
border-top-width:1px;
border-top-color:black;
border-top-style:solid;
}
#leftCol {
margin-left:9px;
margin-right:9px;
text-decoration:none;
font-size:x-small;
width:169px;
height:100%;
float:left;
border-right-width:1px;
border-right-color:black;
border-right-style:solid;
}
#middleContent {
height:100%;
margin-top:9px;
}

[JackWolfgang]

David--

A quick question. Did you validate?

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.davidgillaspey.com%2Fthankyou.php

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.davidgillaspey.com%2Fthankyou.php

--Jack, aka the standards-compliant code Nazi.

[David Gillaspey]

Hi Jack,

I have validated the CSS file (that was interesting), but was waiting to validate the entire page as a whole. But I get your point. I'll try to do that tonight.

Sincerely,

David Gillaspey
President
Great Church Websites

[David Gillaspey]

Hi all,

It's been three weeks since I've been able to work on this project (redesigning my own website, which hosts this forum). I was finally able to complete my test page last night.

Again, the test page is here:

http://www.davidgillaspey.com/thankyou.php

Please ignore the content of the page, which is a thank you for contributing to my site. This is an old page that just happens to be suitable for testing.

The CSS style sheet validates using the validator here:

http://jigsaw.w3.org/css-validator/

though there are some warnings.

The page itself doesn't quite validate (for HTML 4.01 Strict), however, using this validator:

http://validator.w3.org/

There are 18 errors according to the validator. These are due in part to the OBJECT and EMBED code used for the Flash movies on the page. There is a workaround for this to be found on the internet (that is, a way to avoid using OBJECT and EMBED to insert a Flash movie), but I'm not interested in using a workaround just to make a page or site validate when I add Flash.

Also, the validator is flagging some phantom code, which appears to be session ID-type data associated with forms. I say "phantom" because the validator is flagging things that are simply not in the original source code. I would describe it as "hidden" hidden input tags used to pass data from one page to the next. (The redundancy is intentional.)

At this point, the page validates well enough for my purposes.

As you will see by comparing this test page with my existing website (http://www.greatchurchwebsites.org), which uses tables for layout (plus plenty of CSS; they are NOT mutually exclusive), the design of the test page is much cleaner and nicer looking. So hooray for CSS.

However, I am still using tables to a small extent to accomplish my design goal. These address what appears to me to be deficiencies in CSS-based layout.

As mentioned in the starter post for this thread, I wanted CSS to be able to spread out the links under the banner (on my test page), always using the entire available horizontal space. That is, I did not want to hardcode the width of any area containing a link. This appears not to be possible using CSS, whereas a table set to a width of 100% does it with ease. So, I am using a table for the links under the banner.

Also, it appears that CSS is not capable of correctly putting a box around an entire site, regardless of which column on a page is the longest. A table does this with ease. Thus I had to use a table with one cell to wrap the entire page / website with a border.

Now in both cases, I would love to be proven wrong. If you are a CSS expert, I invite you to prove me wrong. No theories, though — show me that both of the above can be done using CSS only — no tables — with actual, working online examples.

I noted one small but annoying difference in the look of the test page from one browser to another. In some browsers, there would be an extra 12 pixels of space under the top of the box that surrounds the page.

I found a simple PHP browser detection script here:

http://techpatterns.com/downloads/php-browser-detection-basic.php

that I am using successfully to correct the problem. At this point, the test page displays correctly in Internet Explorer, Firefox, Netscape and Opera on Windows, and Firefox on the Macintosh. I'll test a few other browsers later.

At this point, I am pleased with the design (though I may and probably will add a light background texture later), so now I will begin converting the rest of the pages of my website to the new table-less (more or less), standards-based (more or less) design. Offline, of course.

Sincerely,

David Gillaspey
President
Great Church Websites

[flutem3]

Hi, David,

I am not positive what you are doing differently. I am unable to tell just by looking at the page. Is that correct? I shouldn't be able to see anything, right? If I should see something differently, what is it?

Anyway, I took that validator and ran our index page through it. I nearly fainted dead away!! :confused: There are 42 errors. I was reading what it said and didn't understand a bit...other than the "rectangle element is not recognized." It may not be recognized by the validator, but it certainly serves me well.

I am glad you have found time to get back to your project. I try to learn from what you guys do. Occasionally, I am successful. Usually, I have to tuck the information in my cap and keep hold of it until I learn more. I think I have a very selective learning process going on here.

Thanks to one and all for sharing your trials and tribulations. What a good place to learn this is. Thanks, David, for putting it up.

Good luck. I hope all is well!!

Carol

[David Gillaspey]

Hi Carol,

Yes, I suppose the differences are subtle. The differences (between the test page and the actual site) are mostly to be seen in the rules and borders (especially, how they meet) and in the navigational links in the column at left.

Under the hood, however, there are huge differences.

Sincerely,

David Gillaspey
President
Great Church Websites

[flutem3]

Thanks for the reply, David. I have no doubt about differences "under the hood." I was just curious whether there was something I was missing when I looked at the page. If I missed it, I wanted to know what it was so I could check it out.


I have begun looking at source codes for various sites just to get an idea what they look like. I didn't even know whether our website had a doctype, but it does. I am learning in a hodge-podge way, but that is okay. I didn't have the nerve to look at all of the coding before...just tiny bits. Now, I can look at big chunks of it. My overwhelming feeling when I look at it is that I could work until I died and not learn to do that. In the meantime, there would be no website. :) I think that may be true for many people.

What kind of errors were you making that the validator picked up? Were you making many kinds of errors or the same error over and over again? I am just curious about this stuff.


The people on this website are technically advanced from where I am and maybe others as well. I don't know. But I like it. You have no idea the odds and ends of ideas I have learned and am using that I learned from here.


I got very brave and sent the URL for our new index page to Curtis. He was very kind. And I was very happy. :D


Carol

[JackWolfgang]

It's been three weeks since I've been able to work on this project (redesigning my own website, which hosts this forum). I was finally able to complete my test page last night.

Again, the test page is here:

http://www.davidgillaspey.com/thankyou.php

Please ignore the content of the page, which is a thank you for contributing to my site. This is an old page that just happens to be suitable for testing.

Looks visually good, and similar enough to the original layout to look recognizable.

The CSS style sheet validates using the validator here:

http://jigsaw.w3.org/css-validator/

though there are some warnings.

Better link for the validation results: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.davidgillaspey.com%2Fthankyou.php

Warnings are OK (but should be looked at to determine how serious they are. Usually they are about not selecting all the colors when you select any color, which is good practive to avoid problems with contrast.). Errors are what need to be corrected for standards-compliance. Congrats on standards compliance.

The page itself doesn't quite validate (for HTML 4.01 Strict), however, using this validator:

http://validator.w3.org/

There are 18 errors according to the validator. These are due in part to the OBJECT and EMBED code used for the Flash movies on the page. There is a workaround for this to be found on the internet (that is, a way to avoid using OBJECT and EMBED to insert a Flash movie), but I'm not interested in using a workaround just to make a page or site validate when I add Flash.

HTML 4.01 Strict Validation Results (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.davidgillaspey.com%2Fthankyou.php)

Several errors are because you used an XHTML construct on the page. Try not self-closing (e.g. <br />) tags if you are going the HTML route. Notice the drop to 14 errors when validating XHTML 1.0 Strict:

XHTML 1.0 Strict Validation (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.davidgillaspey.com%2Fthankyou.php&charset=%28detect+automatically%29&doctype=XHTML+1.0+Strict&verbose=1)

Also, HTML 4.01 Transitional is more flexible with several areas, but it is still valid HTML. When I re-validated your page as HTML 4.01 Transitional, the error count dropped to 15:

HTML 4.01 Transitional Validation Results (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.davidgillaspey.com%2Fthankyou.php&charset=%28detect+automatically%29&doctype=HTML+4.01+Transitional&verbose=1)

Finally, the error count drops to 9 with XHTML 1.0 Transitional (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.davidgillaspey.com%2Fthankyou.php&charset=%28detect+automatically%29&doctype=XHTML+1.0+Transitional&verbose=1).

However, it does appear that there are issues with the embed tag, no matter whether you go Strict or Transitional.


Also, the validator is flagging some phantom code, which appears to be session ID-type data associated with forms. I say "phantom" because the validator is flagging things that are simply not in the original source code. I would describe it as "hidden" hidden input tags used to pass data from one page to the next. (The redundancy is intentional.)

That's strange.

At this point, the page validates well enough for my purposes.

I'm processing my response so that it doesn't sound wrong, but it has to do with validating 100%.

As you will see by comparing this test page with my existing website (http://www.greatchurchwebsites.org), which uses tables for layout (plus plenty of CSS; they are NOT mutually exclusive), the design of the test page is much cleaner and nicer looking. So hooray for CSS.

Not to mention bandwidth savings and speedier downloads due to the caching of the CSS and the smaller HTML due to the separation of content and presentation.

However, I am still using tables to a small extent to accomplish my design goal. These address what appears to me to be deficiencies in CSS-based layout.

As mentioned in the starter post for this thread, I wanted CSS to be able to spread out the links under the banner (on my test page), always using the entire available horizontal space. That is, I did not want to hardcode the width of any area containing a link. This appears not to be possible using CSS, whereas a table set to a width of 100% does it with ease. So, I am using a table for the links under the banner.

Also, it appears that CSS is not capable of correctly putting a box around an entire site, regardless of which column on a page is the longest. A table does this with ease. Thus I had to use a table with one cell to wrap the entire page / website with a border.

Now in both cases, I would love to be proven wrong. If you are a CSS expert, I invite you to prove me wrong. No theories, though ? show me that both of the above can be done using CSS only ? no tables ? with actual, working online examples.

Have you checked AListApart.com (http://AListApart.com), a web-zine devoted to standards-based design? There are a number of good articles there.

I noted one small but annoying difference in the look of the test page from one browser to another. In some browsers, there would be an extra 12 pixels of space under the top of the box that surrounds the page.

Ahhh, the joys of browsers that don't handle standards. Let me guess, it was IE.</br>

[JackWolfgang]

I thought I would get a rise out of you, good. What I was trying to get at is the way david has his table is semantically correct, non nested, a straight tabular is the correct use of the table element, thus my question. I could likely come up with a few good reasons, ie to improve personal CSS proficiency, to make site completely CSS based, etc..,

I was re-reading this thread, and I felt led to respond to this post.

Kyle, I don't want to be confrontational, but a list is a better construct for a menu than a table for the following reasons:


What is a menu? It's a list of options.
Tables are designed to visually present data that otherwise does not make sense. For example, 1 x 1 = 1, 1 x 2 = 2, 2 x 1 = 2, 2 x 2 = 4. There's no good way to present that data in a list or in text, so use a table (warning, what is below is air code:
<table>
<th><td></td><td>1</td><td>2</td></th>
<tr><td>1</td><td>1</td><td>2</td></tr>
<tr><td>2</td><td>2</td><td>4</td></tr>
</table>
A menu doesn't usually fit this construct. You want 1 piece of data, the hyperlink, based on 1 piece of data, where you want to go.
Tables present problems for screen readers when used for non-tabular data.

[JackWolfgang]

Anyway, I took that validator and ran our index page through it. I nearly fainted dead away!! :confused: There are 42 errors. I was reading what it said and didn't understand a bit...other than the "rectangle element is not recognized." It may not be recognized by the validator, but it certainly serves me well.

While something may serve us well, it may not be the right way to do it: Web Examples: the blink tag, animated spinning crosses and flying doves.

An offline example: one could take a six outlet power strip and plug six more of the same into it. You then would have 36 outlets, right? While this may work, you risk blowing a fuse or starting a fire.

The point to web standards is that each browser should render a standards-compliant page in the same manner. However, it doesn't work that way. We have to write code (CSS hacks, browser detection code) to make sure the pages look the same in IE, Firefox, Safari, Opera, etc. WHY?!?! It's a pain.

In a standards compliant world, we wouldn't have to do that.

So if we're not in a standards compliant world, why bother?

Because it makes disability accessibility easier, and as David says:
Why should you care whether such people [people with disabilities] can browse your site or not? Because they matter to God, too.

[flutem3]

Hey, Jack,

I have stopped using spinning crosses, etc. I did use a little chicken on the Kids' Page though. However, the rectangle element that Homestead provides is the only way I can make a border, for example. There is no other way that I know how to do it. Or if I want to make a line one pixel wide, I do it with the rectangle element.

I understand what you are saying, and I even agree with much of it. I just don't think I will ever get there. I keep learning from you all and change things as I learn them.

Maybe someday the standards people will get their entire act together so a person can learn one consistent way of designing a website. Now, that would be nice!! However, I don't think it will happen in my lifetime. :)

Carol

[David Gillaspey]

Hi Jack,

Thanks for responding, and for the wealth of advice.

Several errors are because you used an XHTML construct on the page. Try not self-closing (e.g. <br />) tags if you are going the HTML route. What, in your opinion, is the best standard to aim toward at this point in time (not just for me, but everyone): HTML 4.01 Transitional, HTML 4.01 Strict, XHTML Transitional or XHTML Strict?

Sincerely,

David Gillaspey
President
Great Church Websites

[David Gillaspey]

Hi Jack,

I was re-reading this thread, and I felt led to respond to this post. Kyle, I don't want to be confrontational, but a list is a better construct for a menu than a table for the following reasons....(I realize the original was addressed to Kyle.)

Allow me to reiterate the central point of the thread, and thereby sidestep the issue of whether menus are data or lists: I WANT to use CSS to horizontally space out the navigational links under the banner on my site. My problem is that, so far at least, I cannot find a way to do this with CSS.

The key point is, I want CSS to automatically distribute all available horizontal space among all the items in the menu. Tables can do this easily. I haven't found a way to do it with CSS, despite the suggestions that have been offered in the thread so far. I HOPE to be able to, but for now, alas, I am resigned to using a table.

(With CSS, one can easily arrange links horizontally, so that is not the issue. I want CSS to do more than just that.)

However, perhaps the answer is to be found on the AListApart site you mentioned. I'll check that out soon. I surely am not the first person to want to do this.

Sincerely,

David Gillaspey
President
Great Church Websites

[David Gillaspey]

I took that validator and ran our index page through it. I nearly fainted dead away!! :confused: There are 42 errors.Yes, I was shocked, too, when I ran my CSS style sheet and test (redesigned) page through the validators. One just has to plug away at finding the problems and correcting them.

Sincerely,

David Gillaspey
President
Great Church Websites

[David Gillaspey]

What kind of errors were you making that the validator picked up? Were you making many kinds of errors or the same error over and over again?Hi Carol,

It's been too long since I did the validation to cite specific errors, but the answer to your question is ... yes, and yes. That is, yes, there were some specific problems that weren't repeated more than once or twice, but also there were "systemic" problems that were repeated often.

As a general example, in the old days of the internet, fonts were specified with the FONT tag. That is not the correct way to specify fonts any longer (use the CSS construct

body [or whatever] {
font-family:"Verdana", "Arial", "Helvetica", sans-serif;
} instead), so if a web designer attempted to validate a page filled with FONT tags, he or she would certainly see this tag flagged repeatedly by the validator as an error.

On the other hand, a web designer might have also made errors that would be considered typos, for example:

<img src="art/mountain.jpg" alt="photo of snow-covered mountain>

Note the missing closing quote mark around the ALT attribute. (ALT is what screen readers used by the blind read aloud.)

This would be an example of something a validator would flag just once. On the other hand, if a web designer didn't use the ALT attribute at all on a page with many photos, that would be flagged repeatedly throughout a page by a validator.

Sincerely,

David Gillaspey
President
Great Church Websites

[flutem3]

What a wonderful explanation!! I think I understood what you said.

Thank you, David.

Carol

[JackWolfgang]

What, in your opinion, is the best standard to aim toward at this point in time (not just for me, but everyone): HTML 4.01 Transitional, HTML 4.01 Strict, XHTML Transitional or XHTML Strict?

Either of the XHTML DTDs. While they are still supporting the HTML 4.01 DTDs, they are working on XHTML 2.0. I believe it's conceivable when they finish that, HTML support could be dropped in favor of XHTML.

Personally, I shoot for XHTML 1.0 Transitional, because it's tolerant of the target attribute, but the Strict DTD is not.

[Faithhb_lutheran]

Hi everybody,

Sorry I I haven't been on the site in a few days. I had a problem with my laptop and finally had to shoot it, but I found a great deal on a nice HP (17 inch screens are really sweet!). anyway. lets blow through them. first

I was re-reading this thread, and I felt led to respond to this post.

Kyle, I don't want to be confrontational, but a list is a better construct for a menu than a table for the following reasons:
What is a menu? It's a list of options.
Tables are designed to visually present data that otherwise does not make sense. For example, 1 x 1 = 1, 1 x 2 = 2, 2 x 1 = 2, 2 x 2 = 4. There's no good way to present that data in a list or in text, so use a table (warning, what is below is air code:
<table>
<th><td></td><td>1</td><td>2</td></th>
<tr><td>1</td><td>1</td><td>2</td></tr>
<tr><td>2</td><td>2</td><td>4</td></tr>
</table>
A menu doesn't usually fit this construct. You want 1 piece of data, the hyperlink, based on 1 piece of data, where you want to go.
Tables present problems for screen readers when used for non-tabular data.
But confrontations are fun ( can you tell I was on debate in school). I concede that the optimal option for navigation schemes would be a menu, but what I was talking about was the competetive advantage of the technology. anyway your right the best way to do it is with lists.

moving right along



Carol


Or if I want to make a line one pixel wide, I do it with the rectangle element.

You could do this with a hr tag with an attribute of size=1 and width=100%like such;
<hr size="1" width="100%"> or for XHTML <hr width="100%" size="1"/>


and last but not least,
in response to jack's last post take this into account 70%+ percent of the market that use microsoft IE which has a lot of problems with XHTML and IE7 wont be out to the public until 2007 sometime so transitional html might be a safer bet for now.

[flutem3]

Kyle wrote:

"You could do this with a hr tag with an attribute of size=1 and width=100%like such;"

Hi, Kyle,

I tried that and found that it made a line about __________ long in kind of a gray color. I am making them of very long and very short lengths. It would take forever to do that way. If 100% is only that long, what on earth would I do to make a line the length or width of the website and to make it the color I want. And I had a terrible time putting the above line where I wanted it. I think I will stick with my odd rectangles.

However, if I got the tags set up once for a page, I could use them again, and it might be faster. I am going to try. Where do I put the hex value for the colors? The page would be cleaner despite itself. :)

Carol

[Faithhb_lutheran]

Carol,

The width="100%" attribute will stretch the HR to the size of whatever element is containing it. you must have it inside of a cell that is only that wide. alternatively if you knew the exact width you wanted you could use an absolute value like <hr size="500"> and that would give you a 500 pixel wide line. As for color, there is a color attribute like so<hr size="1" width=''100%" color="#000000"> all these attributes need a html transitional dtd to work, anything else and you will have to do it with CSS. Hope this helps.

[JackWolfgang]

and last but not least,
in response to jack's last post take this into account 70%+ percent of the market that use microsoft IE which has a lot of problems with XHTML and IE7 wont be out to the public until 2007 sometime so transitional html might be a safer bet for now.

The main thing with IE is to not feed it the XML prolog. PHP scripts to do this have been posted on the forum (http://www.greatchurchwebsites.org/forums/showthread.php?t=377). The XML prolog (or any other text before the Document Type Declaration) throws Internet Explorer 6 into quirks mode, which changes the way IE renders the (X)HTML.

That's been the only problem I have experienced with IE rendering XHTML (other than the standard quirks about its HTML/CSS rendering).

[Faithhb_lutheran]

The main thing with IE is to not feed it the XML prolog. PHP scripts to do this have been posted on the forum (http://www.greatchurchwebsites.org/forums/showthread.php?t=377). The XML prolog (or any other text before the Document Type Declaration) throws Internet Explorer 6 into quirks mode, which changes the way IE renders the (X)HTML.

That's been the only problem I have experienced with IE rendering XHTML (other than the standard quirks about its HTML/CSS rendering).

The problems with standard rendering is what I was talking about. As i understand it and correct me if I was wrong, but with xhtml most of the tags that have been replaced by CSS and that are browser specific are no longer usable so if IE has trouble rendering you can't dumb it down for the browser.

[David Gillaspey]

Update:

Haven't had much time to deal with this issue or continue work on re-designing Great Church Websites. This is due to my schedule: temporary full-time job, enrolled part time in art school, and family.

In the past few weeks, however, I converted several pages on my site that contained static tables to dynamically written pages. Also, I recently was able to purchase (as the result of new memberships) an upgrade to Macromedia/Adobe Studio 8 with the latest version of Flash and Dreamweaver.

Regarding the first item above, you may wonder how that has anything to do with this subject. It does. My list of vendors of proprietary Content Management Systems

http://www.greatchurchwebsites.org/CMS_main.php

and a second page here

http://www.greatchurchwebsites.org/CMS_more.php

together include more than 60 vendors. That's a lot of code (60+ table rows) to write and correct til the pages pass validation and I've added the recommended code for accessibility.

By contrast, a dynamically writen table has just one row of code. This is written over and over again on the fly with new data as the page is parsed and sent to a visitor's web browser. If there are 60 rows of data in the backend database (mySQL, in this case), then the one row of code is repeated 60 times, with each row containing new data.

So, which do you think is easier: to write and correct one row of data, or 60+? You get the point.

Regarding the second point above, my purchase of the upgrade to Flash and Dreamweaver, this is significant because the current (newest) version of Dreamweaver has many special tools for working with CSS. I believe this will be a big help to me as I work on the redesign of my site.

My full-time gig ends at the end of next week, unless the project (of which I am part) should happen to receive some more funding. Thus I expect to have lot of time on my hands in August to work on the re-design of my site, as well as other projects, such as www.discovergraphicdesign.com, an online guide to graphic design that I will be launching in a few months.

Sincerely,

David Gillaspey
President
Great Church Websites

[Faithhb_lutheran]

I really love the new macromedia studio. The adobe has really worked hard on integrating all of it's new product lines and dreamweaver shines especially bright with smooth integration to and from popular adobe and microsoft products along with it's new features to help with CSS and XML scripting. Flash also has come up with some new video to web integration tools that flat out rock.