Page 2 of 2

Posted: Sat Jun 17, 2006 11:44 am
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....

Posted: Sat Jun 17, 2006 11:46 am
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

Posted: Sat Jun 17, 2006 4:49 pm
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.

Posted: Fri Jun 23, 2006 3:20 pm
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 :)

Posted: Fri Jun 23, 2006 3:24 pm
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.

Posted: Fri Jun 23, 2006 3:34 pm
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. :)

Posted: Fri Jun 23, 2006 3:50 pm
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 :(

Posted: Fri Jun 23, 2006 3:52 pm
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 :)

Posted: Fri Jun 23, 2006 4:42 pm
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???

Posted: Fri Jun 23, 2006 5:02 pm
by RobertGonzalez
You could use a 1px high div. I vaguely recall a hack needed to handle IE's irresponsible rendering of HR.

Posted: Fri Jun 23, 2006 6:46 pm
by Benjamin
You sure it's not the margin of the element above and below it?