Need help with CSS coding

[bluestrobe]

I decided to drop my JavaScript menu on my website and make a CSS menu with all of my hyperlinks that will be loaded on every page. Problem is I read about CSS but don't see any templates or any "beginner?s" code to help me get started. I am looking for an online reference on how to create and customize a CSS file and how to incorporate it into the html documents I want the CSS script/menu to appear.

This is my website at the moment http://www.policeposers.com

 

[OCedHrt]

http://www.w3.org/Style/CSS/learning

There's one for a menu somewhere on there.

 

[bluestrobe]

I'll tinker with it. Any good websites with menus made in CSS I can reference to. I need some ideas while I tinker with this code.

 

[MrChad]

From our own notfred: http://tylerkaraszewski.com/experimentation/better-javascript-menus/

 

[bluestrobe]

I want to drop javascript altogether.

 

[clamum]

This is a good site

 

[bluestrobe]

Lets say I want to add this menu to the left hand side of the major pages in my website. However I want to keep the code in one central location such as a css file so if a link or wording changes, I don't have to edit several pages. I figured with the positioning I would need tables on each page but that?s another subject. I would like the menu to possibly scroll as the page moves due to the length of some of the pages.

 

[Atheus]

Originally posted by: bluestrobe
Lets say I want to add this menu to the left hand side of the major pages in my website. However I want to keep the code in one central location such as a css file so if a link or wording changes, I don't have to edit several pages.

You can put <link rel="stylesheet" type="text/css" href="foo.css" /> in the head of your page to include the css file.

I figured with the positioning I would need tables on each page but that?s another subject.

If you're using CSS you can drop tables along with most other HTML formatting.

 

[bluestrobe]

Originally posted by: Atheus

If you're using CSS you can drop tables along with most other HTML formatting.

I wanted to use CSS for the menu only. The rest of the page I want to leave alone if possible. I don't want to dump my whole website in CSS without learning it first.

edit: this is what I understood I could do with CSS, if not then I have some more learning to do. In this guys code posted on his website, I don't see where the xhtml code is linked to the external css file.

 

[ahurtt]

Originally posted by: bluestrobe
I want to drop javascript altogether.

You will be much more limited with how "interactive" you can make you menu system without using javascript. There are certain functions / properties you can only do or change on the fly using javascript.

 

[bluestrobe]

Originally posted by: ahurtt
You will be much more limited with how "interactive" you can make you menu system without using javascript. There are certain functions / properties you can only do or change on the fly using javascript.

This is the first positive thing I heard about javscript. I have about 20 people on different forums telling me javascript is a b@stard language and I can't find many websites telling me otherwise. With my current menu people with javascript disabled can not access other portions of the site and search engines have a hard time spidering all of my pages.

 

[troytime]

Originally posted by: bluestrobe

Originally posted by: ahurtt
You will be much more limited with how "interactive" you can make you menu system without using javascript. There are certain functions / properties you can only do or change on the fly using javascript.

This is the first positive thing I heard about javscript. I have about 20 people on different forums telling me javascript is a b@stard language and I can't find many websites telling me otherwise. With my current menu people with javascript disabled can not access other portions of the site and search engines have a hard time spidering all of my pages.

a lot of developers hate javascript because up until recently, it was mostly used for image rollevers, popups and cheesy alert systems.
its always been a very functional language, but the majority of developers never scraped that surface

now with the latest AJAX craze, javascript is making a big popularity gain
don't ditch javascript, just find the right combination of css and javascript to meet your demands

as far as people with javascript disabled...whats your target audience?
I've worked with several VERY high traffic sites, all of which had a user base of 99.9999 percent of users javascript enabled

 

[bluestrobe]

Originally posted by: troytimea lot of developers hate javascript because up until recently, it was mostly used for image rollevers, popups and cheesy alert systems.
its always been a very functional language, but the majority of developers never scraped that surface

now with the latest AJAX craze, javascript is making a big popularity gain
don't ditch javascript, just find the right combination of css and javascript to meet your demands

