Ahhh...I knew that...but it didn't cocur to me....Oren wrote:No one has mentioned yet that what you were doing was wrong:You can't use the same id with more than 1 element.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>
See: http://www.w3.org/TR/REC-CSS2/selector. ... -selectors
Need help on CSS horizontal menu
Moderator: General Moderators
-
alex.barylski
- DevNet Evangelist
- Posts: 6267
- Joined: Tue Dec 21, 2004 5:00 pm
- Location: Winnipeg
-
alex.barylski
- DevNet Evangelist
- Posts: 6267
- Joined: Tue Dec 21, 2004 5:00 pm
- Location: Winnipeg
It's not that I'm not convinced...I'm just not interested in learning all the browser caveats, etc...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.
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
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.
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
Bump 
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:
And now the CSS:
Here are my questions...
1) I would like to change the typical bullet into the symbol » 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
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 Us</a></li>
<li><a href="#" title="some link 4">Services</a></li>
<li><a href="#" title="some link 5">Contact Us</a></li>
</ul>
</div>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;
}1) I would like to change the typical bullet into the symbol » 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
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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:1) I would like to change the typical bullet into the symbol » is this possible without using an image???
Could do either.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 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
Shoot..I meant to correct that in my original message...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.
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
Thats what I ended up doing...but I figured I could avoid entering » for each itemYou 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/
I suppose I could use padding instead of
Cool I'll do thatCould 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
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???
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???
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA