[Wickers]

Well like most of my projects... I have left my website in the closet for a few months.

Today I pulled it out and dusted it off.... it looks nice but I was starting to feel the limit of standard tables in HTML.

So I moved on to CSS!

This is my first attempt so be nice... I have a lot to learn but it seems easy to pick up.

Getting to the point, I have moved some of my HTML over to my new CSS based page... and ditched the rest. What I want to do is create a simple menu that has each item change it's background colour when rolled over by the mouse.

Kinda like how this nav. menu does it: http://www.mozilla.org/support/

I wgetted the css files from that site... but I can't seem to find the area that takes care of it's side menu.

So far my section for my menu on my CSS page looks like this:

ul.navbar {    list-style-type: none;    padding: 0;    margin: 0;    position: absolute;    top: 2em;    left: 1em;    width: 9em }ul.navbar li {    background: lightgrey;    margin: 0em 0;    padding: 0.3em;    border-right: 1em solid black }ul.navbar a {    text-decoration: none }a:link {    color: blue }a:visited {    color: purple }

So what would be my next step?

[Wickers]

Oh, I am also trying to get the menu to fallow along as you scroll down.

[Wickers]

by adding.

a:hover { background: cyan }

I can get the links in the menu co do what I want... but it does not effect the whole area around the menu section, just around the text. Once again, I want it to look like that link in my first post.

[staph]

Is something like this what you're after?

Try setting the hover attribute for a div that the link is in.

Btw, with my limited CSS knowledge, I think this is what Mozilla are using:

	#nav li a {		display: block;		padding: 8px 10px;		text-decoration: none;		background: #EDF2F2;		border-bottom: 1px solid #ddd;		border-top: 1px solid #fff;		border-right: 1px solid #ddd;	}	#nav li a:hover {		background: #E0E9E9;	}		#nav li li span { /* used for un-linked menu items */		padding: 4px 8px 4px 20px;	}		#nav li li a {		padding: 6px 8px 6px 20px;	}

[Wickers]

Yes, that's kinda how I want it to look... thanks for the example.

But one thing... now I'm a bit set off by the use of '#'. (remember I just started learning CSS a few hours ago.)

Are there any good reference pages you know of?

[johnq]

I suggest we make this thread's title "CSS questions" so that it can be the AN CSS thread for any questions.

Additionally, we could make it a sticky and title it "CSS questions for Brad".

[staph]

Originally Posted by \/\/ickes Yes, that's kinda how I want it to look... thanks for the example. But one thing... now I'm a bit set off by the use of '#'. (remember I just started learning CSS a few hours ago.) Are there any good reference pages you know of?

If you're willing to lay out cash (or subscribe to safari), Eric Meyer has written a really excellent book on the subject.

[johnq]

Short answer: Use "#" (ID) for when it is a container that will be unique on the page. A section that there will only ever be one of.

Use "." (class) for things that there will be (potentially) multiples of.

[Wickers]

cool... thanks...

Now my style sheet looks like this. . .

body {    padding-left: 11em;    color: black;    background-color: white; }h1 {    font-family: sans }ul.navbar {    list-style-type: none;    padding: 0;    margin: 0;    position: absolute;    top: 2em;    left: 1em;    width: 9em;    }ul.navbar li {    background: lightgrey;    margin: 0em 0;    padding: 0.3em;    border-right: 1em solid black }ul.navbar li a:hover {	 background: grey;	 padding: 0.3em;	  }ul.navbar a {    text-decoration: none }a:link {    color: blue }a:visited {    color: purple }

I am not using the '#' way because this menu will be common across each page.

Now, the hover looks good... but it's still not exactly the way I'd expect it to be. It changes more then just around the text... (0.3em padding that is) but it needs to 'high-light' the entire section around the text link. (once again, ref: that mozilla link)

Thank you for your help.

[ast3r3x]

Well then while I have your attention....

I'm trying to use a transparent backdrop...so cleverly called backdrop, but when I put text in/over it, it starts at the transparency of the box it's in. So even setting it to 100% is only 100%*x% (where x is the backdrop %)...yay math!

But seriously, it might make sense if you look at it... http://mobocracy.no-ip.com

