New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

Keeping Content Fixed while Dragging Browser..


Post Reply New Thread Subscribe

 
Thread Tools
jarryd09

 
Member Since: Mar 20, 2008
Posts: 4
jarryd09 is on a distinguished road

jarryd09 is offline
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>
QUOTE Thanks
richard tj

 
Member Since: Oct 11, 2009
Posts: 8
richard tj is on a distinguished road

richard tj is offline
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.
QUOTE Thanks
nthesettingsun

 
Member Since: Oct 17, 2009
Location: Bloomington, IN
Posts: 5
nthesettingsun is on a distinguished road
Mac Specs: 17" Macbook Pro

nthesettingsun is offline
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.
QUOTE Thanks
B-Ryan

 
Member Since: Feb 26, 2009
Posts: 20
B-Ryan is on a distinguished road

B-Ryan is offline
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
QUOTE Thanks

Post Reply New Thread Subscribe


« Adding simple Database for contacts | Creating Pop up menu in DreamWeaver CS3 »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread
Thread Starter
Forum
Replies
Last Post
Web Browsers novicew OS X - Apps and Games 80 04-10-2010 12:02 PM

All times are GMT -4. The time now is 11:31 PM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?