CSS Image Layers

  • Resolved theglovner

    (@theglovner)


    11 years, 8 months ago

    First time posting long time reader.

    Wondered if anyone can help me out with the following issue I’m having.

    I’m trying to use CSS Layers to build up a picture (in order to allow each of the portrait png’s to seperately clickable to link to other pages).

    I’ve set up a custom.css containing the following:

    .Layer-1 {
  position: relative;
  left: +0px;
  top: +0px;
  width: 1500px;
  height: 900px;
  z-index: 1;
}

.Layer-2 {
  position: relative;
  left: 36px;
  top: 23px;
  width: 236px;
  height: 355px;
  z-index: 2;
}

.Layer-3 {
  position: relative;
  left: 314px;
  top: 23px;
  width: 284px;
  height: 355px;
  z-index: 3;
}

.Layer-4 {
  position: relative;
  left: 636px;
  top: 23px;
  width: 284px;
  height: 355px;
  z-index: 4;
}

.Layer-5 {
  position: relative;
  left: 951px;
  top: 23px;
  width: 236px;
  height: 355px;
  z-index: 5;
}

    I’ve then copied the standard full width template and added the following piece of code (so I only affect a single page, the one calling the copied .php):

    <div class="layer1">
    <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-1.png">

           <div class="layer2">
           <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-2.png">

                  <div class="layer3">
                  <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-3.png">

                        <div class="layer4">
                        <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-4.png">

                              <div class="layer5">
                              <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-5.png">
    			      </div>
			</div>
		  </div>
	   </div>
    </div>

    My expectation given everything I’ve read over the past two hours trying to work this out would have led me to believe I would end up with something like:

    https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-0.png

    But what I’m actually seeing is this:

    https://www.klones.co.uk/sandbox/

    I’d appreciate any help anyone can give.

    Thanks for looking.

Viewing 8 replies - 16 through 23 (of 23 total)
  • Thread Starter theglovner

    (@theglovner)

    Can’t see any red line anywhere, I guess that suggests that it isn’t looking at the custom.css but continuing to look at the style.css where it can’t find those div classes.

    Next step try putting the css code you provided into the main style.css and be damned with their warnings!!

    Humor me with this…put this in your page. 

    <div style="left: 36px; top: 23px; width: 236px; height: 355px; z-index: 2;>
    <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-1.png">

           <div style="left: 36px;top: 23px;width: 236px;height: 355px;z-index: 2;">
           <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-2.png">

                  <div style="left: 314px;top: 23px;width: 284px;height: 355px;z-index: 3;>
                  <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-3.png">

                        <div style="left: 636px;top: 23px;width: 284px;height: 355px;z-index: 4;>
                        <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-4.png">

                              <div style="left: 951px;top: 23px;width: 236px;height: 355px;z-index: 5;>
                              <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-5.png">
    			      </div>
			</div>
		  </div>
	   </div>
    </div>
    Thread Starter theglovner

    (@theglovner)

    Boom and there it is.

    Yup, added the CSS you provided into the main style.css and it’s appearing exactly as it was in CSSDesk.

    Thanks for your help solving this, it’s massively appreciated, thought I was going to have to back down and go for a simpler look.

    Many thanks again.

    Whoops…use this:

    <div style="left: 0px; top: 0px;width: 1500px;height: 900px;z-index: 1;">
    <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-1.png">

           <div style="left: 36px;top: 23px;width: 236px;height: 355px;z-index: 2;">
           <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-2.png">

                  <div style="left: 314px;top: 23px;width: 284px;height: 355px;z-index: 3;>
                  <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-3.png">

                        <div style="left: 636px;top: 23px;width: 284px;height: 355px;z-index: 4;>
                        <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-4.png">

                              <div style="left: 951px;top: 23px;width: 236px;height: 355px;z-index: 5;>
                              <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-5.png">
    			      </div>
			</div>
		  </div>
	   </div>
    </div>
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So you put it into the theme’s files?

    Thread Starter theglovner

    (@theglovner)

    Andrew

    I did and working exactly as intended.

    So the theme file seems to suggest that a custom.css should supersede the theme style.css. But didn’t seem to work in practice.

    The second I dropped it into the style.css from the theme and purged the cache it appeared exactly as it had in your CSSDesk.

    DJDoubleXL189.

    I’ll try your suggestion in the sandbox page just now and see how it works out.

    UPDATE:

    It still doesn’t have the desired effect. Images are arranged vertically.

    Andrew seems to have the winning ticket.

    Which confused me at first since everything I found suggested CSS Layers using the z-index was the way to go.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Z-index is the way to go sometimes but you cannot use z-index on child elements. They only work on sibling elements, although you don’t actually need to use z-index here.

    If your Custom CSS is not working then try using a Custom CSS plugin because editing the theme’s files is not a complete solution.

    Thread Starter theglovner

    (@theglovner)

    It’s a fair point.

    I assume any updates to the theme will obviously overwrite my changes to the theme’s style.css so getting a custom.css up an running will deal with that potential issue.

    I’ll get things up and running with this as a band aid fix at the moment then look to get the bits of code moved over into that plugin you have suggested.

    Thanks again for all the help.

Viewing 8 replies - 16 through 23 (of 23 total)
  • The topic ‘CSS Image Layers’ is closed to new replies.