XHTML/CSS no table template???

[kickass]

Has anyone succeeded in getting rid of the dang stinking tables in the code? I see it CAN be done but it would sure be nice to start with a template where they're already gone. Anyone?

[Ap0s7le]

I've been thinking about it, but I'm creating some custom stuff for a company here and don't have a lot of spare time.

I'll look more into it as time becomes more free.

later :)

-Casey

[kickass]

I've already started to play with it, and I think I might be able to get it done (someday.) However, one thing makes me nervous- in the admin section it asks how many columns you want for categories . . . if I'm not using tables, how is THAT gonna figure in? Is that adding something I don't want to the xhtml code if I've ditched the tables? I'd love to get this baby so it validates without 'em. Anyone know what and where I should be looking to make sure that doesn't screw me up? I'm using a simple unordered list instead of tables, with the subcats in a paragraph within the category list item.

If I run into other problems I'll yell- very very loudly. And if I succeed I'll yell it from the rooftops :wink:

[David]

Yes, I will be interested to know what you did.
Assuming we were to not use tables BUT wanted to split the categories into columns, can you tell us what you would replace the code with?

Ex. Let's suppose we had this:
Content visible to registered users only.

What would be the simplest CSS substitution for the above?
(The answer will go a long way toward telling you how to mod the code)
Thanks,
David

[Ap0s7le]

Rather than creating new Content visible to registered users only. you would simply create Content visible to registered users only.

Correct?

[kickass]

Test case here (what I ultimately wanna do, instead of a table, in simplified form):
{Old Link Removed}
You'll notice I tried to do this as nested lists, but that just would NOT work, while the paragraph within a list item works nicely and validates as well.

Inspiration here:
http://www.alistapart.com/articles/layeredfudge/

Directory here:
http://kickasswebdesign.com/webgeekdir/

I'm starting to get punchy looking at this, it's after midnight and bedtime, and I haven't really played with the styling a lot yet. But I did succeed in getting the list where I want it, HOWEVER I seem to have an empty list item I cannot seem to get rid of, no matter what I do with li and /li placement, though basically the list itself is working out. I'm pretty okay with xhtml and css but can just about read php and figure out what's doing what, and can't write it, so any help will be appreciated, you probably understand that part better than I do. I've put the php main template file here, saved as a text file.
http://www.kickasswebdesign.com/webgeekdir/templates/main.txt

Hopefully you'll have me all straightened out when I get up bright and early 8)

[Ap0s7le]

I started to play here, gave it a couple minutes but I've got other things I have to do. I'll play more later, and it wont validate of course, you can tell by looking into the code. Look here
{Old Link Removed}
The Cat/subs are in unordered list as you can tell...

later

[kickass]

http://kickasswebdesign.com/webgeekdir/

I haven't really customized the styling, since I'm redoing the whole layout, but at least I've got the category list into a list and out of a table. Page doesn't validate, but, for the most part, it's because of generated code, and not anything I have control over in the template, I think, though one is with a form element at the top I don't understand what the validator is saying, but might be fixable in the template.

PLEASE tell me why this is generating an extra list item! Template code in txt form here:
http://www.kickasswebdesign.com/webgeekdir/templates/main.txt

I currently have no featured listings- where do I have to place ul and li stuff in that part of the template code?

Also, in my admin area I've changed my Directory Name and Description in the only area it lets me, yet it's still showing on the index page as "Directory Home". What do I have to do to change that??? In the header template there's a call for $in_page_title and for $description - is there someplace I can configure those to read the way I want, if not through the admin?

[Mike77]

hi..um..kickass :)

here is the answer for directory name:

http://www.phplinkdirectory.com/forum/viewtopic.php?t=346&highlight=directory

BTW,just wondering - why are the tables problem?

[kickass]

Tables are bloated code. Tables are a wrong use for layout, since they mix the layout into the html code, instead of putting it in the css file where it belongs. Tables are a pain in the butt to style and make work properly in IE6. Alternative devices, such as screenreaders, cellphones, palmpilots, etc, have trouble "reading" tables. Search engine spiders don't care much for tables either, though they're not as bad as frames. And tables are semantically incorrect for the listed data included in this (and almost any) links directory. Taking tables out of a layout allows me to achieve much more in the way of design beauty and gives me many more hooks upon which to hang styles. Besides that, I've already proven that lists work . . . this is not yet styled, but there aren't any tables in most of the front end, and they'll all be gone when I'm done customizing. I still have a bit of tweaking to do to achieve validation.

http://kickasswebdesign.com/webgeekdir/

I'm a proponent of good, clean xhtml/css coding, which makes for separation of presentation and content. Table layouts are so . . . 90's.

If you want to learn more about up-to-date xhtml/css coding, poke around in the css area of the above directory, and you'll get an eyeful. There's so much more possible when you get rid of the dang tables . . .

Oh, and thanks for the steer to that answer. Boy, do we need a wiki in this place . . .

