CSS Menus

[RockyB]

Exams are finally over and I'm starting to play with my site again (okay, that sounded bad :oops: ). Anyway I'm fiddling with the idea of changing the tabular menu structure I'm currently using and putting a CSS Menu in. An example of one I've made and implemented:

http://www.shock-therapy.org/AdSense.htm

compared to:

http://www.shock-therapy.org/AdSense-old.htm

I'm also going to do a tidy up and get rid of a load of stuff (mostly articles and non-converting AdSense Ads, they do clutter the place up so). But if you could give me any feedback on how the menu looks or how the menu could be improved, please do.

Also any suggestions as to how to keep the text of the main part away from the border of the menu would be appreciated, at the moment they almost merge.

[jonra01]

Definite improvement. To add space between the text and the menu add 'margin-right: 10px;' to your #menu styles.

John

[RockyB]

Ah, as opposed to the having
border-left-style: solid;
border-left-width: 3px;
in the 'p' tag as I had been doing :oops: That would explain it. Now to add some free space in under the menu box (maybe 30-40 px) and fiddle with the colour, then roll it out across the entire site.

[E-BATTALION]

Try this to keep the words from touching the borders...just play around with the margin, the padding should be good:

margin: 0px 20px 0px 0px;
padding: 0px 0px 4px 0px;

Also you might want to think about using "<ul>" with " ". In my opinion helps you keep tighter groups, with more functionality.

Also try using more "classes". This will alow you to show witch tabs are active. It is always good to let the user know what page they are on.

Last Thing: In my opinion, having the heading Menu: on the top of your "Menu", is not needed. Everyone should know what it is!

Overall looks good!

[RockyB]

Thanks for the comments E-Battalion. I'm really please with myself now. Check out the posh new floaty menu I've implemented :D

same again: http://www.shock-therapy.org/AdSense.htm

[E-BATTALION]

I like the "floaty"!

Looks good

[jonra01]

A comment from a middle-aged male with lousy eyesight. :)

I notice you have times set as the font for your content. You might want to consider using a sans-serif font, like arial, for this purpose. Serif fonts aren't as easy to read on screen as sans-serif fonts. This is especially true for reversed text like you are using. The purpose of serifs is to make a font readable at a small size in printed material.

John

[donecweb]

Thanks for the comments E-Battalion. I'm really please with myself now. Check out the posh new floaty menu I've implemented :D

same again: http://www.shock-therapy.org/AdSense.htm