as far as people with javascript disabled...whats your target audience?
I've worked with several VERY high traffic sites, all of which had a user base of 99.9999 percent of users javascript enabled

I was directed to AJAX early on but it looked too daunting at the time. I can handle basic JavaScript tasks but not whole website design involving JavaScript. Any good websites on AJAX and how it actually works? I might look into it. I'm still working with CSS though.

 

[troytime]

just stick with html and css to start with
since javascript is all client side, use it to do small page changes (dhtml) if needed

when you're ready for AJAX, you won't need to be asking

 

[bluestrobe]

Originally posted by: troytime
just stick with html and css to start with

That was the plan. I still have a lot of reading up to do on CSS. I have inserted a menu that works using an external CSS file (thanks for the code Atheus, I couldn't find that anywhere). My next gole is to make the menu into an external html document so I can edit it as needed in the main file and not every page the menu is on. I am thinking of putting it on the left side and trying to make it scroll with the page movement is possible since some of my pages are pretty long. If not then it will be on the left hand side towards the top. Any better way of doing this?

 

[troytime]

making the nav a seperate file is a good plan

you can do so using any server side scripting language that you have available (php, asp, cold fusion)

or you can use server side includes (if they're enabled, which for apache i believe they're enabled by default for .shtml but not .html)

do you know what OS your server is running? Do you know if you can use php?

EDIT: looks like you can definately run php
the php code to do the include is
<? include 'your_file.php'; ?>

if you don't know where the default include path is, use <? echo get_include_path(); ?> somewhere to output the default path.

you can always override it too with set_include_path('/inc');, but then you have to have that line on every script (unless of course you modify the php.ini)

 

[ahurtt]

Originally posted by: bluestrobe

Originally posted by: ahurtt
You will be much more limited with how "interactive" you can make you menu system without using javascript. There are certain functions / properties you can only do or change on the fly using javascript.

This is the first positive thing I heard about javscript. I have about 20 people on different forums telling me javascript is a b@stard language and I can't find many websites telling me otherwise. With my current menu people with javascript disabled can not access other portions of the site and search engines have a hard time spidering all of my pages.

Well javascript is not so much the problem as non-standards compliant browsers and differing object models and implementations. Nothing is inherently wrong with javascript. But because of those things I mentioned it can be notoriously bothersome to work with especially when you are trying to support as many client browser platforms as you can without excluding anybody. You often end up with a bunch of logic branches in your code where you have sections of script written specifically for each different possible browser that's out there. It becomes a maintenance and debugging nightmare if you don't come up with an intelligent and elegant way to do it from the beginning. Personally, given my choices, I'd steer clear of javascript as a developer whenever possible personally. Unfortunately, that is rarely possible because of client demands and requirements and javascript does have its uses. Just chalk it up as one of those things that are a necessary evil that when used appropriately can offer a lot to a websites usablility but that also comes with pitfalls-a-plenty for the unwary.

 

[bluestrobe]

http://www.policeposers.com/test/template.php

This is what I have so far. I left the table boarders visible so the design would be easier to see. I prefer not to use tables due to different screen resolutions computers have but that?s the only way I could see how to do what I wanted.

edit: both menu and css files are seperate from the page.

 

[Atheus]

OK... firstly - LOL at the site and it's subject. You're not a cop are you? Regardless, would you be offended if I make some critisisms? They may be harsh...

1) Yuk. It's the colors mostly - green on black looks good only if done like a recreation of an old text console as a small part of a site related to such things, and even then it's iffy. When done like that it just looks a bit amateurish. Noobish some would say

2) Readabiliy. Colors again, but also the font. Times new roman is no good for the web IMO, put this in your css for instant improvement: "font-family: helvetica, impact, sans-serif;". The width of the text is a mit too much as well - things are easier to read if they're a little more constrained. That's why newspapers and magazines use columns.

