Keeping Content Fixed while Dragging Browser..

J

jarryd09


Joined
Mar 20, 2008
Messages
4
Reaction score
0
Points
1
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>
 
R

richard tj


Joined
Oct 11, 2009
Messages
8
Reaction score
0
Points
1
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.
 
N

nthesettingsun


Joined
Oct 17, 2009
Messages
5
Reaction score
0
Points
1
Location
Bloomington, IN
Your Mac's 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.
 
B

B-Ryan


Joined
Feb 26, 2009
Messages
20
Reaction score
1
Points
3
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
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top