#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    2
    Rep Power
    0

    Issue with relative box when window resized


    I'm trying to implement the sliding transparent overlay on my sight but I'm having a problem with the positioning of the DIV. When the window is re-sized the div does not retain relativity to the menu items above. Can someone give a pointer as to how this can be achieved?

    This is what I'm trying to emulate.......daphnes-restaurant.co.uk

    Here's my website.........galu.co.uk/newsite/goforitg.html

    The yellow box remains relative to the red box but when my window is re-sized I would like the red box to be left align to the window so the users can see easier. A kind of "left align object£ on window re-size. If that makes sense.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    The daphne restaurant is centered on the page, so with resizing, it stays centered.

    To emulate this, on your main div, in the CSS code add
    Code:
    width:100%;
    and on your second div, in the CSS code add:
    Code:
    width:200px;
    margin:0 auto;
    Is that what you were looking for? You can't really rewrite the CSS code based on how large someone's screen is.

    Also, have a look at the following code. I've removed the parts you don't need, and changed the class/id stuff. It may help:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #main {
      background-color: #FF0000;
      width: 100%;
    }
    .second {
      width:200px;
      margin:0 auto;
      background-color: #FFFF00;
    }
    -->
    </style>
    </head>
    <body>
    <div id="main">Content for id "main" Goes Here
      <div class="second">
        Content for  class "second" Goes Here
      </div>
    </div>
    </body>
    </html>
    Last edited by LDHosting; June 8th, 2013 at 01:24 PM.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    2
    Rep Power
    0

    Great help LDHosting


    I'm almost there but having problems on the final leg. Pls see galu.co.uk/newsite/index.html. Now trying to

    1. Include the toggle button within the sliding DIV and name it "Hide".
    2. Slide the DIV but leave a small portion visible on the left with a "Show" button.
    3. Fade DIV text prior to sliding DIV (This currently works but I cannot get the text to re-appear when button is press again to re-show DIV

    Any help would be much appreciated. Almost loosing the will to live trying to figure this out.

    Thnx in advance......

IMN logo majestic logo threadwatch logo seochat tools logo