14 replies [Last post]
tnaveh
Offline
newbie
Last seen: 14 years 19 weeks ago
Timezone: GMT-5
Joined: 2006-06-14
Posts: 9
Points: 0

Hi everyone. This is my first post here...I wish it could have been under better circumstances.

I'm a graphic designer and I volunteered to do a website for a non-for-profit org. But I'm in a little over my head with the coding. I found some code for a css menu online and altered it to customize for the site im working on.

First issue is that the font I used is a bit 'fancy' so instead of plain text my lists contain image tags. It works but its far from perfect functionality-wise.

The second and biggest issue is that when I inserted the php page for the menu into the index page everything went completely to hell. I think the CSS for the menu and the CSS for the index are conflicting somewhere. Below are links of what the drop down should ideally look like and the other is what's actually happening.

http://www.talnaveh.com/gges/what_it_should_look_like.jpg
http://www.talnaveh.com/gges/index.php

I am beyond desperate at this point and any help would be GREATLY appreciated. I don't mind starting from scratch if anyone has any suggestions on how to do this better.

Let me know if you want me to post the code in here as well.

Thanks in advance!

*edit by Triumph - fixed links

Anonymous
Anonymous's picture
Guru

Problems with my CSS Menu

There is no head and no body in your html. You need to code your markup properly before you can predict its results.

http://www.w3.org/MarkUp/Guide/

tnaveh
Offline
newbie
Last seen: 14 years 19 weeks ago
Timezone: GMT-5
Joined: 2006-06-14
Posts: 9
Points: 0

Problems with my CSS Menu

I had them in and someone told me I didn't need to have them in there and to take them out :? I added them back in but still no change.

Its gotta be something in the style sheet but I can isolate what it is. And having the page be centered is only complicating matters....but thats what the client wants :/

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Problems with my CSS Menu

Not only that but you need a full doctype. Unfortunately, I can't show you an example of one to use because the forum is stripping out all my tags at the moment. :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tnaveh
Offline
newbie
Last seen: 14 years 19 weeks ago
Timezone: GMT-5
Joined: 2006-06-14
Posts: 9
Points: 0

Problems with my CSS Menu

Thanks, I added the doctype.

Is CSS even the right answer for this kind of dropdown? Since I have to use images anyway...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Problems with my CSS Menu

I'd recommend starting your dropdown from scratch using this as your starting point. Then, for all those elements that have position: relative; top: XXpx etc. get rid of that and use each element's margins instead to position it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tnaveh
Offline
newbie
Last seen: 14 years 19 weeks ago
Timezone: GMT-5
Joined: 2006-06-14
Posts: 9
Points: 0

Problems with my CSS Menu

ok i'll try that. thanks so much!

ukgeoff
Offline
Enthusiast
Last seen: 13 years 35 weeks ago
Joined: 2005-03-10
Posts: 77
Points: 0

Problems with my CSS Menu

If you really want to get a grip of coding your own css menu system, either verticle or horizontal, have a read through this tutorial I put together a while back. It will tell you everything you need to know, after which it's a question of visual styling.

http://1ontheweb.net/downloads/Creating_a_CSS_driven_menu_system.pdf

tnaveh
Offline
newbie
Last seen: 14 years 19 weeks ago
Timezone: GMT-5
Joined: 2006-06-14
Posts: 9
Points: 0

Problems with my CSS Menu

Tyssen wrote:
I'd recommend starting your dropdown from scratch using this as your starting point. Then, for all those elements that have position: relative; top: XXpx etc. get rid of that and use each element's margins instead to position it.

I did as you said and it works much better, thank you!

http://talnaveh.com/menuTest/menu.php

I mean its not flawless. Since I'm using images and not plain text, the color of the text won't change when you roll over a menu item. But its ok...I'm just happy it actually works.

Now I'm re-coding the index page and trying to include the menu using php. Thanks SO much for your help!

tnaveh
Offline
newbie
Last seen: 14 years 19 weeks ago
Timezone: GMT-5
Joined: 2006-06-14
Posts: 9
Points: 0

Problems with my CSS Menu

Hey guys. Encountering another problem...

The page is a disaster in firefox. I validated my CSS and HTML and its all clean. I think the problem might have something to do with the floats. Here's the link:

http://talnaveh.com/menuTest/

Any suggestions? Thanks in advance!

ukgeoff
Offline
Enthusiast
Last seen: 13 years 35 weeks ago
Joined: 2005-03-10
Posts: 77
Points: 0

Problems with my CSS Menu

It's not just the menu thas not as you had hoped, the whole layout and background colour is different.

You usually find that Firefox is doing things according to the rules and therefore is doing what you asked and it just happens that IE is actually doing what you had intended.

It's different again in Opera. So whilst your code amy be valid, the logic of it all is flawed somewhere.

Go through in detail and make the sight compliant with Firefox and Opera, then and only then carry out any tweaks needed to make the site work in IE.

tnaveh
Offline
newbie
Last seen: 14 years 19 weeks ago
Timezone: GMT-5
Joined: 2006-06-14
Posts: 9
Points: 0

Problems with my CSS Menu

Thats the problem I'm having though. I know that IE is flawed. I went to many different sites to check if my CSS parameters are compliant with FF and it says they are. So I'm not sure what's wrong with it.

I found a few articles about how floats can throw off the height of a page and since the container div height is inherit, I thought that might be the problem. But I did as the articles suggested and added clear:left in the appropriate places. It fixed the placement a little bit but its still quite off.

ukgeoff
Offline
Enthusiast
Last seen: 13 years 35 weeks ago
Joined: 2005-03-10
Posts: 77
Points: 0

Problems with my CSS Menu

It looks like you have been tweaking because now the layout in Fifefox and Opera are the same and it's also now broken in IE.

Start with a basic framework of a container div. Within that have a header and a main div. You can if you requie divide this into left and right areas.

Have you r site logo loaded as the background image for the header div and position it where you require it.

Have a div that contains your navigation and position that at the bottom of your header div by setting its top-margin so that it does not obscure part of the logo.

So far there are no floats involved unless you want a left and right section. Things should now be where you want them to be and you can add in the content.

tnaveh
Offline
newbie
Last seen: 14 years 19 weeks ago
Timezone: GMT-5
Joined: 2006-06-14
Posts: 9
Points: 0

Problems with my CSS Menu

Yeah I've been working on it so you'll see it changing every few minutes, lol.

If you view the source, I do have a container div. Inside of that I have a div for the menu bar and two 'column' divs for the content on the left and the content on the right. The menu div's top margin is already set exactly at the height of the logo, but its not showing up that way.

tnaveh
Offline
newbie
Last seen: 14 years 19 weeks ago
Timezone: GMT-5
Joined: 2006-06-14
Posts: 9
Points: 0

Problems with my CSS Menu

I still can't seem to get the container div to show unless I put in a specific number for the height and I don't want to do that because the container div will be on every page and the heights will vary.

I've searched this forum and google and the only thing I found that could have made the difference is clearing the divs. But I did that and theres still no change.

In addition, I set the menu's top margin at -32 in order for it to fall underneath the logo. How is that possible? Shouldn't it be at 64px....which is the height of the logo?