me tarzan, you css

November 21, 2006 1:56 PM

Help my brain wrap around CSS (especially making a css enabled tab menu)

Okay,

I know web design from a purely design stand point (that's aesthetically speaking) and I know html, some cold fusion and some php as well. I can at least understand what php does..."write some code and then tell your html to reference right here..."

I can't, for the life of me, understand css. I wanted to make a css menu (the horizontal kind that has nested parts in it and drops down when you roll over it) however everytime I open up Dreamweaver I find it easier just to code it by hand instead of trying to GUESS what to do in css.

So could someone help me figure out how to put in a css menu in my html or just to understand css all together (or a webpage that references it)

Thanks

posted by Hands of Manos to computers & internet (9 comments total)

Read the CSS spec. These menus basically work by having the block each submenu is in hidden by default, by setting the display attribute to "none".

Another CSS rule is then added to set the display to visible when the parent menu is hovered on. I've done this myself a couple of times, just can't recall where I kept the source files, but it's dead easy. Just read the spec and play around a bit.
posted by orthogonality at 2:03 PM on November 21, 2006

Two ways I can think of off the top of my head:
(1) Use javascript onmouseover (for the tab) to toggle a css visibility attribute (for the menu).
(2) Use the :hover property to change the clipping area for the menu div to show the whole menu (where the non-hover would have just the title showing)

But yeah, you should try to understand how CSS is supposed to work in general before trying to create dynamic UI components with it. Also you should read about how javascript interacts with the DOM.
posted by beerbajay at 2:09 PM on November 21, 2006

This is a case where you shouldn't need any javascript, but due to Internet Explorer issues, you will need a small script.
Here is an article from A List Apart that shows how to create this type of menu, although theirs is arranged vertically. You can change the orientation to horizontal using the float property.

There are tons of CSS tutorials and primers all over the net, but if you're a paperback type like myself, I highly recommend Designing with Web Standards by Jeffery Zeldman. It covers CSS for beginners in an easy to read manner, in fact, I found that it was easy to read the book away from the computer and still retain the information for later experimentation.
posted by bradn at 2:21 PM on November 21, 2006

Hands of Manos, you're starting with a really complicated task. If you really want to understand CSS, start with something simpler than a menu system!

CSS is actually a MUCH simpler language than HTML or PHP. It's a much more limited language. All it does is describe what things look like (e.g. colors) and where they're located on the screen (x,y coordinates). Most people who don't get it are over complicating it in their brains.

I teach CSS and Dreamweaver, and in my opinion, DW's CSS-creation tools are MUCH more difficult than hand-coding CSS. The best way to learn CSS is to hand-code it.

Get a CSS into book "CSS for Dummies" or whatever (or watch a training video on Lynda.com) and learn it from the ground up.
posted by grumblebee at 2:24 PM on November 21, 2006

I'm with grumblebee. This is not the best task for someone learning CSS.

I'd start with CSS purely for formatting. Colours, fonts, bold, italic, borders, etc.

Then move on to the block: padding, margins etc.

Then when you're confident with that, move on to CSS for positioning: absolute, relative, hidden, displayed and all the stuff that's needed for the menu thing.

And in the meantime, adapt one of the solid bits of code like bradn linked to which have been developed over the years and tested against all kinds of obscure browsers you've never heard of and couldn't install anyway.
posted by AmbroseChapel at 2:43 PM on November 21, 2006

I started off as a print designer, then moved to web and i have to say, I love css. css is piss easy if you already know html and some php. Take the time to learn the basics and you'll never touch dreamweaver again.

SItes I've always used in the past to pick things up are:

456berea street
css zen garden
Listamatic

and my favourite

w3schools
posted by twistedonion at 3:11 PM on November 21, 2006

Son of Suckerfish Dropdowns (a follow-up to this A List Apart article) is a good CSS technique for horizontal drop-down menus, with some IE-specific JavaScript. ALA's CSS articles are good, too.
posted by kirkaracha at 3:25 PM on November 21, 2006

This free app may be useful and edumacational to play around with. It was for me.
posted by stavrosthewonderchicken at 4:07 PM on November 21, 2006

Also, try taking a CSS file that someone else wrote and reverse-engineer it. Fiddle with things and see what they do on the screen. For example, save this Ask page as an html file, and then pull the CSS for this page (http://ask.metafilter.com/default110.css. Play with it.
posted by Alt F4 at 4:37 PM on November 21, 2006