css, woefully inadequate

Today I was messing around with my wife’s website once again. I found a nice flash plugin for her gallery which changed the look of it, more to what both of us wanted.

The size of the flash object had to be adjusted; I messed around until I got what looked like a good size for the current layout. But—and there is always a but with this stuff—it increased the object size right and down, instead of increasing from the center where all the content would still be centered. The problem with this is that I had, for some reason beyond me, to make the dimensions of the flash object much larger than what my layout is, to get the sizing right. But as I did that, it moved it where half the object was hanging off the side. This wasn’t too big a deal, because I knew I could just adjust the margins with CSS. I messed with the margins in firebug (a firefox plugin) to where I like it. That was the easy part.

My true difficulty came when I began to attempt to insert the changes into the style sheet. To be honest, I don’t really understand CSS very well, even though I have found myself messing with it numerous times now. I know that you use classes, divs, or ids to attach styles to, but when it comes to me getting this stuff to actually work {at all}, I pretty much fail a lot.

Looking in firebug I could see that the flash object was within the ‘ngg_simpleviewer1′ div which also had a class of ‘simpleviewer’. The problem with the div was that for each gallery (the site has like five of them) the div included the gallery id # at the end. So unless I wanted to add each special div in the CSS, that wasn’t going to work. Especially when she adds new galleries, I would have to manually edit the CSS. So i tried attaching it to the class—which also seemed very logical—but found only failure.

I couldn’t figure out why it wasn’t working. I tried using #simpleviewer & .simpleviewer; I wasn’t sure when you used each, but I knew that I’ve seen both used. Luckily, I was scanning the rest of the stylesheet for some clue and found this used: “.example img{“. That made me think, maybe that is what I need to do. So I tried .simpleviewer object {margin-left:-103px;} and it worked beautifully.

I don’t really understand why it wasn’t working without adding object. I am still very stupid when it comes to this stuff. Usually I know enough to know that it can be done, but not enough to know really how to do it, without google search after google search.I am at least getting to the point where I can at least get it done. It times past, I was just stuck without really knowing where to go at all.

I have looked at the library for a book on CSS but didn’t see any. I didn’t search the catalog to see if they were just out on loan or if the library is simply devoid of such knowledge. I know there is a lot online, but a lot of the stuff I found was too vague to understand the application of the principles or too specific for me to generalize.

{This type of application is probably really good for me, simply for the fact that it makes me work my brain a bit.}