Tech

MRae825

I have been told repeatedly that using a CSS based navigation bar is better vs. the image based junk I have been using. My knowledge of CSS is null. I don't really even understand exactly what CSS is all about? I am needing some expert advice on how to create a CSS navigation bar and implement it into my website. Right now I am using a javascript nav. bar and it it not working properly in FireFox - but it is in IE. It is overriding the content of my page - so I am really needing to get this problem fixed. I have tried searching Google but everything I am getting is pretty over my head - can someone enlighten me or point me to some good website that can help me with my website navigation problems?

Thanks!
Back to top

erikZ

That's a good question MRae, I'll try to answer the main points. You'll have to accept that there is a learning curve involved here, like all good things, it takes some work.

:: Quote ::

I have been told repeatedly that using a CSS based navigation bar is better vs. the image based junk I have been using.

That's correct, image based navigation, especially the kind with rollovers, adds massively to page load time, makes the site very user unfriendly, especially for users with dialup modems, currently about 50% of the market, probably more if you are targetting very average users, which I'll assume you are.

The problem with image based navigation is that the user has to download 2 images for each navigation item, so if you have say 10 nav items, you've added a huge amount of size to your overall page, for zero benefit to the end user.

Search engines also don't like image based navigation as much as text based navigation, which is also something to think about.

But the real reason I always avoid image navigation is that it's just such a pain to maintain, every time you want to change the nav item text you have to generate a new set of images for it.

:: Quote ::

My knowledge of CSS is null. I don't really even understand exactly what CSS is all about?

We all start with null knowledge about a new technology, so you're starting from where all of us started.

What is CSS?
CSS stands for Cascading Style Sheets. The ideal use of CSS is to have a single file, or group of files, that controls the overall styling of your site. Site, note, not page. On page styling through use of HTML attributes, things like <font color="blue" size="4">Text</font> makes maintaining the overall look and feel of a site a nightmare. Don't be fooled by the fact that sites like google.com use this, they aren't serving up static pages, it's all dynamic, using templates, so they only have to change a few things to change the whole site.

A CSS file is called in your <head> tag, like this:

:: Code ::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tech Patterns :: Post a reply</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="/css/techForum.css" type="text/css">
<style type="text/css">@import url("/css/tech_protected.css");</style>
<link rel ="shortcut icon" href="/images/favicon.ico">
</head>

Doctypes and valid HTML
What's the first line for you might ask:

:: Code ::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

That puts the webpage into standards compliance mode, by assigning it a doctype. It's much easier to debug display errors on pages when the two following things have been done:

A doctype declaration has been made as in above. HTML 4.01 loose is the easiest doctype to learn, it allows fairly loose coding. That's what I would recommend.
With a doctype, and with the following line in the head tag:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
You can now validate your web page to find all the errors in it. Valid HTML is the easiest and most powerful tool you have in your web developer toolkit to pinpoint the source of display errors.

Calling CSS library files, aka stylesheets
There are several ways to call a stylesheet, as you can see above, one is called in the <link....> tag, the other in a <style type="text/css">@import...</style> tag.

Using @import protects your page from old browsers, so I would use that for more advanced CSS that might crash old browsers. Don't use this yet until you understand the differences a bit better.

So you'll be putting your CSS in a library file, which can live in a /css directory.

:: Code ::

You can also use inline styles, which style specific tags in the tag, but ignore that for now.

The cascade
So what does the 'cascade' in cascading style sheets stand for? It's pretty easy to understand, it means that all style directives will cascade, in this order:

inline tags styles override everything: <td style="padding:2px;">

styles in the head tag override the linked to stylesheet:

:: Code ::

<head>
<title>your page</title>
<link rel="stylesheet" href="/css/techForum.css" type="text/css">
<style type="text/css">td {padding:2px;}</style>
</head>

The stylesheet itself, which would contain almost all your styles, also cascades, from top to bottom. In other words, if you have these styles:

:: Code ::

td {
padding:2px;
}
td {
padding:4px;
}