3) Randomness. It looks slapped together out of random parts - OK the heading is the same color as the page itself, but it's nothing like the menu, which is also in a different font BTW.

Don't get me wrong, the site is a good one, it has plenty of original content unlike most amateur sites. It just needs a redesign.

 

[bluestrobe]

Originally posted by: Atheus
OK... firstly - LOL at the site and it's subject. You're not a cop are you? Regardless, would you be offended if I make some critisisms? They may be harsh...

Never been a police officer but was a volunteer fire fighter for over 7 years. I've worked closely with the local police departments with my former job. Also ran a lighting business for awhile which is where a lot of the material comes from

1) Yuk. It's the colors mostly - green on black looks good only if done like a recreation of an old text console as a small part of a site related to such things, and even then it's iffy. When done like that it just looks a bit amateurish. Noobish some would say

I've been told this on the colors. I like the colors but could see where it would look like a beginner's page. However I wanted to keep a dark back ground to keep down the brightness and to look different. Every website I see has a light back ground with black text unless it is something extreme.

2) Readabiliy. Colors again, but also the font. Times new roman is no good for the web IMO, put this in your css for instant improvement: "font-family: helvetica, impact, sans-serif;". The width of the text is a mit too much as well - things are easier to read if they're a little more constrained. That's why newspapers and magazines use columns

.

The font I can see and I might play with that a bit. I plan on breaking up the information on the one page a little bit more but don't see how I can put it into columns or make it look more organized. Maybe if I move the information to a table like the example that I posted that this will condense the text a bit.

3) Randomness. It looks slapped together out of random parts - OK the heading is the same color as the page itself, but it's nothing like the menu, which is also in a different font BTW.

Good suggestion. I'll work on it.

Don't get me wrong, the site is a good one, it has plenty of original content unlike most amateur sites. It just needs a redesign.

Being two months old it's still a work in progress as why I was redesiging the menu portion and probably layout at the moment. Thanks for the help!

 

[Atheus]

Originally posted by: bluestrobe
Every website I see has a light back ground with black text unless it is something extreme.

There is a very good reason for this.

I plan on breaking up the information on the one page a little bit more but don't see how I can put it into columns or make it look more organized.

You mean 'how' technically? You just put spacer divs on either side of the content div with width set to 10% or something.

 

[bluestrobe]

Originally posted by: Atheus
There is a very good reason for this.

I'll look into other colors then. This would be down the road a bit though.

Originally posted by: Atheus
You mean 'how' technically? You just put spacer divs on either side of the content div with width set to 10% or something.

DOH, see I didnt have any div tags in there. Cleaned up the code on the whacker page along with added div tags.

 

[troytime]

Originally posted by: bluestrobe
http://www.policeposers.com/test/template.php

This is what I have so far. I left the table boarders visible so the design would be easier to see. I prefer not to use tables due to different screen resolutions computers have but that?s the only way I could see how to do what I wanted.

edit: both menu and css files are seperate from the page.

looks clean, simple, effective

on the outermost table...in the cell that contains the navigation table, add a valign=top to the <td> tag

i know you mentioned the "floating" navigation...but honestly, please don't

what Atheus said is pretty much right on...but don't take it personally
every expert out there has made at least 2 or 3 websites that he or she would NEVER claim responsibility for (i've got several that i pray none of my friends find out about)

 

[bluestrobe]

Originally posted by: troytime
what Atheus said is pretty much right on...but don't take it personally
every expert out there has made at least 2 or 3 websites that he or she would NEVER claim responsibility for (i've got several that i pray none of my friends find out about)

I came here looking for help and constructive critism which I got. It's nothing personal and I am actually learning a lot from this thread.

I won't do the floating table, what I have is fine and I'll try the code you mentioned.

My next goal is to find a text/background that suits this site which will take a bit to find the right combination.

 

[bluestrobe]

http://www.policeposers.com/test/template.php

I've updated it with the suggestions and tried a couple of colors. Let me know what you think.

edit: I like the blue menu but I'm not into the gray background.