:wink:

[kickass]

WOOHOO! Other than going through it with a fine tooth comb and trying to make it validate-- it's a done deal! I would appreciate browser checks in Mac please. And if anyone knows why Opera hangs on the load I'd love to know, though it does load fine eventually.

http://kickasswebdesign.com/webgeekdir/

Please feel free to add your URLS to the directory!

[vkaryl]

Not hanging in Op 8.01 for me, in fact that's about as instantaneous a load as I've ever seen in ANY browser on ANY page ANYWHERE! Op 7.23 loads the page a bit slower and without the stylesheet (which is way weird!)....

But I get the following:

Unknown context
Syntax error while loading: line 3 of inline script at http://kickasswebdesign.com/webgeekdir/ :
!='')a[i].onclick=count_link;functioncount_link(){i=newImag e
---------------------------------------------------^

in the javascript error console.... on both versions of Op....

[kickass]

That's from the inline javascript script that's within main.tpl. Vicki,you should post that to the bug thread, I'm all thumbs when it comes to javascript.

[vkaryl]

Okay, will do. Wasn't sure at this point whether it was THIS program, or something else you had going on....

[dcb]

About HTML code without tables you forgot to mention one thing though: they are so much harder to implement because of the browser incompatibilities (in certain situations). I like the idea of code without tables, but after trying that on a quite simple layout (maybe not so simple), I gave up the idea of having designs completely without tables. I did it afterall, but it doesn't look exactly the same on all browsers, and still has some problems in certain situations in certain browsers.
Of course it's a good idea to implement clean simple code that makes use of CSS as much as possible, but sometimes tables are simply the logical solution.

[Ap0s7le]

I concur dcb.

later

[kickass]

Tables are only the logical solution for tabular data, really. And all the browser bug workarounds have been solved, for the most part. If anyone needs a steer for fixing a non-table layout I highly recommend the css-discuss list.
http://css-discuss.org

Though I understand your frustration, having experienced much of it myself on my learning curve to achieve css proficiency (a curve I'm still climbing), I must tell you that there is ALWAYS an alternative for a layout table if it's being used for nontabular data. And that alternative will be cross browser compatible and work into the future on devices we haven't even dreamed about yet. Those who chain themselves to table layouts also chain their websites to the desktop. I prefer not to limit myself in such a backward way. It would be like a php coder deciding to only write in php3 code . . .

[kickass]

Oh, one more thing-- I DARE YOU to take up the challenge . . .

http://www.benmeadowcroft.com/webdev/question/example.html

You can have your tables, thank you very much. :wink:

[David]

I think it is exciting to explore a world without tables, but it is also important to recognize that there are some wonderful applications that use tables. Tables will become obsolete only when it is easier not to use them. It's sort of like getting people to recycle. :)

[vkaryl]

Actually, the only obsolescense tables should be subjected to is that of being depended upon for layout. Tables are perfect still and will always be perfect for their original purpose: laying out and displaying tabular data.

There's no reason to abandon the use of tables for tabular data - only for layout. CSS should be used for layout, tables for things like calendars and spreadsheet-type displays of data.

Since I finally managed to "retire" again last October, I've been delving into CSS again. (I had about a 4.5 year hiatus while I was working, when all I did on sites was upload tweaks and fixes if necessary - and some of those sites were still in tables for layout.) I had and still have a ton of relearning to do - but one thing I did discover fairly quickly: it's just not that difficult to take a site out of tables....

[David]

I don't doubt it can be done.
It just needs to be easy for people, both coders and noobs trying to install the directory.

[kickass]

David- I will make it MUCH easier for everyone as soon as I have a few spare moments. I'm planning on developing three simple templates for the community when I have the time (probably not until September sometime.) They will be a one column with full header and footer, a two column with full header and footer and a three column with full header and footer (simplified version of what I'm using on the Kickass Webgeek Directory (http://www.kickasswebdesign.com/webgeekdir/))

I plan on making these really really really simple so folks can customize them to their heart's content. And they will NOT have a single table anywhere in source (except admin, which doesn't matter, at least not to me since I'm the only one who sees it) and will work in all the latest and greatest browsers on Win, Mac and Linux.

Of course, it would be MUCH easier to guarantee that cross browser compatibility if the script didn't generate number ID attributes and nonencoded characters . . . Yes, this is a huge hint for some work toward xhtml/css validation in the final release.

[Ap0s7le]

Hello,

The columns need to be dynamic, so not just one/two/three but for as many as the admin chooses in the administration.

Have a good evening.

-Casey

[kickass]

Don't you think it would be much easier for them to simply choose to download the template they want and not worry about adding more complication to admin??? Why make something so simple more difficult? Especially since people from WordPress and other communities are used to the theme/template idea already.

Once they overwrite the template and main.css in their installation they'll be good to go. No muss, no fuss.

[Ap0s7le]

We more than likely will be moving in that direction sooner than later.

But for the time being we have a lot of installs out there that the feature would stop working in, thus cause a lot of confusion.

You have to take everything into consideration, otherwise people wouldn't consider what we do so "kickass" now would they?

-Casey

[kickass]

Casey, providing that all installs from this point forward are going to use the same templating system and a standard bunch of calls for includes and such, there's really no need to worry about whether things will work or not re the new templates that I, and presumably others, will be building. If the template is developed properly and it is documented to work with version .9x and up, there should be no problem, providing no major changes in the templating tags are made on the php development end. Templating and css/xhtml are just not that hard to do for someone who has been working with those skills for awhile, which I have. So why don't you hold off on judging what will work or won't work until the templates are done and you've had a chance to test drive 'em . . .

[yktan]

Hi kickass, please don't take it the wrong way. What Casey has just said potrays the importance of customer-orientated approach when doing applications.

People who already have an earlier version of the directory installed might find it weird that the earlier options that they have do not work anymore (for instance the number of columns, etc).

Ideally, since templates are used to implement the MVP architecture, users will be in charge of coming out with the screen designs that they want for their web site.
But in reality, not everyone is HTML/CSS proficient (even though changing templates looks easy to you, it might not be the same for everyone) as such, some users might be happy to have admin panel-controlled layout system.

Regards,
York Kie

[kickass]

With all due respect, the number of columns in the layout is defined in the template and css. It is not defined through admin. I don't know about earlier versions, but if this application was built on Smarty Templating from the beginning, then we're talking about a non-issue, and one that didn't exist to begin with. As long as everything is correct in the template it will work in the application. Right now the number of columns on the screen within the directory pages has nothing to do with what anyone does in admin, it's controlled totally within the template and the css.

Now, what I see here on this forum is a lot of people asking questions about customization. I submit to you that templates that have all the bloated table code taken out of them will be EASIER to customize, not harder. They'll also generate pages that are search engine friendlier, and readable by devices other than desktop computers. I submit to you that templates that have good and thorough documentation in the form of a readme.txt file will be EASIER to install and customize, not harder. I submit to you that templates that already have some of the features people are asking for will be EASIER to customize, not harder.

yktan, I appreciate your viewpoint, but people are already customizing. They're already asking questions about templating. They're already screwing templates up. Now, given that situation wouldn't it be better to have available a few solid base templates that already have a lot of the features they've been asking for? Where all css/xhtml cross browser problems have already been solved, so David and Casey don't have to deal with questions about xhtml/css they've already admitted in this thread they don't feel comfortable answering?

Community is about people contributing what they're strongest at. This thread is about xhtml/css templating, which is actually a separate and distinct part of this script, and was designed to BE separate and distinct. I would be more than happy to answer (and have offered help on other threads) any questions on the templating system and customization. That's what the GPL is all about- a community of people helping. I do feel comfortable answering those questions on templating now that I've successfully modded my own and found it to be MUCH easier than the WordPress themes I've been developing over the last few months, or the shopping cart and CMS templates I'm currently working with. Smarty templating rocks. And a well-documented template that generates great looking pages is a thing of beauty.

[David]

I might add...
I hope we don't get too bogged down on whether or not some or all phpLDs should be tableless or not. It would be great if we could get a couple of examples, so people can see the code and implement it if they wish.

Then it would be great if we could move on and talk about other areas of XHTML and CSS, as there are many people who need help on simpler things like how to change the color of a link. It would be wonderful if we could add a couple of topics to the wiki. We have 3 so far:
{link removed - we are no longer using the wiki}

[kickass]

My directory is quite young, and I haven't even actively promoted it yet. But there's already a trend developing that is quite fascinating. Check it out. Go to my directory and click on the "Top Hits" link. Then keep telling me it's too soon for tableless layouts . . .

Anyone wishing a zip file of the totally table-less xhtml/css template I used on my directory is welcome to PM me and I'll send you a link to the zip file. The template is not yet fully documented but if you have some knowledge of xhtml/css you should be able to use it as the basis of your own mods.

[righthosts]

I agree that using css instead of tables is the way to go and I'm using it as much as possible now

kickass, i have sent you a PM requesting the files which would be much appreciated.

[kickass]

I understand vkaryl took care of this before I got to it. I'm glad you got some help. Yell if you need us.

[righthosts]

Content visible to registered users only.

yes i just sent you both pm's, it works great and appreciate it

i hope to have my new site online live within the next week

[kickass]

Just in case you all ended up here instead of the updated thread, I've created a tableless template for phpLD (http://kickasswebdesign.com/wordpress/2005/09/a-phpld-tableless-template-for-download/), and it's available for download. Free for use with linkback and released under the Creative Commons license. Enjoy!

[vkaryl]

Working on my own tableless version as well, I hope to have it ready in a couple of weeks. Mine is a centered fixed width 2 column version.... which is thanks to kickass and her hard work "untabling" this whole system for all of us.