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