:( It doesn't float in IE. :x
It seems many people are trying out the floating menu lately but I have not seen it work in the dratted IE.
DonEc

[E-BATTALION]

He is right,
Nevertheless, it still is improved.

[webado]

Is this correct in the css?


body>#menu {position: fixed}


Shouldn't that > be a blank space instead?

[Arne]

Is this correct in the css?
body>#menu {position: fixed}

Shouldn't that > be a blank space instead?

It's correct, but IE ignore it. The '>' (child) selector is therefore a workaround in this example to keep IE out of interpreting "position: fixed" to "static" since it don't understand "fixed" and wont even ignore it.

[webado]

Huh? how's that again? What's a child selector?

Oh, bother! Too many mysteries :?

Any help here? http://www.stunicholls.myby.co.uk/layouts/fixed.html

[RockyB]

If you look under the other CSS thread that's floating around you'll see all the problems I was having getting IE to interpret it correctly. IE 5 + 6 interpret 'fixed' as 'static', which means is the 'body>#menu {position: fixed} ' was put in so that FF (which can correctly interpret that statement) changed the style to fixed, while IE (which gets confounded) just used the absolute positioning.

But thanks for that link, looks like there's yet another bug I can take advantage of in my fight against IE. :lol:

EDIT: This one looks interesting as well, and seems to work better:

http://tagsoup.com/-dev/null-/css/fixed/

I now have a solution that works in IE 6 and FF both. Just added this code to the end:


@media screen
{
#menu
{
position: fixed;
}
* html
{
overflow-y: hidden;
}
* html body
{
overflow-y: auto;
height: 97%;
padding: 0 15em 0 1em;
font-size: 100%;
}
* html #menu
{
position: absolute;
}
}
which handles IE6. The 'height 97%' just means that the scroll bar displays properly on screen.

If anyone has a version of IE < 6 can they check it through, I'm not sure if the @media statement will work properly there.

[webado]

What's wrong with the scrollbar? I see in IE it's shorter and not quite at its normal spot in the rightmost position. Is that what you want?

[RockyB]

Nope, that's not what I want. That's merely the best I've been able to get. I'm still going to play with it to see if I can get it to dsplay properly but this is better than the double scroll bars I was getting earlier.

[WoodYouLike]

Just my 2p

Besides being an interesting article I would say the new look is better, but I would prefer a bit larger or easier to read font.

[RockyB]

:lol: And I was told to make the font smaller earlier :roll:

But yea, I'm thinking about john's comment about using a san-serif font, but I'm not quite sure really. I'm quite attached to that times new roman font.

Hmm, I suppose I have got a lot of feedback over this so I'll see about fiddling. Tell me if you like the changes. Personally I really don't like using arial as a main text, but meh.

[webado]

Since you're still in fiddling mode, you should seriously consider not centering the text. It should read like paragraphs rather than slogans. Fully justified or at least left-justified would be much better.

[RockyB]

What part of the site is that referring to chrisooc? The vast majority of it is left justified with a 25px indent as far as I'm aware.

[webado]

What part of the site is that referring to chrisooc? The vast majority of it is left justified with a 25px indent as far as I'm aware.
This one with the adsense stuff. Isn't that what we were talking about?

---

Sorry, I didn't realize it was an indent. It really looked like centered. My mistake. :oops:

[jonra01]

That IE hack works pretty good. Too bad the scrollbar is a little short. What would happen if you gave the body negative margins and then placed a container div on the page and put everything inside of that? You could give it margins to offset the amount of negative margins you give the body.

John

[RockyB]

Can you give me some idea of the code to do that then mate, 'cause I havn't got a clue :lol:

I'm much like chrisooc, except I havn't been programming for quite so long. Also any comment on the text size? It seems to be about right in FF, but whenever I look in IE the font is massive.

EDIT: Ookay, and now without changing anything my font is normal sized. Wierd.

Anyway this menu is perfect for me. My pages are generally rather long (read about 5-10 screen lengths) so scrolling back up to the menu is a pain ain the ass normally. This way the menu is right there wherever the user is. And so for that matter are those nice Google AdLinks when they're deciding where to go next :D

[jonra01]

an you give me some idea of the code to do that then mate,

Try adding margin-right: -20px; to the body styles and see if the scrollbar moves to the right in IE. If it does we are on the right track. If not, the idea won't work.

body {
background-color: #000000;
color: #e6e6e6;
font-family: Arial;
font-size: 1em;
padding-right: 12.5em;
margin-right: -20px;
}

John

[RockyB]

Yep, it does.

[jonra01]

Now add the same for margin-top and margin-bottom then post the url of the page you tried it on so I can take a look at it.

John

[RockyB]

Okay, give me a minute to work out how to style an indiviual document and I will.

Edit: Sorted, I know know how to use embedded styles as well ;).

How about a differarent article example this time then?

www.shock-therapy.org/Little-Brother.htm

In IE it seems to cut the heading off a bit and add to the side scrolling needed. In FF it just adds a horizontal scrollbar.

[jonra01]

Just make a copy of your css file and give it another name - Webstyles2.css. Then link to that file instead of the regular one. That way you can make all the changes you want without having to worry about breaking anything.

John

[RockyB]

Whoops, soory, that would've been easier wouldn't it? I'm doing that now.

[RockyB]

Phew John, you must be doing a lot of work on recoding that page. The last 83 hits in my log have been from you! :P

[jonra01]

Phew John, you must be doing a lot of work on recoding that page. The last 83 hits in my log have been from you!
I moved the statcounter code to the end of the file and didn't even think to delete it. I'm working on a copy of the files on my system.

Got it fixed. Tried a bunch of different things before I got it the way I wanted it. Here are the files - http://www.jonra.com/css-demos/Little-Brother2.htm

and http://www.jonra.com/css-demos/Webstyle2.css

It was an interesting exercise. I'll might want to use the same technique one of these days and now I know what works and what doesn't.

Most of the changes were in the @media Screen section. I also made some small changes to #menu, body, and #h1. There is a new
at the top of the content above the page title in the <h1> tag.

John

[RockyB]

Looks very good John. Very nice indeed. I'll see about implementing it site wide tommor ... later on today.

Thanks very much for your help mate.

[RockyB]

Okay, now just a quick query john. It works brilliantly on the vast majority of the site, except for one or two pages. Eg:

http://www.shock-therapy.org/Freshest.htm

Where the content seems to push the scroll bar off the side of the screen. Any sugggestions? I've already tried changing the padding on the body tag, but that doesn't seem to have any effect.

[jonra01]

It looks like you have another table on that page near the bottom. Try reducing the width of that a few percentage points. That's the only thing that I really noticed. If worst comes to worst, you can always modify the body tag with an inline style on those pages to override the settings in the .css file. This will allow you to finetune the problem pages. Not a real good solution, but if it works...

