Forum Support

Shape 5
March 28, 2024, 11:51:42 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: z-index  (Read 958 times)
weschappy
Jr. Member
**
Offline Offline

Posts: 3



« on: 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/

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


I've been modifying my template.css and in particular the code below, to try fix my problem:
Code:
#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 Smiley Smiley

Wes Chapman
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #1 on: 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.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
weschappy
Jr. Member
**
Offline Offline

Posts: 3



« Reply #2 on: 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

Thanks.
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #3 on: 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:

Code:
#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.
« Last Edit: September 13, 2012, 06:33:44 PM by Tristan Rineer » Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
weschappy
Jr. Member
**
Offline Offline

Posts: 3



« Reply #4 on: September 13, 2012, 08:47:35 PM »

Fairly straight forward when you think about it logically. Smiley
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.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.