SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Z-index problems

    Hi,

    I used a script for a slideshow on my page. But it covers my subnavigation.
    I know it's a problem with the z-index, but don't know how to solve this. I also have a problem with the slideshow. The regular text is set to #222, but when active it doesn't become #ffffff

    Some advice please... Thanks!

    Website link

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try this for the dropdown problem:

    Code:
    #headerstretch {
      border-bottom: 3px solid #000000;
      position: relative;
      z-index: 10;
    }
    As for the white text, an answer would be to add this:

    Code:
    div#feature_list .current h3 {
        color: #fff;
    }
    BUT, there's a major problem. You can't have h3s (which are block level) inside <a>s, which are inline element. so your code is badly invalid.

    Those links shouldn't have H3s in them anyhow. Just remove those H3 tags and move the H3 styles to the <a>s instead.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look at

    Overlapping And ZIndex - CSS Discuss

    the stacking context might be the issue.

    No sure I am understanding what you mean "slideshow" or "regular text".

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m,

    I'm using Wordpress to generate the slideshow. This is my code in my .php file:

    HTML Code:
    <li>
    	<a href="javascript:;">
    		<h3><?php echo $mypage->post_title; ?></h3>
    	</a>
    </li>
    Can I change it to this?

    HTML Code:
    <li>
    	<h3><a href="javascript:;"><?php echo $mypage->post_title; ?></a></h3>
    	
    </li>

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Yes, that would be the way to make it fit into your template. WP has the , somewhat irksome habit, of being list-happy.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Jammmy View Post
    Can I change it to this?

    HTML Code:
    <li>
    	<h3><a href="javascript:;"><?php echo $mypage->post_title; ?></a></h3>
    	
    </li>
    Yes indeed. But personally, I'd say get rid of the H3s altogether. They don't belong there, and you can just style the <a>s to look the same. Anyhow, either way, you'll need to adjust the CSS a bit to reflect the change.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh okay ralph.m, didn't get it like that. Thanks for the help!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •