WordPress.org

Ready to get started?Download WordPress

Forums

Layering/Stacking DIVs? Help! (8 posts)

  1. KMLProxy
    Member
    Posted 1 year ago #

    Hello,

    I am trying to accomplish the following...

    My website has a striped background (fixed; not scrolling) and the sheet lies on top of it. I have a separate image, a gray bar and white frame, that I want to use as a FIXED (not-scrolling) header so that when you scroll, the sheet goes BEHIND the header...

    I created a DIV called "banner" that I put into my header.php and it is showing exactly like I want it to... except that when you scroll, the sheet goes IN FRONT of the header... can anyone help me figure out how to get the sheet to go behind? I gave the "banner" div I high z-index value... but apparently that didn't work?

    "banner" div that I created:

    .banner
    {
      z-index: 9000;
      height: 274px;
      top: 0px;
      background-image: url('images/jkl_bkgdbar.png');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: top center;
    }

    the relevant text in my header.php:

    <div id="art-main">
    <div class="banner"></div>
    <div class="art-sheet">
        <div class="art-sheet-tl"></div>
        <div class="art-sheet-tr"></div>
        <div class="art-sheet-bl"></div>
        <div class="art-sheet-br"></div>
        <div class="art-sheet-tc"></div>
        <div class="art-sheet-bc"></div>
        <div class="art-sheet-cl"></div>
        <div class="art-sheet-cr"></div>
        <div class="art-sheet-cc"></div>
        <div class="art-sheet-fgb"></div>
        <div class="art-sheet-body">
    <div class="art-nav">
    	<div class="l"></div>
    	<div class="r"></div>
    	<div class="art-nav-center">
    	<ul class="art-menu">
    		<?php art_menu_items(); ?>
    	</ul>
    	</div>
    </div>

    I appreciate any and all help! I need to get this website finished up ASAP!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    z-index only works if you have a position set in the CSS for that element.

    http://www.w3schools.com/cssref/pr_pos_z-index.asp

    If you need further help, please post a link to your site.

  3. KMLProxy
    Member
    Posted 1 year ago #

    Whoops, I meant to include a link in my original post...

    Hope this helps!

    http://www.joanna-kyle.com/

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Did you make the suggested correction?

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I'm looking at it...

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I'm pretty sure you can't use z-index on a background image -- you would need to put the image in the page content.

  7. KMLProxy
    Member
    Posted 1 year ago #

    Alright, I've inserted the img link into the page content, within the <div> "banner" tags... additionally, I've added an overflow: hidden; parameter to my "banner" div...

    Now, however, I have two problems...

    1) My header image was made deliberately over-long - to compensate for large resolution monitors... as such, the image is currently off-center - how can I get that image centered? (The problem is evident if you visit the site)

    2) The header div scrolls WITH the sheet, rather than remaining fixed... it was originally held fixed due to the fact that it was a background image and I had the position property fixed... how can I give this container a fixed (non-scrolling) marker now?

    I really appreciate the help.

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You'll likely need to make the header image into two images - one for just the grey background and a separate image of the part with your names. Then you can center the later one using auto side margins in the CSS. I'm not yet sure you will be able to do what you want given all these layers and complex CSS.

Topic Closed

This topic has been closed to new replies.

About this Topic