What would be the best way to creat my navigation?

LOL rtm, you really screwed me up now. I got firefox, and saw the difference in the way it showed the page. So what do i do?? I go and edit the page so it looks good in firefox, but now it look like crap in IE. LOL im so screwed. Is the best thing to do now is redo the site using divs in place of tables? would that clear up the majority of the problems? appreciate the help.

Step One is still valid code. Especially the doctype. Use HTML 4.01:



The reason I say this is that IE6 has a "quirks mode". If you don't put in a doctype it goes into quirks mode and starts playing up. If you put in a valid doctype then it starts behaving more like mozilla.

If you are lucky this could fix the problem.



If you are just starting to learn CSS then you will need a week or two to learn how. I'm guessing that isn't an option with this project??

Your best bet would be to use ul's and li's for your links since a navigation bar is nothing but a list of pages.

Doing your links as



would work, but it'd fall apart ungracefully on browsers with little or no css support. The best way to do it would be:


In your css, you only need a little bit of code to get started. Feel free to experiment the heck out of this.

This should work for you. Mess with your margins, padding, colors, and backgrounds to get this to look exactly the way you want. No need for tables or div's what-so-ever. Just lean, mean straight html with a dab of css on the side.

A good website to learn more about list-style navigation: http://css.maxdesign.com.au/

Check out the listamatics.

You could actually do your whole design without the use of a single table. This would be a fun team project. All you need is a few "float:right"s thrown in there and you're good to go.

A list of links is <i>always</i> the best way but I was trying to avoid saying this. For someone who has only a small knowledge of CSS, taming lists is a pain in the ass lol


Unless you have a grid, you <i>never</i> need to use a table.I'm still not an expert, but I challenge anyone to show me a non-tabular table layout that I cannot reproduce with CSS.

I'm going to spend the next couple of weeks on that. You ready for a challenge rtm? I'm going to produce the ugliest freakin table layout you've ever seen just so I can give you the challenge of your dreams!

LOL.

Just kidding. I don't have the time. You're absolutely right, and I already know it.

Well, the first time, at least. After you do it a few times and get to know the css, it becomes less painful than doing it with tables IMHO. Plus, no better feeling than after creating sleek code.

Note: I feel like such a hypocrite since the navbar on GrooveSeeker (http://www.gsv2.com) is still table based. I'll get to that soon. I figured out a way to completely eliminate all tables from that site. Well, maybe...

on groveseeker: Well, float them left and remove the text zoom disabler. if you make the UL fixed width, use padding to set the widths and heights of the li's and float, they will go onto two lines if someone uses text zoom. Which is about as elegant accessibility as you could possibley hope for

On Sharks page, you wouldn't want to float:right as that would place the links "above" the content (in html terms), so float the content left instead

Even better, use absolute positioning, as there is no footer and you then eliminate the possibility of encountering either of the IE Float Bugs

Believe me, I'm pretty aware of what needs to be done on gsv2, I just need to DO IT. I just moved into a new apartment yesterday and got a new job two months ago, so things have been a bit too hectic to work on my own crap.........

... one of these days ... Thanks though.

LOL wow guys thanks for the input! in response to your first question rtm, I actually have 4 months to complete this project. Its basically an online datacenter, the company currently has a website, but they are looking for an upgrade to introduce in the fall.

So please give me all the advice you got man! My intention is to have most of the site in CSS and use PHP quite a bit. PHP i can handle, more or less, its the CSS im having trouble with.

So Im going to try the codes you and gsv2 suggested, adn Ill be back when I need more help

Four months you say? Well, first step is to get used to CSS syntax, you will need to know:

basic tag selection

selecting specific tags by class and id:


selecting nested elements:


pseudo classes for links:


Thats it really for syntax, then just start learning properties - play about with position:absolute; on some divs, using the left, right, top, bottom, width and height properties with it.

Hopefully by this point <a href="http://www.caffeinefuelled.net">caffiene fuelled</a> will be up and running, otherwise start googling CSS layouts.

Also try googling taming lists or styling lists

u da man rtm! LOL. here is the thing though, no matter what i do, firefox and IE simply do not display the page the same. Look @ this page:

http://ww.playersnmotion.com/main_site/index2.html

if you view it in both browsers you can see a huge difference. for instance look at Subnav one, in firefox, the links are all lined up neatly, in IE its like they are centered, the are not even on the left side. What would be causing this? I made that page so basically im going to rip apart the code and rewrite it. So im thinking this thread ma get rather long

Internet explorer being rather inferior....

I saw a site once that lists all the known css bugs for browsers. The gecko browsers had 3 (although I found a new one last week, so four) Internet Explorer 6 has loads, there could be any number of things causing the problem. When you add onto it that you are using html attributes as well, it could be any of a thousand things.

Whilst you are learning CSS, you might as well start using xhtml at the same time - that wil take all of 20 minutes to learn lol.


The only other thing I can say is to bear in mind the box model. At some point you will need to learn the tantek celic box model hack, which is a pain but infinately useful. Basically when you specify the width of an element, this is the content width, padding and borders are extra.


gives 200px content + (40px+10px)*2
total 300px border to border.

THIS IS IMPORTANT

LOL i may have to pay you part of my commision at this rate rtm. I appreciate the help. OK, i think i got XTHML down. I just removed all tables from the webpage and am proceding to start working with div. *sigh* I never had any problems until i started trying to get proffesional. Just keep an eye on this thread cause Im gonna have a million question as we go along.

OK next prob

I am trying to get the top bg image (the lines across the top) to stretch across the top. It will work in IE (go figure) but it wont in firefox (go figure again) here is the code on the page:



And this is the code on the stylesheet.



How should I change and or edit this? Thanks