1 reply [Last post]
Balael's picture
Last seen: 8 years 44 weeks ago
Timezone: GMT+1
Joined: 2014-03-19
Posts: 1
Points: 2

Hi all,

I have made a first approach to leave my familiar table-layout and start with CSS. It was quite a struggling and google was my friend - but still I am unsure what I have really achieved and I guess there a ton of hints what should be made different or less redundant.

If anyone spares a bit time and have a look for

Draft: excin.de/ow/8/suche.php
CSS: excin.de/ow/8/css/ow.css

I would be very grateful - any input is very appreciated.

gary.turner's picture
Last seen: 1 year 47 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

A very good first (or even tenth) effort

Let's start with the markup, since everything hangs on that. I won't go into a lot of detail because I'm taking a 3AM break and not thinking all that clearly.

  1. You used a transitional DTD. Now, the browsers don't care, but best practice calls for you to use a strict doctype and validate your syntax against that doctype.
  2. It is a poor, but all too common, a practice to use javascript in the body of the document. Best practice is to put all javascript in a separate file and link to it in the head. The document should be totally functional without any javascript, and scripting should be used only to improve the user experience.
  3. A menu is a list, ul, and sub-menus are too. They are not dl/dt/dd definition lists. Also, lists are perfectly good containers and don't need to be wrapped in div elements.

    I'll be hitting on this strongly. The hardest part of moving from table layouts is unlearning all the crap. Tables used for layout can be neither well structured nor semantic.

  4. If all your menu items have the same class, none of them need a class. That's what the cascade is all about. Simply make the ul be the defining class.
  5. The various sections of the body lack any semantic markup at all. Those heading should be tagged with h1-6 at the appropriate level. (If you use a level based on its default appearance, you're choosing the level for the wrong reason.)

    The section's text should be marked with <p> tags, not divs.

  6. Lose all those IE conditional comments. Well written documents with semantic markup will run even on IE6 with maybe a few well placed hacks. IE7 has those hacks built in, and IE8 has a new rendering engine that obviates the need for those hacks. IE9 finally brings IE into the new millennium, and IE10 actually works pretty well.

That's enough for now. Keep in mind that all content should be tagged according to what it is. The div element is for grouping elements so you can use the div's class or id as a hook for applying styles or scripting to the aggregate without having to deal with each of the group at every step: the cascade part of css.

Redo the markup first. Once you have clean, semantic markup, the css will become simpler and easier to write. If your markup is a mess, the css becomes more and more complex. Look at the typical WordPress page with its theme and plugins for an example of how not to write an html document.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.