Web Design Noob

RichD

Hi There,

I am a bit of and idiot when it comes to web design. I have a knowledge of the basics and know a little HTML code but outside of that I am a bit of a novice.

I am designing a website for a friend (and myself to a degree). I am planning on using a frame set type layout with a Navigation bar down the side. I have created some of the content for the child frames and I am now looking to design the index page which will contain the frame. I would like to do a similar nav bar like the one one www.decks.co.uk. Where by you have your main categories and when you hold your mouse over an item a second, sub-category appears. can anyone please give me a clue as to how this is done and where I would need to look to read up about it.

Thanks

Rich

Linc

My first piece of advice is to ditch frames. Pretend frames don't exist. Seriously. They're annoying, screw up standards compliance, and are generally unnecessary.

Check this out for doing standards-compliant drop downs with nothing but CSS (no Javascript): http://alistapart.com/articles/horizdropdowns

It actually is for a nav bar across the top, but it shouldn't be hard to adapt for a vertical bar. Personally, I used a tutorial in the book More Eric Meyer on CSS to do the menu on this site. He has methods for both vertical and horizontal in there, plus a sweet "hack" to make it easily work in IE.

//edit: You could also look at the HTML source of the front page ("view source") and the accompanying base.css file at http://www.short-media.com/draco/css/site/base.css - I have the navigation bar blocked off in the CSS, so it should be easy to see.

Also note the third line:
[php]behavior: url(/draco/css/site/csshover2.htc); /*Fixes :hover in IE6 */[/php] This is what makes IE work "right" like Gecko-based browsers like Firefox and Opera do. If you want that file (csshover2.htc) let me know or Google it Basically, the issue is that IE won't let you apply the "hover" attribute to anything accept links (which isn't right). You need to put it on list elements in this solutions. The crossover2.htc file tells it how to do that.

RWB

OMG Thanks keebs! I never seen that IE fix before... I'll probably use it in like everything now lol.

RichD

Cheers, this is really useful. I am still having a little trouble though. I can do step one, creating the links in a list but I cant work out where the code goes for the "visually appealing" section. I have tried copying and pasting the code from the website but it puts it in (pre) tags. I have also tried putting it into the (ul) tag but that doesn't seem to work either.
It looks like a programing script with the semicolon at the end. Does this mean that I dont copy it into the HTML page?
Apologies for my stupidness.

Linc

Oh, that's CSS - Cascading Style Sheets code. Here's a quick intro to it. Get well acquainted, because you're going to need it a lot if you're making a web site O'Reilly's CSS Pocket Reference is always next to me as a reference, too.

RichD

OK, This is pretty cool. Im actually getting somewhere here though I must say I am working well out of my comfort zone! (You don't learn stuff if you stick with what you know)

Im just about to put the hover in and Im looking at your css file. Am I right in saying that you are defining more than one style for some attributes eg.

h1#sm_logo

This is a particular h1 style which can be called from within the HTML page? In other words you are designing your own heading style and to save you declaring the attributes every time you want to use the style, you declare it once in the css file and link to it using the style"title"
Excuse my poor terminology.

Linc

Kinda.

What you're describing is if it was just h1 without the #sm_logo. That would, then, apply to EVERY h1 element. The #sm_logo specifies that the following code should only apply to h1 elements with id='sm_logo' in it. (This is because I also use the h1 tag for other things, so I don't want the logo's style to apply to those).

You can indeed call an element in multiple ways. Take this example:
[php]<h1 id='head1' class='cool'>Title banner thing</h1>

<h2 id='head2' class='cool'>Another title banner thing</h2>

<h1>Last one</h1>
[/php]Now, a '.' refers to a class and a '#' refers to an id. So h1#head1would apply to only that first element. h2#head2 would refer to only the second element.

.cool would apply to both the first and second elements, because they both have the same class even though they're different elements. (Multiple elements can have the same class. IDs should always be unique). Just referring to h1 would apply to both the first and third, because you didn't specify any IDs or classes.

So, it's very possible to call an element in many ways.

It can cause some headaches though, too. For instance, if you say that h1.cool should have a margin of 20, and then set h1 to a margin of 10, any h1 elements with the class "cool" will be stuck with a margin of 20 still. Generally, more specific = more weight when deciding which rule to apply.

Ooook... probably explained too much for one post Happy hunting and let me know if you have more questions.

RichD

I think im keeping up. I will carry on tonight and we will see how far I get. I'll let you know when I have done the site so you can see what I have learnt. The link is in my signature but there is not much there right now.
Cheers for your help

CyrixInstead

Other than that, if you have a voluntary organization or are doing a personal website, you can use Milonic's DHTML (Dynamic HTML) menu system. It's simple, easy to quickly get great results out of, and looks very professional.

~Cyrix

RichD

Sorry to keep hastling but I have another question. I have looked at the css files and HTML code on the example on the link and for this site which have been really useful. I have resisted the temptation to copy and paste as I want to actually learn how to do this, but I cant find the Javascript, to make the hover work, anywhere in the examples. I have found out that I can put the script in the Header in script tags, but That doesn't appear to be the way that either you or the guy who put the tutorial file together are doing it.

Would I be right in guessing that the script is contained in an external file (in your case the csshover2.htc file) and that the HTML calls in that script?

Edit:
Found the Javascript in the example and back on track

Linc

Whoa, there is no javascript in my examples. That's the whole point of it. People can have javascript disabled, it's messy, it's screws up accessibility, and on and on.

To make the hover work, you must be careful to label with classes and IDs as I have. This is the critical line that makes the menus appear (from my base.css):
[php]
div#nav ul.level1 div.nav_topbar:hover ul.level2 {display: block; /*This is what makes the menus appear */}[/php]

You can surely use the javascript if that works for you, but I view it as needing to learn a whole other set of code that you won't need otherwise.

RichD

Sorry. The example i meant was in the "a link apart" it uses a small amount of javascript. To make the hover work in IE. It seems to make the use of html much simpler for now. So I think if I can get it to work I am just going to use that code and accept I dont understand it. That way I can write and understand the html. That said I will eventually do it with just html and css once my knowledge has increased.

Thanks for your help so far. Once its done Ill post up a link so you can see.