Results 1 to 4 of 4
  1. #1


    Member Since
    Mar 20, 2008
    Posts
    4
    Keeping Content Fixed while Dragging Browser..
    Hey guys / gals.

    I'm creating a website in Dreamweaver CS4.. I wanted all the content of my site to move (but at the same time stay fixed) whenever I open it up in a browser. Example, look at this site:

    CollegeHumor - Funny Videos, Funny Pictures, Funny Links!

    Notice how when you drag the browser window larger and smaller, the content all drags along too?

    Here's my 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>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <center>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script language="JavaScript">
    window.resizeTo(1024,768)
    </script>
    <title>15 Minutes!</title>
    <style type="text/css">
    <!--


    #banner {
    position:absolute;
    width:858px;
    height:232px;
    z-index:1;
    left: 82px;
    top: 8px;
    }
    #nav1 {
    position:absolute;
    width:143px;
    height:34px;
    z-index:2;
    left: 82px;
    top: 240px;
    background-image: url(images/nav1.jpg);
    }
    #video {
    position:absolute;
    width:265px;
    height:252px;
    z-index:3;
    left: 82px;
    top: 274px;
    background-image: url(images/video.jpg);
    }
    #gallery {
    position:absolute;
    width:593px;
    height:252px;
    z-index:4;
    left: 347px;
    top: 274px;
    background-image: url(images/gallery.jpg);
    }
    #news {
    position:absolute;
    width:858px;
    height:377px;
    z-index:5;
    left: 82px;
    top: 526px;
    overflow:scroll;
    background-image: url(images/news.jpg);
    }
    #bottom {
    position:absolute;
    width:858px;
    height:212px;
    z-index:6;
    left: 82px;
    top: 903px;
    background-image: url(images/bottom.jpg);
    }
    #bottom_banner {
    position:absolute;
    width:806px;
    height:135px;
    z-index:7;
    left: 107px;
    top: 942px;
    background-image: url(images/bottom_banner.jpg);
    }
    #nav2 {
    position:absolute;
    width:143px;
    height:34px;
    z-index:8;
    left: 225px;
    top: 240px;
    background-image: url(images/nav2.jpg);
    }
    #nav3 {
    position:absolute;
    width:143px;
    height:34px;
    z-index:9;
    left: 368px;
    top: 240px;
    background-image: url(images/nav3.jpg);
    }
    #nav4 {
    position:absolute;
    width:143px;
    height:34px;
    z-index:10;
    left: 511px;
    top: 240px;
    background-image: url(images/nav4.jpg);
    }
    #apDiv4 {
    position:absolute;
    width:143px;
    height:34px;
    z-index:11;
    left: 654px;
    top: 240px;
    background-image: url(images/nav5.jpg);
    }
    #apDiv5 {
    position:absolute;
    width:143px;
    height:34px;
    z-index:12;
    left: 797px;
    top: 240px;
    background-image: url(images/nav6.jpg);
    }
    body {
    background-image: url(images/main_background.jpg);
    background-repeat: repeat;
    }


    -->
    </style>
    </center>
    </head>

    <body>
    <div id="apDiv1"></div>
    <div id="banner"><img src="images/banner.jpg" width="858" height="232" /></div>
    <div id="nav1"></div>
    <div id="nav2"></div>
    <div id="video"></div>
    <div id="gallery"></div>
    <div id="news"></div>
    <div id="bottom"></div>
    <div id="bottom_banner"></div>
    <div id="nav3"></div>
    <div id="nav4"></div>
    <div id="apDiv4"></div>
    <div id="apDiv5"></div>
    </body>
    </html>

  2. #2


    Member Since
    Oct 11, 2009
    Posts
    8
    Insert everything inside a table 1 column wide by 1 column high. In page view, click on the table and set it to align centrally on the horizontal. You can also set the width of the table, so it doesn't reduce in width when you reduce the size of the window.

  3. #3


    Member Since
    Oct 17, 2009
    Location
    Bloomington, IN
    Posts
    5
    Specs:
    17" Macbook Pro
    Do not use tables. The table format is becoming deprecated in newer versions of xhtml. What you need to do is adjusts your sizes as a percentage (ex. width=20%). It should readjust based on that ruleset.

  4. #4


    Member Since
    Feb 26, 2009
    Posts
    20
    Hmm, I just wrote this somewhere else too..

    This is only a template and would need to be changed to meet your needs. The wrapper has a relative position so that if you use an absolute position inside any of the divs, they will be absolute to the wrapper and not the body.

    CSS:
    Code:
    body {margin:0px;}
    .wrapper {margin:0 auto;padding:0;position:relative;width:960px;}
    div#hrd {height:300px; }

    HTML:
    Code:
    <body>
    <div class="wrapper">
        <div id="content">
             <div id="hdr">Header goes here</div>
             <div id="subBody">Body content</div>
        </content>
    </div>
    </body
    16GB iPhone
    17" MacBook Pro 2.93, 320@7200, glossy
    http://www.bryanborst.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. My browser keeps crashing out, won't play content
    By RKC in forum OS X - Apps and Games
    Replies: 0
    Last Post: 01-18-2013, 12:20 PM
  2. Keeping folder positions fixed and tidy?
    By Obzi in forum Switcher Hangout
    Replies: 2
    Last Post: 11-04-2011, 02:06 PM
  3. When will Safari Content memory leak be fixed
    By firehat in forum OS X - Apps and Games
    Replies: 23
    Last Post: 11-01-2011, 05:35 PM
  4. Replies: 8
    Last Post: 05-26-2011, 04:55 PM
  5. Dragging
    By MrsRed in forum Switcher Hangout
    Replies: 15
    Last Post: 02-12-2007, 11:26 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •