changing tables to css stuff

Hi all, my website is http://www.zitrote.com and im wondering if anyone in exchange for a link and my gratitude is willing to make a matching css layout?

Thank you for looking.

 

I could make you a matching CSS layout of that for free in about 5 minutes ;P.

 

haha....i forgot to pay my bill

 

I downloaded a copy of your site, but it looks like I am too late.

http://www.ceetus.com/hr/Zitrote/

 

Wow thank you!, is there any way you could send that to my email in a zip?

 

sjaguar13, a few points regarding your version of the page.

You have class and id names such as bluebar, left, right and bigger. This completely works against one of the greatest strengths of a CSS design: easy changes to the layout. What if it is later decided to have the logo on the right and the links on the left? Now your "left" box is floated to the right and your "right" box floated to the left. Your class names should describe what something *is*, not what you currently plan to make it look like. For instance, names such as links, banner, title all describe what something is without restricting it to any particular appearence. The banner could be blue, red, orange, or whatever we happen to choose for today. Additionally, you have mixed in HTML presentational attributes into the page, which makes adaptable layouts even more difficult.

The "|" characters separating the links are also inappropriate. Remember that HTML is about structural markup; giving semantic meaning to pieces of the document. Consider if that page were to be parsed by a screen reader (reads the page aloud). How should a vertical bar be interpreted? Should it say, "Home vertical bar forum vertical bar products vertical bar..." Probably not. Our list of links is just that: a list. Marking the links up as a list would give devices the structural information it needs to perform proper rendering. Now the screen reading could say, "Home, forum, products, ..."

The ideal model to follow is that of csszengarden. Consider each of the following pages.

http://www.csszengarden.com/?cssfile=190/190.css
http://www.csszengarden.com/?cssfile=189/189.css
http://www.csszengarden.com/?cssfile=188/188.css
http://www.csszengarden.com/?cssfile=136/136.css

If you open the source for each you will notice that the HTML code of each page is nearly identical (the *only* difference between them is the CSS file being referenced). This example is the ultimate goal you should aspire to in your own pages. If you provide the appropriate semantic HTML markup (i.e., no presentational HTML) as well as semantic ID and CLASS names then you can make huge changes to a site without ever touching the dozens or possibly hundreds of HTML documents. You could simply copy and paste a single CSS file and suddenly your entire site has a special halloween look, or a thanksgiving look, or a more permanent design alteration.

I've attached a version of the original poster's page that follows these principles. It can be used, studied, criticized, whatever.

 

Thanks a lot to both you, i like the way you have done this a lot FeelLikeANut it is perfect for what i want, thank you!

 

Thanks for the info, but honestly, I don't really care. I through the page together because I was bored. The real site went down because Liam didn't pay his hosting bill and when it was back up, it wasn't even the same. Plus, I did it for free. I really wasn't considering it to be a masterpiece. Also, floating something called "Left" to the right isn't that big of a deal. I could see it being a problem if you had plently of things labeled where they were at and then some where changed and some weren't, but there is only a left and right and a blue bar.

I don't even like the whole CSS layout idea. I would much rather use tables regardless of how easy is it to update just because they have ben standardized since 1990. With all the hacks that are needed to get CSS to work in every browser, it kinda offsets the ease of updating. Plus, how many times do you need to do a complete re-do of your site? Even things like Thanksgiving themes by Google is as simple as changing the image itself.

 

This is certainly understandable, however we're also here to help educate the original posters. For that reason I believe it is important to try to provide the best examples.

Tables were _never_ a real standard for layout. They became a de facto standard simply because there was no alternative at the time. Now there is and we have the difficult task of weaning people off the abuse of tables.

*Very* few hacks are needed anymore.

 

But hacks are still needed, and css is very annoying to get into messing around with float, position etc.

 

You may need to use *one* hack, at most two, which together amount to a whopping 3 extra style properties. Back in the day when I still used tables for layout there was still an occasional need for finesse: one browser would show a 1px gap between tables or cells and another would not (for example). Table layouts are not free of this burder either. You're just looking for any small excuse you can find to justify continuing to use long outdated methods.

Which is to say you never learned how to use it properly.

Edit liam_d, I didn't mean to be quite as curt with you and I apologize. I didn't pay attention to the names and assumed I was responded to sjaguar13 once more. You're entire thread here shows that you're making an attempt to move into the new standards of technology and I applaud you for that.

 

Here is more fuel for the fire. I read a blog post yesterday by Roger Johansson, of 456 Berea Street called "A web professional can never stop learning" in it he quotes Andy Clarke who said,

If you were to read the article it goes on to say lots about developers and designers who just keep doing what their doing because they can make it work and just get it done for the project.

CSS is not hard to learn if you honestly make an effort to learn it. Tables are easy when you rely on WYSIWYG editors and "design" applications slice and dice for you.

There are times that tables are useful such as a client who has 20% of their visits from people with IE 4 or NS4.7 sure tables are the way to go. But to not use tables in lieu of learning CSS is not the way to go.

Regarding hacks: IE7 will address most of these issues and there will be need for few hacks at all. Proper use of CSS and IE's proprietary head commenting system will enable you to make adjustments cleanly and better than was ever possible. IE has actually been advocating the use of the head comments for some time now as a way to address the incompatibilities with CSS 1 and 2 but the hack provide a single inline solution so you are not having to call multiple CSS files.

In my case I use @import in the head instead of the link tag and avoid serving the page CSS to people whose browsers don't support it. Most of these people are going to be used to broken pages as most WYSIWYG editors use some CSS here and there. NS4.6 will crash when CSS is called. IE 4 cannot render it either. I place a hidden text message (with display:none) at the top of the page stating that they "may need to upgrade their browser to experience this page as intended". Otherwise because of the semantic and logical top to bottom layout of the page they can still browse it in an order that makes sense.


All the best,

Jay