Need help on CSS horizontal menu

JavaScript and client side scripting.

Moderator: General Moderators

alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Oren wrote:No one has mentioned yet that what you were doing was wrong:

Code: Select all

<div id="body_container">
   <ul id="user_menu">
      <li id="user_menu"><a href="#">Ads</a></li>
      <li id="user_menu"><a href="#">Ads</a></li>
      <li id="user_menu"><a href="#">Ads</a></li>
      <li id="user_menu"><a href="#">Ads</a></li>
      <li id="user_menu"><a href="#">Ads</a></li>
   </ul>
</div>
You can't use the same id with more than 1 element.
See: http://www.w3.org/TR/REC-CSS2/selector. ... -selectors
Ahhh...I knew that...but it didn't cocur to me....
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

agtlewis wrote:Hockey, you should use CSS like I should use PHP Classes.

Seriously though, CSS is awesome. I'm amazed your not convinced yet.
It's not that I'm not convinced...I'm just not interested in learning all the browser caveats, etc...

And when I do take a stab at CSS my designs don't render like I want them too...

Tables just work!!!

Might add some bandwidth and I try and use them sparingly...but they work...

CSS drives me nutts...evertually I'll get there...but right now i'm not interested in learning CSS enough that those designs can compete with CSS designs
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Some very good books on CSS are Bulletproof Web Design form Dan cederholm and CSS Mastery from Andy Budd. Of course there's a ton of material online, but if you'd like to read some solid, complete and clear books, these are very well. And of course Zeldmans Designing with Web Standards is a classic must have, with some good info on css, browsers etc.

I haven't ever build a site with tables (i wouldn't know how to) and even though IE 5 or 6 will give some bugs sometimes, designing with CSS really isn't that hard. Just start with the right rules and develop first in a modern browser. And only after that test in the quirky ones.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Bump :P

Ok, so I've been working on a new project, still using tables for columnar layout, as CSS just doesn't cut the mustard...but for my menu I will use CSS and everything else which I can use CSS on :)

This time the menu is horizontal...so I don't have to worry about inline issues, etc :)

Here is my HTML:

Code: Select all

<div id="nav_menu">
	<ul>
		<li><a href="#" title="some link 1">Home</a></li>
		<li><a href="#" title="some link 2">Questions</a></li>
		<li><a href="#" title="some link 3">Contact&nbsp;Us</a></li>
		<li><a href="#" title="some link 4">Services</a></li>
		<li><a href="#" title="some link 5">Contact&nbsp;Us</a></li>
	</ul>
</div>
And now the CSS:

Code: Select all

#nav_menu ul {
	width: 120px;
	padding: 0px;
	margin: 0px;
	background-color: #164973;
	list-style: none;
}

div#nav_menu ul li a {
	font-family: "Verdana";
	font-size: 8pt;

	color: white;

	text-decoration: none;

	line-height: 2.5em;
}

div#nav_menu ul li a:hover {
	font-family: "Verdana";
	font-size: 8pt;
	color: white;

	text-decoration: none;

	line-height: 2.5em;
}
Here are my questions...

1) I would like to change the typical bullet into the symbol &raquo; is this possible without using an image???

2) I also have an *image* which is a dotted line that separates each item can I include this image in any of the CSS above or should I just create a new line and background-image: that new LI???

Cheers :)
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

1) No. You can use images or the standard shapes (circle, ring, square).

2) Why not use a dotted bottom border instead? That way you don't have the overhead of loading an image for each line.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

Hockey wrote:1) I would like to change the typical bullet into the symbol &raquo; is this possible without using an image???
You could remove the bullets, and then use that symbol in front of the items. Removing the bullets is covered here: http://css.maxdesign.com.au/listutorial/
Hockey wrote:2) I also have an *image* which is a dotted line that separates each item can I include this image in any of the CSS above or should I just create a new line and background-image: that new LI???
Could do either.

Could also do a hr (has semantic meaning), and then style that hr in css with the image. Semantic meaning AND the visual you want sounds like a win. :)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Everah wrote:1) No. You can use images or the standard shapes (circle, ring, square).

2) Why not use a dotted bottom border instead? That way you don't have the overhead of loading an image for each line.
Shoot..I meant to correct that in my original message...

Not sure a dotted border would work, as I've consider this already...but the appearance is important to me...

dotted, etc...don't quite do it...as the image I am repeating is 3x3 pixels with a single dot in the middle...

Not sure if there is a CSS style for lines which can do this...but I can't find it :(
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

You could remove the bullets, and then use that symbol in front of the items. Removing the bullets is covered here: http://css.maxdesign.com.au/listutorial/
Thats what I ended up doing...but I figured I could avoid entering &nbsp;&raquo&nbsp; for each item :(

I suppose I could use padding instead of &nbsp;
Could also do a hr (has semantic meaning), and then style that hr in css with the image. Semantic meaning AND the visual you want sounds like a win
Cool I'll do that :)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Ok so HR won't work as I can't for the love of me figure out how to make the HR not have any spacing in IE...

I've set:

padding: 0px
margin: 0px
font-size: 1px;
line-height: 1px;
height: 1px;

Everything I can think of...but the HR still (under IE) consumes alot of vertical spacing...

Any other substitute???

Perhaps a DIV???
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

You could use a 1px high div. I vaguely recall a hack needed to handle IE's irresponsible rendering of HR.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

You sure it's not the margin of the element above and below it?
Post Reply