Skip navigation
Oregoner
Currently Being Moderated

Content scrolling over fixed content: What am I doing wrong?

Dec 6, 2012 4:09 PM

Doing this for my friend for free while learning Dreamweaver.

 

My fixed elements refuse to stay on top of my scrolling elements. I have asked nicely.

 

I tried the z-index:100;

 

I could use a hint or 2.

 

I also can't get my page to center. Might thses troubles be related?

 

I'd appreciate it if you would have a look: http://h2o-test.businesscatalyst.com/Brenda_test.htm

 

No hair left to pull. I have tried the z-index to no avail.

 

Thanks

Oregoner

 
Replies
  • Currently Being Moderated
    Dec 6, 2012 5:09 PM   in reply to Oregoner

    Ditch the absolute positioning.  It removes content from the normal document flow.

     

    View source in browser to see the code in this example:

    http://alt-web.com/TEMPLATES/FixedLayout.shtml

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 6, 2012 7:57 PM   in reply to Oregoner

    Lot of things don't look right on that page.

     

    1. You've defined your Div Classes & IDs with background-image instead of actually just defining them as a placeholder, then adding the image within it with <img src..>. This is bad practice!
    2. Lot of the divs are 'fixed' in position - make them relative to their parent containers - this way you can control them from 1 main div (to aid positioning)
    3. Every element has a top and left spacing defined - this means you have to change these values for each and every div to get the content aligned properly -  time consuming
    4. Even though you've defined lot of classes & IDs in your markup, you still have inline styling in some of them - for example <h1> still has a font-color and font-size attribute
    5. Overall, the code is malformed

     

    Fix all of the things I've mentioned and run your site through http://validator.w3.org/ to check for errors and fix them too.

     

    Do post back if you're puzzled about how you can fix the pointers I've given!

     

    -ST

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 7, 2012 4:16 AM   in reply to Oregoner

    I had a look at the validation as Sudershan quite rightly suggested, but do not believe that they contribute to your problem.

     

    Nancy's suggestion certainly does make a difference.

     

    Have a look at the markup for the problem lines

    <div class="container"><h1 class="h2o_title"><font style="font-size: 72px;" color="#08087f">H2O Visions Bonaire</font> </h1><br>

    <h2 class="h2">Guided Snorkel &amp; Photo Tours</h2></div>

    <!--div Style="position: fixed; top: 200px; left: 70px;"-->

    </div>

    <div class="h2o_navbar"></div>

    and the corresponding style rules

    h2 {

        font-family:Verdana, Geneva, sans-serif;

        font-size:36px;

        color: #08087f;

        text-shadow: 0px 0px 30px #FFFFFF;

        line-height: 1.1;

        position: fixed;

        top: 100px;

        left: 70px;

    }

     

    .h2o_title    {

        font-family:Tahoma, Geneva, sans-serif;

        font-weight:bold;

        text-shadow: 2px 2px 20px #FFFFFF;

        position: fixed;

        top: 20px;

        left: 70px;

     

    }

    .h2o_navbar {

        width: 960px;

        height: 60px;

        background-image:url(images/Yellow_Navbar.jpg);

       position: fixed;

        top: 200px;

        left: 70px;

        -moz-border-radius: 10px;

        -webkit-border-radius: 10px;

        -khtml-border-radius: 10px;

        border-radius:10px;

    }

    I suggest that you remove the highlighted style rules and position the elements using widths, floats and/or margins

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 7, 2012 11:42 AM   in reply to Oregoner

    Oregoner.

     

    I knew this was coming!

     

    It's pretty simple. Add a class selector to your <img..> tag itself and define it in CSS:

     

    CSS:

     

    .round{

    border-radius: 20px;

    -webkit-border-radius: 20px;

    }

     

    HTML:

     

    <div class="topr_image">

    <img class="round" src="images/TopR_fish.png">

    </div>

     

    Remove the background-image definition from the topr_image class.

     

    -ST

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points