css wp question

[rezzy]

I find it hardest having to work with other peoples code, if its not well thought out or well commented.

The aformentioned plugins are life savers and I can not see being a developer without them. As with any programttic language, learning the method to the madness is always the hardest part. Once you get past that, its always a bit easier.

[vangogh]

Yeah. It depends on who did the coding of course. There's usually a short learning curve even with good code while you get used to an author's style, etc, but when you get handed some really bad code you almost prefer to junk it and just start from scratch.

I really appreciate when I work on a site and the developer did a good job with their code.

[billbenson]

I have a sidebar box in wp. It has a gradiant image as the background in the css. Its dark at the bottom and grows lighter at the top. The div grows, so if the div is taller than the image, its white above the image (I guess that is the page background color).

Is there a way to either stretch the background image to meet the height of the div, or to put the background image over a background color so the top is the top above the image is the div background color? Something like the following (doesn't work)

.block-content {

background-image: url(images/rightsidebg.jpg);
background-repeat: no-repeat;
background-color: 0a40a4;

background-position: bottom left;
}

I guess I could just stick the image on the page with a -1 z index?

[vangogh]

Stretching the image is probably not going to be the most workable idea. Having it site on top of a color of your choice is. Your code looks like it has a simple error, which is why it's not working.

background-color: 0a40a4; should be background-color: #0a40a4;

You forgot the # before the hex color. If fixing that still doesn't work try placing the background-color code before the background-image code. Actually I would write the whole thing as one line.

.block-content {background: #0a40a4 url("images/rightsidebg.jpg") top left no-repeat;}

You shouldn't need to use a z-index. In general using absolute or relative positioning and z-indexes is not what you're looking for. More often than not it only causes more problems.

[billbenson]

That worked VG. Thanks. Commas, #'s etc are so easy to miss when you are looking for errors. Should have popped it into W3 I guess. I'm always chasing for that stuff in php, but at least there you get an error with a line number.

[vangogh]

I've learned over the years that the syntax is the first thing you should check. I can't even tell you how many times I spent hours looking for a solution when the problem was a missing semicolon or something similar. Unfortunately with css you don't get an error. It just won't work.

There are some css specific editors out there. I don't use one myself, but I wonder if any will have some kind of built in error reporting to catch the syntax mistakes.

[billbenson]

If you run into any decent css editors, let us know. I've looked and haven't found anything that would check syntax or suggest code.

[vangogh]

Just doing a quick search now. You might like CSSED, since it's for Linux. I think it validates your syntax if I read it right.

Here are a couple of posts I found listing a variety of css editors, mostly Mac and Windows, but some Linux and cross platform

CSS Editors Reviewed - Smashing Magazine

7 Free CSS Editors, Which Is the Best? You Choose - SpeckyBoy

There are plenty more posts too with css editor roundups.

[vangogh]

Just doing a quick search now. You might like CSSED, since it's for Linux. I think it validates your syntax if I read it right.

Here are a couple of posts I found listing a variety of css editors, mostly Mac and Windows, but some Linux and cross platform

CSS Editors Reviewed - Smashing Magazine

7 Free CSS Editors, Which Is the Best? You Choose - SpeckyBoy

There are plenty more posts too with css editor roundups.

[billbenson]

Don't recall seeing that one before VG. I'll give it a try this weekend.