Cant figure out why inner css overlaps outer css in the zen subtheme.

By darksniperx on 7 Feb 2010 at 21:55 UTC

Hi,

I have specified background images in 2 div elements, but they keep overlapping each other, cant figure out how to fix it.

Here is the css code:

/** sidebar-left **/
  #sidebar-left
  {
  background:#ffffff url('./images/navstart.gif') no-repeat top left;
  height:44px;
  }

  #sidebar-left-inner
  {
  margin: 44px 0 0 0;
  background:#ffffff url('./images/navbox_b.gif') repeat-y;
  }

sidebar-left-inner image is overlapping sidebar-left. I would like the sidebar-left-inner image below sidebar-left.

I also have a couple more questions.
1. Is it possible to specify footer image for sidebar-left?
2. Is it possible to have a header image for sidebar-left-inner, for example to have a block title there, or a usename there.

Any help would be appreciated,

Thank you!

Comments

Hey

Anonymous (not verified) commented 7 February 2010 at 22:44

If your looking to change the position of the background image look at this webpage: http://www.w3schools.com/css/css_background.asp

I am not familiar with the Zen theme, other than the fact I hacked it apart once, but if there is a defined block area I don't see why not you can do what you want.

-

darksniperx commented 7 February 2010 at 23:13

Hi,

I have been on that link before, it doesn't contain any useful information for me.

_

pbarnett commented 7 February 2010 at 23:09

I suspect that you need to set the background-position of #sidebar-left-inner to 0 44px

Pete.

-

darksniperx commented 7 February 2010 at 23:16

Hi,

I have modified to code to this:

#sidebar-left-inner
  {
  margin: 44px 0 0 0;
  background:#ffffff url('./images/navbox_b.gif') repeat-y;
  background-position: 0 44px;
  }

But there is no change :(

_

pbarnett commented 7 February 2010 at 23:24

Hang on, I'll do a test or two...

Pete.

Hi!

darksniperx commented 7 February 2010 at 23:30

Just to let you know there are 2 css files that zen theme uses.

Here is the code in the first one:
layout.css - fixed grid, I have tried to play with the setting too, but there is no change.

/** sidebar-left **/
  #sidebar-left
  {
    float: left;
    width: 160px;
    margin-left: 0;
    margin-right: -200px; /* Negative value of #sidebar-left's width + left margin. */
    padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */
  }

  #sidebar-left-inner
  {
    margin: 0 20px 0 0;
    padding: 0;
  }

and the other one is the post above.

_

pbarnett commented 7 February 2010 at 23:52

#sidebar-left
{
background:#ffffff url('./images/top.png') no-repeat top left;
}

#sidebar-left-inner
{
margin: 44px 0 0 0;
background:#ffffff url('./images/inner.png') repeat-y;
}

works for me - see http://mongolia.charityrallies.org/sites/all/files/Screenshot-44.png

Is that what you're trying to do?

Pete.

Yup,

darksniperx commented 7 February 2010 at 23:55

That is exactly, what I am trying to do!

But I don't see the difference in your code and my code.

_

pbarnett commented 8 February 2010 at 00:09

Have you got Firefox and Firebug?

Here's another screenshot - http://mongolia.charityrallies.org/sites/all/files/Screenshot-45.png

This is a Zen subtheme - I can post a gzipped tar of the whole thing if it helps...

Pete.

Hi!

darksniperx commented 8 February 2010 at 00:26

Here is the screen shot:

http://www.freeimagehosting.net/uploads/a007345b96.png

There is no need to post your gzipped theme yet, I need to figure out what has happened to mine, otherwise I will be clueless as to why it never worked.

Thank you!

_

pbarnett commented 8 February 2010 at 00:35

If you look closely, your margin: 44px 0 0; is displayed with a strike through, which means it's been overridden in a higher-level or subsequently-defined class.

Pete.

Hi!

darksniperx commented 8 February 2010 at 00:48

I have noticed that too, but I have no idea which class overrides it, I pretty much have a clean installation of zen theme with fixed layout subtheme. Any way as to find out which class overrides margin.

You have clean installation too, there shoulnt be too much of a difference between your installation and mine.