Advanced Search

Results 1 to 6 of 6

Thread: positioning: div box moves off screen

  1. #1
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question positioning: div box moves off screen

    Once I set the div.container to position: relative; my footer div moved off screen. I know it is there because a select-all and copy grabs the text. When I remove the positioning the div shows up but the relative positioning is lost.

    Thanks in advance for any help.


    P.S. All testing is done in the latest Firefox.


    CSS code:

    body {background-color: #FFFFFF; padding: 0px; margin: 0px;}

    div.container
    {
    width: 800px;
    padding: 0px; margin: 0px;
    margin-left: auto; margin-right: auto;
    background-color: #FFFFFF;
    position: relative;
    }


    /* Content boxes */

    div.header
    {
    width: 800px; height: 150px;
    padding-bottom: 5px; text-align: left; vertical-align: top;
    font-size: 12pt; white-space: nowrap; background-color: #FFFFFF;
    position: absolute; top: 0px; left: 0px;
    z-index: 1;
    }


    div.menu
    {
    width: 140px; /* The width is -10px to accomodate padding */
    padding: 5px; text-align: center; vertical-align: top;
    font-size: 14pt; font-weight: bold; white-space: nowrap; background-color: #FFFFFF;
    position: absolute; top: 155px; left: 0px; /* The top is is +5px to accomodate header padding */
    z-index: 2;
    }


    div.content
    {
    width: 640px; /* The width is -10px to accommodate padding */
    padding: 5px; text-align: left; vertical-align: top;
    font-size: 12pt; white-space: nowrap; background-color: #FFFFFF;
    position: absolute; top: 155px; left: 150px; /* The top is is +5px to accommodate header padding */
    z-index: 3;
    }


    div.footer
    {
    width: 800px;
    padding-top: 5px; text-align: center; vertical-align: bottom;
    font-size: 10pt; white-space: nowrap; background-color: #FFFFFF;
    position: absolute; bottom: 0px; left: 0px;
    z-index: 4;
    }


    /* Menu Settings */

    a.menu,a.menu:link,a.menu:visited
    {
    color: #000000;
    text-decoration: none;
    }
    a.menu:hover {text-decoration: underline;}

    ----------------------------------------------------

    HTML code:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Template, Inc: Template</title>
    <link rel="stylesheet" type="text/css" href="template.css">
    </head>

    <body>

    <div class="container">

    <div class="header"><img src="img/logo-c.jpg"></div>

    <div class="menu">
    <a class="menu" href="index.html">Home</a><br>
    <a class="menu" href="clients/index.html">Login</a><br>
    <a class="menu" href="services/index.html">Services</a><br>
    <a class="menu" href="products/index.html">Products</a><br>
    <a class="menu" href="aboutus/index.html">About Us</a><br>
    <a class="menu" href="contacts/index.html">Contact Us</a>
    </div>

    <div class="content">
    Where the content goes.<br><br><br><br><br><br>
    </div>

    <div class="footer">
    &copy; Template, Inc. 2008
    </div>

    </div>
    </body>
    </html>
    Last edited by k_rizza; 11-05-2008 at 07:02 PM.

  2. #2
    Join Date
    Oct 2008
    Posts
    40
    Thanks
    3
    Thanked 1 Time in 1 Post

    Smile

    Where is u r footer class .............................................

  3. #3
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I mislabeled the class when I was copying things over for posting. Good catch and thanks for letting me know.

    I edited the original post.

  4. #4
    Join Date
    Oct 2008
    Location
    Columbia Md
    Posts
    27
    Thanks
    1
    Thanked 8 Times in 8 Posts

    Default

    Change your div's from classes to ids. I believe the z-index attribute is designed for ids and not classes. Also remember that ids should only be used once on each page. Looking at your code I think that's not an issue.

  5. #5
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I switched the appropriate 'class' to 'id' and I lost my formatting settings. I know I could use 'id' and create 'p' settings for the formatting, but given my situation I will not actually be making functional use of the 'z-index'

  6. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    If you change from class to id, you must change the css from .name to #name
    Last edited by Snookerman; 11-06-2008 at 01:06 PM.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

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
  •