Website help

[CrazyMAC]

I've got two problems i can't work out and have exhausted all my guesses as to what i should type into Google, so i figured I'd try the core .

I'm trying to create something like the main menu @ http://www.steampowered.com/v/index.php with a thick line appearing on hover.

http://www.crazymac.net is what i have at the moment but my line appears downwards instead of up. I've tried fucking around with the padding and margins but haven't had much luck.

My second problem is sorting out the line spacing in the image below. It appears correctly in IE but not in FF.

Thanks in advance for any help.

http://validator.w3.org/check?uri=www.crazymac.net and if anyone knows the answers to these I'd be most grateful .

[dissonance]

for the steamish mouseovers (a:hover), set padding-bottom (or margin-bottom... might be either; experiment) to be negative x, where x is the height of the line.

or was that what you were asking?

for the rss link, don't put it in a list. end the list after your last friend, then use

, or just make the list part of a

so you can use
's. also, if the image and text both point at the same place, make them on link. saves bandwidth, albiet a small amount.

also, remember to self-close tags, like

, if you're gonna use xhtml.

[dissonance]

btw, this code is weird. everything is in lists.

[CrazyMAC]

Yeah it's wordpress and my lack of knowledge of "valid" code these days.

wordpress is a bitch to work with though.

Hmmm setting negative numbers doesn't appear todo anything in IE at least.

[Vinny Testaverde]

I use wordpress on my site, I find it quite easy to work with.

But anyways, I took a look at the code, the problem, I think, is in padding/margin. your menu li is 0 for both, give it a margin, and reduce the margin value to 0 in the "li a" So your just swapping the values...

btw get the web developer addon for firefox.

[CrazyMAC]

I tried swapping the Menu li and Menu li a padding/margins around but with no luck.

Yeah i use firebug, never leave home without it. =)

[CrazyMAC]

Awesome fixed everything but the Menu now. Thanks to all that helped.

If any one has any ideas for the menu please let me know.

Tar!

[Skjalg]

you should play around with tables and css... I think dissonance gave you some tips to start off with

[CrazyMAC]

hmm aren't tables a no no in CSS in less is data ;o? i seem to remember that being bitched at me a lot.

Yeah I've tried dissonance's suggestions but not had any luck. My negative values don't seem to have any effect what so ever.

[CrazyMAC]

Ah Ha!

                  border-bottom: 7px solid #FFA510;

                ""padding-top: 7px;

                ""line-height: 28px;        

                  color: #FFA510;

                  text-decoration:none;

"" = what i added.

I was messing around with the margins and paddings but completly forgetting about the line height.

Tar, all now i need to think of some intresting shit to write

p.s not sure if i like it know i've done it

[dissonance]

TBH tables are nowhere near dead yet. Ever tried making a tableless page? float just isn't that powerful yet, although i think your page would work if you used two div containers. Just remember to KISS.

[Thrik]

There really isn't that much difference between CSS and tables once you understand how the CSS box model actually works. I can say this with reasonable confidence as it's my full time job, and I'd be very surprised if you could throw a layout at me that I can't efficiently turn into a pure CSS page.

The trick is basically learning with experience how to approach each type of design element. It's not like tables where you essentially just put cells everywhere and then nest and nest them to get things working properly; in that respect there's a bit more skill and learning curve involved, although as a result it a lot easier to do layouts like these. (the source is clearly far more editable than a table-based design would be, which is vital when you work on commercial sites for clients that whole teams of people edit).

Although tables do have the distinct advantage of being able to stretch to 100% heights and a few other minor things, they can't actually do this once HTML is put into strict mode -- again, something that quality standards of commercial design often require. Therefore the only real advantage they've got is the ability to group everything into holding containers, which CSS can just as easily do if you know what you're doing.

But for god's sake, learn how clear: works in CSS or floats will forever be your worst nightmare.

CSS might seem complicated and cumbersome at first, but once you crack it you can work very quickly and the overall precision you gain is well worth it. Especially when you have clients who want you to move that header text two pixels to the right (which seriously has happened).

[Bic-B@ll]

i tried css for a day and if css were a physical object i'd drop kick it. the bullshit between differences in rendering in ie and ff and opera and shit drove me insane. i dont want o have to write 25 lines of shit to make it look the same in two browers, it should just fucking work. fuck you css. fuck you.

[Thrik]

That's another thing that comes with experience.

You can pretty much get CSS pixel perfect in all browsers once you understand what it is that makes them vary so much; if you come from a table background, making this habitual change can be a bit more difficult. My blog is a simplistic and old but valid example.

Not using absolute positioning except for container floats (which are inherently absolute) is a vital rule of thumb to get used to, because relative positioning generally goes smoothly for all browsers while the opposite can be said of extensive absolute positioning.

The biggest mistake most new CSS users make is thinking that the way it works is you put absolute positioning on everything, then move it out from the corner/top of the page with top: and left:, or margin:. This is completely ill-advised on every level and I recommend tutorials.

[Section_Ei8ht]

Yeah, CSS is a bit cumbersome at first, speaking from experience. I started working with tables and then started doing flash development exclusively, and because of that, I completely missed the transition from tables to CSS and xhtml. Its a lot to take in at first, but if you stick with it, you'll get it eventually.

It's as they say: No pain, no gain.