all td elements on the page will have 4 px padding, not 2.

Styling :: elements, classes and ids
There are 3 ways to style an element - note the syntax, it's always the same:
element, class, or id + { + css style type + : + value + ; + }

Styling an element, this will apply to all instances of that element anywhere on your site, for example:
body {
background-color:black;
}
will make all the body tags on your site have black backgrounds
Classes. Classes are declared in CSS like this:
.someclassname {
padding:3px;
color:black;
}
Classes can be used multiple times on any page, like this: <td class="someclassname">
The class of td in this case would override any CSS styling you had given just the td without a class.
Note that in the CSS file, a class must be preceded by a dot, .someclassname. This is not optional. Only element names can be written without a . or #, which is how you declare ids
Ids. Ids can only be used one time per page. In the CSS file, they are declared like this: #someidname. On the page, you use it like this: <td id="someidname">. Note again, you can only use an id one time per page.

It's best to look at a collection of css files from other sites to get a general idea of this.

There are many CSS resources on the web, too many to list in any meaningful order, by far the best thing to do is to buy a basic book like O'Reilly presses 'Web Design in a Nutshell', that has a pretty nice introduction to CSS, HTML, Forms, etc.

:: Quote ::

I am needing some expert advice on how to create a CSS navigation bar and implement it into my website.

Sample CSS file contents for navbar:

:: Code ::

#navbar {
background-color:blue;
border:0;
}
#navbar td {
background-color:blue;
border:2px solid yellow;
}
#navbar a, #navbar a:visited {
display:block;
text-decoration:none;
padding:3px;
}
#navbar a:hover {
background-color:green;
}

Note that I'm using a shorthand here, this means that for example with #navbar td, I'm saying that for all tds contained in the table with the id 'navbar', do that. Same for the a links. I make a:visited be the same as a since you dont' want your nav bar links changing color when the user has visited that section.

The onpage HTML would look like this:

:: Code ::

Putting it all together
I put in some inline styles so you can see how they work, normally I'd have all these in the stylesheet. I also put the styles in the head tag, not in a library file, that makes it easier to test stuff:

:: Code ::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test page</title>
<style type="text/css">
#navbar {
background-color:blue;
border:0;
width:100%;
}
#navbar td {
background-color:blue;
border:2px solid yellow;
}
#navbar a, #navbar a:visited {
display:block;
text-decoration:none;
padding:3px;
color:white;
}
* html #navbar a {
width:100%;
}
#navbar a:hover {
background-color:green;
color:yellow;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width:100%;border:0;">
<tr>
<td colspan="2" style="background-color:black;color:white;"><h1 style="text-align:center;margin:10px;">Page Header</h1></td>
</tr>
<tr>
<td width="150" style="background-color:blue;">
<table id="navbar" cellspacing="0">
<tr><td><a href="....">Link 1</a></td></tr>
<tr><td><a href="....">Link 2</a></td></tr>
<tr><td><a href="....">Link 3</a></td></tr>
<tr><td><a href="....">Link 4</a></td></tr>
<tr><td><a href="....">Link 5</a></td></tr>
<tr><td><a href="....">Link 6</a></td></tr>
</table>
</td>
<td style="padding:15px;background-color:#ffffcc;">page content</td>
</tr>
</table>
</body>
</html>

The * html #navbar a {width:100%;} fixes an Internet Explorer bug with display:block on links.

:: Quote ::

Right now I am using a javascript nav. bar and it it not working properly in FireFox - but it is in IE.

That's not surprising. Develop in Firefox, debug for IE, that's the mantra of web developers around the world.

:: Quote ::

It is overriding the content of my page - so I am really needing to get this problem fixed.

It's hard to say why display errors happen, it's almost always caused by invalid HTML markup, which means you have to validate the page, using for example the W3C validator. It's also a good idea to validate your CSS there too.

But don't worry about the HTML for now, although when you see display errors in quality browsers like Firefox or Opera, it's almost always caused by invalid HTML markup.

