SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast Succotash's Avatar
    Join Date
    Sep 2003
    Location
    USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed header. Content scrolls OVER it.

    Hi, everybody!

    First, I'm having a good time learning CSS. Thanks to everyone who takes the time to answer these questions.

    Ok. Here's my code in current question:

    #header
    {
    width: 100%;
    height: 30px;
    border-bottom:3px solid black ;
    top: 0px; left: 0px;
    background-color: #FFCC00;
    color: #333333;
    position: fixed;
    text-align: right;
    padding: 1px
    z-index:2;
    margin:0;
    }


    #1. The contents are scrolling OVER the header in all supporting browsers. How do I layer the header to stay on top? Does it matter in what order the code is listed? FYI, the other elements are: <z-index: 1> and <position: absolute>.

    #2. The header is not stretching all the way across the top. How can I get it to reach the right? I tried so many combinations of code, including "right: 0px".

    I've searched the net for an answer, but can't figure it out.

    Thanks!

    Sufferin Succotash!

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Is #header contained in another element besides the <body>?

  3. #3
    SitePoint Enthusiast Succotash's Avatar
    Join Date
    Sep 2003
    Location
    USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect example of answering a question with a question:

    Quote Originally Posted by vgarcia
    Is #header contained in another element besides the <body>?
    After reading your speedy reply (you read/reply fast!), I realized the body <div> was wrong:

    <body>
    <div id="header" style="width: 56px"><h4>Log-In **|** Register Free **|** Member Forum</h4></div>


    It is now:

    <body>
    <div id="header" style="width: 100%; z-index: 2"><h4>Log-In | Register Free | Member Forum</h4>
    </div>


    Thanks! I hope this helps anyone else with the same probs.


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
  •