Jump to content

Website help


Recommended Posts

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 :).

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Ah Ha!

                  border-bottom: 7px solid #FFA510;

                ""padding-top: 7px;

                ""line-height: 28px;        

                  color: #FFA510;


"" = 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 :P

Link to comment
Share on other sites

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. :D

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). :cool:

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Mapcore Supporters

    Our incredible Patreon supporters keep Mapcore's lights on. If you'd like to donate, check out our Patreon announcement.

    Note: This is brand new! The format will be tweaked and rolled out to more pages soon.

  • Create New...