:: Quote ::

I have tried searching Google but everything I am getting is pretty over my head - can someone enlighten me or point me to some good website that can help me with my website navigation problems?

There is a learning curve to CSS, there's nothing you can do about that, if you want to use a powerful tool, you have to do some work. CSS is much harder than HTML, mainly because there's so many browser bugs with it, mainly with MSIE. The new IE 7 is supposed to finally fix the worst ones, but that won't be out for a year or two.
Back to top

vkaryl

Hi MRae.... I'm pretty sure we can sort this out, the easiest thing for me right now would be to take a look at where your site is sitting, and go from there. So if you could post a link to what you've got right now, I'll know more how to help you sort out the millions of new ideas you've got bombarding you from all sides. Please believe me when I say that NO ONE will point fingers, laugh, or otherwise be nasty about what you're doing. We were all there at one point, and we give back to those who helped us by helping others.

erikZ posted definitions n such for you, that's some really good background knowledge. Putting all that into practice is where you need to go next, and that's what we'll try to help you sort out.

Post up a site addy, and I'll take a look, see what the easiest way would be for you to get where you want to be. If you'd like to look over a couple of my own sites, feel free: bytehaven.com is my "someday I'll be a designer" site; netwizardry.net/thematics is one of my (many!) wordpress blog test sites for theme designs.

Looking forward to being able to help you along here!
Back to top

MRae825

First off, Erik - Thank you for that huge amount of information! I really liked how you broke it down and had a few "ah hah" moments - but towards the end I started to loose you again LOL. It could be because I am just plain tired after working on website orders and running after a 1 yr old :) I am going to re-read it again tomorrow and hope it soaks in - I quickly just tried that HTML coding for nav. bar on my site just to see what it did - That really helped me - I am a very visual learner so seeing thing helps me understand more than reading. I saw how the HTML code put a blue bar containing a nav. bar on the left side of my page and a blank "page head" on the top. Is that what a CSS is considered? Sort of a "frame" around your site - but not really a "frame" if that makes sense lol. I would love to be able to convert my page to something like that. The problem I have found now is that I find an error on a nav. bar and I have to open every single page and fix each HTML error on EACH page! It is taking me forever and feels like such a waste of time - I would love to have one thing I could change that would fix my whole site. Even though I am finally beginning to understand WHAT CSS does - I am still struggling with HOW to do it! I will re-read and post more tomorrow :)

Vkaryl - thank you! I would love for you to have a look. I must admit I am a little embarassed as I know my work is nothing compared to most of you on here - I will trust you won't all laugh "too" hard LOL. Please just keep in mind I am a parttime teacher parttime SAHM (stay-at-home mom) and have no formal training when it comes to this stuff! I want to make my more function but at the same time need to keep realistic - I don't know what I am doing LOL.

Please, I encourage anyone to offer me suggestions - talk down to me - it is ok! The simplier the better LOL. If you have some sample coding I could play with to better understand - that would be great too.

So anyway! Now you all know who I am - a Mommy just trying to continue to stay at home with her little one :) I don't want to have to return to work full time and these necklaces of mine have allowed me enough income to only have to return to work parttime (in Oct.). I will be going back to work at a pre-school teacher (just morning!) - hoping to get the website figured out before then as I don't think I can deal with being a mommy, a teacher, a WAHM, and a web designer all at the same time! I am willing to stay up late and figure this stuff out!

Any information and posts are much appreciated!

BTW, I take criticsm well :) Please be honest and help me improve my page - my long term goal is better SEO - that is how this whole web site improvement thing all began. I am still stuck in the sand box and want to be up and running when I finally crawl out! :)

Thanks for your patience with me...
Back to top

MRae825

Forgot to mention, website is in my profile - Thx!
Back to top

erikZ

:: Quote ::

The problem I have found now is that I find an error on a nav. bar and I have to open every single page and fix each HTML error on EACH page! It is taking me forever and feels like such a waste of time - I would love to have one thing I could change that would fix my whole site.

