BF2S Forums Anyone who knows CSS have a spare 10 mins?

I see, doesn't make sense to me so I guess I will have to leave it until I have a spare few days to learn some more CSS.

Thanks for your help!

Last edited by White-Fusion (2008-12-09 19:05:41)

White-Fusion wrote:

I see, doesn't make sense to me so I guess I will have to leave it until I have a spare few days to learn some more CSS.

Thanks for your help!

There may be slightly more to it than the little bit of code I posted - anyhoo, that's what FireBug does for you - all I did was go to the link, click on FireBug, up pops a 'frame' showing DOM and CSS info, so, point it at the relevant part of the page, copy, paste, job done.

Seriously, if you don't use Firefox and FireBug. Do. Now. They're invaluable. (well, it's FireBug that's the invaluable bit).

As for how you get your CSS to produce the effect you want - from the look of it, all she's done is altered some the border coloration, margins and borders, maybe hidden the odd element or two. The "!important", that you can see she's used several times in the code I quoted, forces the browser to make that rule a higher priority than others (it's often needed to force through the effects you want).

CrazeD wrote:

I tried out Firebug and couldn't find any use it it at all, tbh.

Maybe I was doing it wrong, but it didn't seem to help me any lol.

Did you click the little bug in the bottom-right corner of the FireFox window (when you're on the page you're working on or want to inspect)?

After you do that, a panel pops up, showing, by default, the HTML for the page on the left and the CSS for the highlighted element on the right.

If you then click Inspect and hover the mouse over the web page, the HTML view will jump to the hovered-over element and the CSS view will update.

Then click to turn Inspect mode off and the HTML view will stay fixed showing the last hovered-over element.

You can then peruse the CSS for that element, in the right-hand pane, at your leisure.

Now, if that wasn't enough, you can also edit the live HTML and CSS code simply by clicking on the item you wish to change in the appropriate view pane - this allows you to try out different settings on stuff you're working on without having to continuously edit/upload little changes just to view the effect of those changes - change something in FireBug and the browser updates the page to show the effect of that change.

There's loads more it does as well, but for what you want to do, those are the features you'll find most useful.

Last edited by Scorpion0x17 (2008-12-10 22:34:36)