|
| |
|
|
RockcliffRugby
Posts: 9 Joined: 4/20/2008 Status: offline
|
RE: CSS Navigation Menu - 4/20/2008 8:45:00
Thanks for the quick reply. That suckerfish layout is just what I want, but I cant find what the CSS command is to wrap the menu items. But I do like the formating of the site I posted before. Any ideas? I've tried copying parts of the CSS from my stylesheet into the one from suckerfish and have narrowed it down, I think, to this. SuckerFish: ul { padding: 0; margin: 0; list-style: none; line-height: 1; } My Stylesheet: ul { margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } When I copy the ul section of my stylesheet into suckerfish it puts it like this Menu1 Menu2 Menu3 etc.. But when I copy the ul section from suckerfish into my stylesheet it just extends the width of the blocks, no positioning change. |Menu1__________________________| |Menu2__________________________| |Menu3__________________________|
|
|
|
|
jurgen
Posts: 381 Joined: 1/9/2007 From: Castle Rock, Colorado Status: offline
|
RE: CSS Navigation Menu - 4/20/2008 17:18:14
There are many drop-down menus available..... This is what I use on my site...... Horizotal drop-down
_____________________________
Wedding Dresses Colorado
|
|
|
|
RockcliffRugby
Posts: 9 Joined: 4/20/2008 Status: offline
|
RE: CSS Navigation Menu - 4/20/2008 17:55:11
Brilliant, thanks very much jaybee. Will try it tomorrow and when I get it working I'll post up the files so anyone wanting the same thing can just tweak mine. Thanks again!
|
|
|
|
RockcliffRugby
Posts: 9 Joined: 4/20/2008 Status: offline
|
RE: CSS Navigation Menu - 4/22/2008 17:04:19
Hi, I've just uploaded it to my site. http://www.whitleybay-rockcliffrfc.co.uk/Menu/menu.htm I wasn't going to put it on until it was working fully but if it helps you out... I've been previewing it in IE which looks ok, but as soon as i open it in firefox its all over the place!!! I appreciate all the help. Thanks [edit] I've also just noticed that when I've uploaded it, the menu doesn't change color on hover. This is not the case when I preview it from my hard drive! Arrrghhhh CSS!
|
|
|
|
RockcliffRugby
Posts: 9 Joined: 4/20/2008 Status: offline
|
RE: CSS Navigation Menu - 4/23/2008 3:24:48
Thanks for the quick response! However, the positioning of the menus in IE was fine, changing it to left:44px; may look ok in FF but completely throws off the IE. I'd originally had it set to left: -6px; to position it correctly in IE, so you can imagine what left: -44px; looks like!!! What is really bugging me is how the sub menu jumps around when you go from a heading to a sub menu i.e. Mouseover Menu item "Teams" Sub Menu block appears about 5 px lower than the menu Mouseover sub menu item "1st XV" and the sub menu block jumps to about 5px below the menu item text. Like I said I'm a noob with CSS but could it be something like I've got the position: tag set wrong on the hover: section? Thanks [edit] I havent had chance to upload any changes to my site yet as I'm at work...sssshhh!
|
|
|
|
RockcliffRugby
Posts: 9 Joined: 4/20/2008 Status: offline
|
RE: CSS Navigation Menu - 4/23/2008 9:37:26
Good old IE!!! I try it on FF later. If I use width: and height: tags to pad out my block instead of padding: would that be ok in IE? Cheers
|
|
|
|
rdouglass
Posts: 9136 From: Biddeford, ME USA Status: offline
|
RE: CSS Navigation Menu - 4/23/2008 14:30:11
quote:
play with padding, replacing it with margin where possible. <$.02> IMO, that'll get you the most for the quickest when it comes to fixing IE box model issues. Work on that first. </$.02>
_____________________________
Don't take you're eye off your final destination. ASP Checkbox Function Tutorial.
|
|
|
|
RockcliffRugby
Posts: 9 Joined: 4/20/2008 Status: offline
|
RE: CSS Navigation Menu - 4/26/2008 4:05:26
Hooray! Now we are getting somewhere. I've been checking it with firefox like jaybee said and now its starting to look quite snazzy, or whatever the kids are saying nowadays!!!! IE is looking ok except for menu items being offset. Just a few bugs to sort out now like: - How to have a top-border on the menu headings without doubling up the borders on the menu items
- And, what is that random gap on the left handside?! I cant find it anywhere!!!
Any ideas? http://www.whitleybay-rockcliffrfc.co.uk/Menu/menu.htm I can see the light at the end of the tunnel now!
|
|
|
|
Tailslide
Posts: 5771 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online
|
RE: CSS Navigation Menu - 4/26/2008 4:16:50
I think it's the default padding applied to the UL by Firefox, Opera etc. If you add padding:0; to the UL then the gap disappears... but you'll need to fiddle with the other rules as this then throws the padding on all of it. Personally I tend to add a global reset at the start of all stylesheets which basically sets all default margins and paddings to zero - because different browsers have different defaults on different items. That way you start from a level playing field and you can re-introduce margins or padding as required as you go along.
_____________________________
"My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
|
|
|
|
d a v e
Posts: 3937 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline
|
RE: CSS Navigation Menu - 4/26/2008 17:28:06
why are you using points on the body font size?
_____________________________
David Prescott Gekko web design
|
|
|
|
d a v e
Posts: 3937 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline
|
RE: CSS Navigation Menu - 4/27/2008 4:56:12
is the way you're using px ok with IE?! (for text resizing i mean)
_____________________________
David Prescott Gekko web design
|
|
|
|
d a v e
Posts: 3937 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline
|
RE: CSS Navigation Menu - 4/27/2008 6:52:13
you mean you don't have IE 5.5 or whatever used to be on the mac? :) i just thought that while you were at it you might have used %/em. i was just being curious/nosey :)
_____________________________
David Prescott Gekko web design
|
|
New Messages |
No New Messages |
Hot Topic w/ New Messages |
Hot Topic w/o New Messages |
Locked w/ New Messages |
Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|