This is what PHP is for by the way, it's the easiest way to do this. Any shared item like a nav bar that is used site wide is placed into the HTML using php includes.

Dreamweaver Options
Dreamweaver also has a site wide templating system that's not too hard to learn, but it tends to break down over time, I used it for about 6 months, then gave up on it.

Dreamweaver also has site wide search and replace functions that work very well, but you'll have to set up your site as a site in dreamweaver first, then you can do search and replaces cross site, that's pretty easy, but BE CAREFUL, mistakes are not reparable. Never click ok until you are absolutely certain that you have selected the correct search text, and the correct replacement text. Again, you cannot undo mistakes.

PHP Includes in Apache
All that is required to run those are a few simple lines in an .htaccess file telling Apache to process all your .htm pages with php. .htaccess files are what Apache web servers use to run their user controllable configuration options.

Don't let your head pop though, but trust me, adding php includes is very easy, on page it would be just this code:

:: Code ::

Then you'd have a single file that contained just your left nav html, leftnav.htm, located in your includes folder, and php would just insert that into your webpages automatically. Almost all websites out there of any size use this type of dynamic page building to create themselves.

However, that's probably best left to another day. The programming and apache forums have good threads on how to set that up, but I'd wait a bit for that, though if you move to a real web hoster that's something you'd want to do pretty soon, it makes life a lot easier in general.

But don't worry about that stuff for the moment. Just know that there is a way to include shared HTML chunks with almost no work on your end. The downside is that dreamweaver won't show that part of your page when you try displaying it, since it doesn't have access to an Apache server to run your pages. But that's how I make all websites, large and small, the less repeated html per page I have the better.
Back to top

MRae825

Ok - so I've attempted to add a navigation bar similiar to the coding you gave above on a test page.

Would you give it a look and tell me if it is working in FireFox - I do not have that browser on my computer yet. If it isn't working, any suggestions?

I do know I have one problem. When I look at my nav. bar I have an extra cell in my table above "drop-shipping" - where the heck is that extra blank cell coming from? I can't find it in the html!?

Hopefully, it will be working otherwise and won't overlap the contact of my page! If it is, is there a way to go back into my pages to insert this new navigation bar or do I have to insert the css and html into every page like I did with this test page? Could I do a php type deal like you mentioned previously? If I have to alter this nav. bar later, I would really like to do it in one shot instead of editing every page of my site!

Will you also check my source and make sure I put the css and html in the right position - I wasn't really sure where to put it?

Last quick question, I have a red bar, orange bar, green bar, etc. I would like to add a bar across from the green bar in the purple table column above the nav. bar - is this possible? I am not able to get it right not sure what I am doing wrong.

That seems like a lot put if I can get these last few bits in place - I am pretty happy for now - I really want FireFox users to be able to use my page asap.

Thanks again!
Back to top

MRae825

Duh - sorry - my test page is:

here
Back to top

MRae825

Another quick post, I had an "ah hah" moment and figured out where the extra cell was coming from - sorry! Took care of that - now just need to know if it is working and how to implement it site wide - easiest way possible! :)
Back to top

erikZ

You have a pretty major error here:

:: Code ::

You've nested a <script> inside of a <style>, nothing can be nested in either <script> or <style> elements, they can only contain either script or style, respectively.

You could dump that script by the way, it's just some dumb thing that they added for no real reason. If you read it, it's for IE 4, that browser simply is not used anymore, and it's only for one single possibility in that obsolete browser. So just dump that whole <script>....</script> block.

Unfortunately, with code of this quality I can't validate the page to try to pinpoint the source of the display error I'm seeing in Firefox. It's better now though than it was, doesn't override the text content area, it's just not the right size, too narrow.

You can download Firefox browser here.
You can download Opera browser here

Both browsers are very small downloads, and both are much better at page display than MSIE. And if a page displays decently in Opera and Firefox, it's probably reasonably close to having few major coding errors.
Back to top

Tech

Tech

patterns.com

tech forums