I did see something that caused me to smile. You use the deprecated <center> tag to center the html 4.01 valid image. :)

John

[RockyB]

Yup, but it still validates! I should probably make a .center class really, then that can be applied to any tag right?

[jonra01]

You shouldn't need anything. You already have text-align: center for the menu div, which is where this image appears. Maybe, it doesn't apply to images. If not, you can always put the image in a plain div, like this - <div><img src=...

John

[RockyB]

I mean overall. Say if I wanted an image in the main body centered i would write <img class="center" ....> and that would be centered right (assuming a class of plain .center where the text align is center?)

[jonra01]

You will have to try it. text-align is meant to be used on the contents of an element. For instance, you could set a div to text-align: center to center everything in the div, but it wouldn't center the div itself. I'm not sure it will work on an individual element.

John

[donecweb]

I was looking at the way the floating menus were done and doing some testing when I found out that NVU changed the doctype statement by cutting off this part.
"http://www.w3.org/TR/html4/loose.dtd"
This caused IE to scroll the menu off the page instead of remaining visible. Can anyone explain why and what this part of the doctype statement is for and does? :?

DonEc

[jonra01]

document type definition

The different browsers have a default dtd that they use if one isn't specified. These vary from browser to browser, so if you don't use the standards based one from w3c you will get unexpected results.

John

[donecweb]

document type definition

The different browsers have a default dtd that they use if one isn't specified. These vary from browser to browser, so if you don't use the standards based one from w3c you will get unexpected results.

John

So how can you tell which one to use?

DonEc

[RockyB]

Actually I noticed this too when I was redoing a few pages yesterday. Running it through HTMLTidy cuts half of the doctype declaration off. So then the scrolling menu wouldn't work.

You need to have the specific doctype:

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

otherwise it won't work.

-Later-

Okay, and now I'm gonna be cheeky. John I notice on the front page of your site when you mouse over your top heading it turns into a hyperlink. But as the 'a' tag you've got set up is a different size from the heading (it's the same size as your body text) you get this lovely size oscillation. Just wondering if you knew about it.

[jonra01]

You will find all of them listed here. http://www.w3.org/QA/2002/04/valid-dtd-list.html

Which you use depends on the code for your pages. Use an xhtml one if your page is written as xhtml. If it is html 4.01 try the strict one first and if that doesn't work properly try the loose one.

So how can you tell which one to use?

You can tell whether the page is xhtml very easily. In the first place, it will probably have a doctype even if it doesn't have a dtd specified. The other way to tell is to look at the code. If the single tag elements like,
or <img...> are written like this
instead of this
then it is probably an xhtml page.

John

[jonra01]

Okay, and now I'm gonna be cheeky. John I notice on the front page of your site when you mouse over your top heading it turns into a hyperlink. But as the 'a' tag you've got set up is a different size from the heading (it's the same size as your body text) you get this lovely size oscillation. Just wondering if you knew about it.
Now you've done it. :( I've been ignoring that problem. That site is over 4 years old and needs to be redone. It doesn't get any real visitors so I never really cared. Now that you've pointed it out to everyone I'll have to fix it.

John

PS: I did get a visitor to that site yesterday who sent an email asking for a quote for adding e-commerce to their company site. It's a local company. Looks like the seo work I put into getting it to come up when you search on 'web development company flint michigan' might have paid off.

[jonra01]

John I notice on the front page of your site when you mouse over your top heading it turns into a hyperlink. But as the 'a' tag you've got set up is a different size from the heading (it's the same size as your body text) you get this lovely size oscillation.
I fixed that. In the process I made an interesting little discovery. The text in question - a page title - had a style applied through a class instead of through an id, which should probably have been the case. While you can write #smallpagetitle a {some styles} to override any styles you have already created for a, you can't do that with .smallpagetitle a{}. That has to be written a.smallpagetitle {} and a:hover.smallpagetitle {}.

John

[donecweb]

You will find all of them listed here. http://www.w3.org/QA/2002/04/valid-dtd-list.html

Which you use depends on the code for your pages. Use an xhtml one if your page is written as xhtml. If it is html 4.01 try the strict one first and if that doesn't work properly try the loose one.

So how can you tell which one to use?

You can tell whether the page is xhtml very easily. In the first place, it will probably have a doctype even if it doesn't have a dtd specified. The other way to tell is to look at the code. If the single tag elements like,
or <img...> are written like this
instead of this
then it is probably an xhtml page.

John

Thanks John and I bookmarked that site for future reference.

DonEc