Creating a menu in CSS using classes

Question

Hi, I have a website page that uses tables for layout and I am trying to convert it to CSS (never used before)

The navigation is 6 forms with different images placed besides. I know I can give each of these an id and position using css but there must be a less clunky way?

I was wondering If I can create a class which specifies the links position relative to the previous links position, and maybe set the first one manually?

Thanks :)

Answer 1

Try div.classname { float: left; width: 200px } and give the container object the same or different width - experiment with this until you're satisfied

Answer 2

While jimplode will not disagree with me, tables are still a valid element in HTML. You can even emulate them with DIVs using the CSS styles display: table (see quirksmode for browser compatibility). So unless the design is a maintenance nightmare or there is some other really pressing reason to change the layout, keep it.

Getting CSS right for most browsers can be a nightmare, especially if you need something "special". Say several elements on the same line with the same (automatic) height.

If you're new to CSS, look for an example that works and start to modify that.

If you're doing this for a public website, get Firefox 3, Chrome, Opera, IE6, IE7 and IE8 and test it with each of them.

Answer 3

Here is an image of the current layout using tables. It's simple but all the information I can find on css talks about multiple columns. I think I only need one? And maybe two divs?

img208.imageshack.us/img208/7038/layoutsz.png

Answer 4

Purists would say that tables should only be used for tabular data. Your site is not tabular data, it's a layout, so using a table here is a hack. It's a perfectly fine hack if it works, but it may not ultimately be the cleanest solution.

The pragmatic part of me (which is much bigger than the standards Nazi in me) says there might be a cleaner approach using CSS. This could eliminate the need to clutter your source with unnecessary table cruft. You really have two divisions, each with paragraphs containing images, links, and text. It would be ideal if your HTML didn't have to contain anything but that.

If you use CSS well, you can get exactly that result:

http://www.aharrisbooks.net/demo/sample.html

Use 'view source' to see the HTML and CSS code.

A few notes:

1. I used the 'fieldset' element (which is supposed to be used in forms, but it works well here)
2. I guessed on colors
3. Modify the CSS to get exactly the effect you're looking for
4. I (obviously) used only one icon, but the same effect will work for the whole page
5. Only one div is needed (even that isn't necessary, but it looks nice to center content on the page

What I like about this design is how clean it keeps the HTML.

Best of luck, and feel free to drop a line if you have questions.

PS for more fun, add the following CSS3 syntax to the fieldset

  box-shadow: 5px 5px 5px #333;
  border-radius: 10px;

  -moz-box-shadow: 5px 5px 5px #333;
  -moz-border-radius: 10px;

  -webkit-box-shadow: 5px 5px 5px #333;
  -webkit-border-radius: 10px;

These attributes add rounded corners and drop shadows for a very nice effect. It won't work in IE, but the other recent browsers (Safari, Chrome, Firefox, and most mobile browsers) will see really nice effects. Yay for CSS3!