Shape 5

Wordpress Club Themes => Political - Club => : weschappy September 13, 2012, 07:33:58 AM



: z-index
: weschappy September 13, 2012, 07:33:58 AM
Hey guys,
little stuck..

I have a picture slideshow in the banner position, and the logo on the left (default spot).
How do I make my logo i.e. the political symbol, to be (z-index) above the picture slideshow, and make it stretch the length of the header?

The stretching the length of the header part is easy, but I can't seem to get the pic slideshow to go underneath my logo with z-index. Instead it just goes down onto the next line.

For an idea of what I'm attempting to accomplish, check this:

http://www.bradbattin.com/ (http://www.bradbattin.com/)

And if you know how that site managed to fade the slideshow into the logo/heading, that would be appreciated too :D


I've been modifying my template.css and in particular the code below, to try fix my problem:
:
#s5_logo {

    height:87px;

    margin-bottom:31px;

    margin-left:26px;

    margin-top:23px;

    width:478px;

    background: url(../images/Shape5_Political_logo.png) no-repeat;

position: absoloute;

z-index: 2;}

   

#s5_topright {

    width:500px;

    color:#4f4848;

    margin-top:16px;

    margin-right:16px;

position: absoloute;

z-index: 1;

    }

Thanks for any help :) :)

Wes Chapman


: Re: z-index
: Tristan Rineer September 13, 2012, 08:48:05 AM
That site didn't "fade" anything.  The entire header is a slideshow and each slide is identical on the half that appears to not change.

As for your CSS issues....  URL?  I can't see what the problem is if I can't see the site.


: Re: z-index
: weschappy September 13, 2012, 06:11:40 PM
Ohh that makes sense! But if that's the case, wouldn't the complete header fade, i.e. the logo as well, not just the images?

Sorry, forgot it! www.maria-mccarthy.com (http://www.maria-mccarthy.com)

Thanks.


: Re: z-index
: Tristan Rineer September 13, 2012, 06:31:56 PM
Good catch.  I looked at their code again and it appears that the logo is actually a background behind their fader.  This code should help:

:
#s5_logo {
     display:none;
}
#s5_topright {
     background:url("../images/Shape5_Political_logo.png") no-repeat scroll 0 0 transparent;
     width: 100%;
}

I wouldn't remove the other CSS for those areas, just add the lines I've given you and/or adjust what's already there.  I only gave the pieces that need changing, so you may still need some of the other parts.

You will need to change the images in your fader to use transparent .png files with a "blank" (transparent) area over the part of the logo that you want to have always show.


: Re: z-index
: weschappy September 13, 2012, 08:47:35 PM
Fairly straight forward when you think about it logically. :)
Ohh that's what they did. I could see that their slider was the width of the header, but wasnt quite sure about the whole fading thing. But that makes perfect sense! Thanks!

I'll hopefuly get some spare time tonight or tomorrow to try your suggestions out.