Yes it's kinda ugly, yes I stole the background from acquisition, but if you know that you are probably stealing music

I know I could just do text on top of it, but I'd prefer not to have to use positioning just because it's cleaner that way.

[drewprops]

I know that Eric Meyer made a GIF image that was a checkerboard (half of the squares making the checkerboard were transparent), so it worked out as a transparent background image, onto which he included "normally" marked-up text. It's a mechanical fix, but Big Dumb Rockets seem to work. Would this fix your problem??

[johnq]

Checkerboard vs. PNG:

http://www.nullface.com/ai/itunesBG/itunes.html

(PNG transparency of course doesn't work in WinIE)

The thing is, the GIF strobes when scrolled on LCDs.

[Moogs]

Cool thread. I've been reading up on CSS myself and am about to start building a new self-promotional site (in lieu of sending resumes everywhere) that will be entirely based on it. Good to know there's a place on this board where I might get some useful answers before searching elsewhere on the web.

The best learning site I've found is the CSS Zen garden ( the mondo-menu version where you can see all the submissions and check their sample pages ), though there are many good ones out there.

Two great books:
For the Box Model theory and reference:
Cascading Style Sheets, The Definitive Guide (2e) by Eric Meyer

...and for a mixture of Box Model theory and practical applications:
Cascading Style Sheets - Separating Content from Presentation (2e) - Briggs, Champeon, Costello, & Patterson

[johnq]

If you hate the checkerboard trick because it is non-programmatic, you know you could use PHP to have GD make a checkerboard gif of any color and save it (even if only run once/seldom, which is ideal!), so it would be 100% programmatic.

[drewprops]

Ooooo, I personally LIKE the checkerboard version because it looks like Print. I have as yet to make GD work on the Earthlink server, but the last time I tried I wasn't as far along with PHP and CGI as I am now. That's some SERIOUS geekout to go with GD, but it is tres cool and I suppose it's faster too?

The book Moogs refers to is the same one where I learned the checkerboard trick, Eric Meyer wrote the first breakout, must-have book on CSS but I have to say that it was (and still is) really hard to to follow at times if you're a true CSS n00b. The entire concept makes your brain hurt.

Perhaps my kerchief was tied too tight?

[Brad]

I'd think the concepts would only be hard if you haven' done any programming before. For folks who have worked with object oriented languages and know the importance of separating presentation from content, CSS should come pretty easily.

Of course, I'm not expecting everyone has done OO programming. I'm just saying... eh... maybe it's just me. Never mind!

*crawls into bed*

[johnq]

There's ways to have GD just make an image once and never again. Just check for the file's existence. I wouldn't want GD running each time a user comes to a page

Also you could play with non-checkerboard patterns.

And you could even use checkerboard pattern for PNG, so you'd get a blocky effect and see through at the same time. I mean both squares could have opacities less than 100. Wouldn't let WIN IE users see through but who cares (Kidding). (Kinda).

Final note: Don't make checkerboards be too small. I mean do one fairly large like 100x100 or somesuch. Were one tempted to make a 2x2 checkerboard thinking it'll save memory, think again.

The effort the browser will need to expend duplicating/tiling the 2x2 image will consume far more memory/take more time than you would think. Better to downloading a moderately larger image that needs to tile less times.

[ast3r3x]

So I'm f'd is what you guys are saying?

I either use the checkerboard pattern and have my site look like shit, use png's and have it look good, but to the 3% of people who view it, or use GD to create a ridiculously large image? MMMmmmm got to loooove WinIE!

Ugliest f'n thing I've ever seen...here

[drewprops]

Just like with dot pitch in type you might want to play with the SIZE of your checks. Don't you hate answers like these?

[ast3r3x]

So I'll detect the browser, and if it's winIE, I'll just have FireFox start downloading

Then I'll make 500 popups saying if they were using firefox this probably couldn't happen...of course this will distract them while it finishes downloading.

[Wickers]

That sounds nasty...

anyway,

Now there is one thing that is pissing me off here... for some reason when the menu is rendered it adds a one pixle thick line between one or two of the menu items... not all of them, and where the line is rendered depends on some of the spacing. So my question is, if I have all the spacing in the world set to 0 and padding just on the text itself.. and the odd line shows (not between all items just between two or three depending on how many menu items I have) how do I kill it? Could it be a browser problem? I've seen a bunch of CSS demos... some really cool, and none have problems rendering with Firefox so I don't think it's the browser.. .

Anyway... off for some food.

Thanks again.

BTW, it looks like this:

See the white line between the last two menu items? The code is the same fore each item so I'm a bit perplexed. (ALSO, this is just a test page I made... just fucking around... not my current site, which looks like crap for now)

[drewprops]

You need to give us the page/code so we can look.
The fact that it's near the end of a list makes me think that it might be associated with the way that you're "capping off" the list with the "fourms" (sic) link. It might be that you have an upper/lower margin/pad that begins to show itself at the very end case.

So, pagecode might help. But for now, I'm heading to bed 'cause I had a late work night last night and am whooped. But, I did solve four more thingies with my own sitework... some PHP, some CSS, all annoying.

[Wickers]

body {    padding-left: 11em;    color: black;    background-color: white; }h1 {    font-family: sans }ul.navbar {    list-style-type: none;    padding: 0;    margin: 0;    position: absolute;    top: 2em;    left: 1em;    width: 9em;    }ul.navbar li {    background: lightgrey;    margin: 0;    padding: 0.3em 0;    border-right: 0.8em solid black;    border-top: 0.1em solid black; }ul.navbar li a:hover {	 background: grey;	 padding: 0.3em 0;	  }ul.navbar a {    text-decoration: none }a:link {    color: blue }a:visited {    color: purple }

And this is the test page's menu area...

...(skip a few lines)...<link rel="stylesheet" href="style.css">...(skip a few lines)...<ul class="navbar">  <li><a href="index.html">Project Home</a>  <li><a href="musings.html">Download</a>  <li><a href="town.html">Screenshots</a>  <li><a href="links.html">Links</a>  <li><a href="forums.html">fourms</a></ul>...(skip the rest)...

[johnq]

I see no space in Safari or IE. What browser?

[Wickers]

Firefox/mozilla... sigh I was hoping it was not a rendering problem.

[johnq]

It's that padding: 0.3em 0; shit. Can you live with 0.2em?

Better still, use pixel values? This is for screen not print?

Copy your list a handful of times so you see 20 or so items. See the white gap? Now change the text size in the browser, up or down. The gap will jump from 3, 5, 5 to 2, 2, 3, etc.

Clearly the non-pixel values are not rendering correctly. Make it all pixels and it's all good.

<someone insert smug know-it-all CSS guru retort proving me oh-so wrong here >

I know about using ems as workarounds for IE deficiencies
http://www.clagnut.com/blog/348/

...but I'd avoid 'em for layout.

[Wickers]

Sweet!

That worked wonders... err... as I am still learning, what does 'em' stand for? What kind of unit is it? (I know I could just RTFM in this case... but hell while I'm at it)

Once again, thanks... now on to more CSS fun!

[johnq]

Well, it's a typography measurement, so I only use em for text.

There might be other valid non-text uses in CSS but usually pixels or percentages will be best.

There are arguments for em in DIVs etc (see the above clagnut link) blah blah

Pixel sizing is illogical: it relies on current display technology. Suppose a new type of display is launched next week which has half the dot pitch, allowing users to comfortably run 2048×1536 on a 15” display. My em-based site (http://tranchant.plus.com/) will be fine – the user will set their default font size to something readable, and my site (except images) will appear the same as before, but taking advantage of the higher resolution display quality. “Your” px-based site will be totally illegible unless the browser supports resizing – in which case it’s no longer using your suggested pixel sizes. So why use them in the first place?!

<-- Whatever. Enlighten me. I'm evil. I like pixels

Wikipedia is your friend:
http://en.wikipedia.org/wiki/Em_%28typography%29

[staph]

An em is literally the width of a "m" character. Similarly, an m-dash (—) is a dash the width of an m, and an n-dash (–) is a dash the width of an n.

[drewprops]

Well yes, that makes perfect sense. (??) Not poking too much fun at Printers though, those guys are the ultimate twidgets. I think that we should come up with a new universal measurement unit that is based on the atomic decay rate of IE.