A CSS question surely you can answer

  • Hey everyone,

    I’m using the Cleanr theme at eatlocalboston.com. Obviously, it’s looking a bit spare. I’d like to put a background image on the site, however — I want it to go around the header/sidebar/content and footer divs.

    I can make the background image work, that’s easy. But something about the cascade (i think) makes it impossible to keep it from also working as the background to all the other divs.

    There is an easy solution to this, right?

    Many thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi

    You have a div class container_16 that wraps all of the content, and that is where you would apply a background that is applied to all of them as one. I would assign an ID of wrap to that div along with its classname, as other div’s could have container_16 assigned as a class, which would result in the background applying to those other sections as well.

    There may be a small problem. Even though the footer is contained within that div, it appears some floats are cleared before the footer is reached and so the background may not apply to the footer.

    I found for one that the HR tag is styled with clear: both, which should be removed. But that by itself did not solve the problem.

    You have a bunch of validation errors on your homepage
    https://validator.w3.org/check?uri=https://eatlocalboston.com/
    Some of them, towards the bottom, are tag mismatch errors, and these can cause this sort of problem. If you can’t get it to work, you may want to put time into correcting some of the tag mismatch errors.

    Thread Starter bostonlo

    (@bostonlo)

    Thanks!

    So um.. I definitely don’t know enough about programming yet to understand what these validation errors mean. Are they attached to the theme? Seems like they have little connection to what I’ve done to things. Or maybe I’m wrong.

    Any basic advice for how to start correcting things?

    First, revalidate your page checking the “Show Source” box. The HTML the browser is seeing will then display below the list of errors. You don’t necessarily have to correct every error. The most relevant ones are the ones at the bottom that say “Opening and ending tag mismatch” That means there is bad HTML, tags that are opened but not closed, tags that are closed with the wrong end tag, things like that. When you look at the source below the errors, you should be able to recognize for most of them what part of the site the error is coming from, because you will recognize the text. Then you just have to look to see if you can spot the mistake the error message refers to.

    On a more pleasant note, I should add that before you even start any of that, if you apply your background image to div class container_16
    in the CSS, the background image will apply to header, content, and sidebar – everything except the footer. The footer is where the effect of errors is becoming visible. So you can get that much of what you want to do done with the site the way it is.

    If that gives the result you want and does not result in duplicating the background in some other part of the site, then you are all set. If it duplicates in another part of the site, do the “assign an ID” step I referred to before, and assign the background to that ID not to the div class container_16. However it will be easier to assign to div class container_16, so start there and see if it works.

    (Sometimes, plugins cause bad code when they interact with other parts of the site coding)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘A CSS question surely you can answer’ is closed to new replies.

Tags