I am helping some people making a site that I'm hosting but I have run into a problem. The background layout is a picture and I have it centered to any browser size, but the content needs to stay in a box on this picture. I'm having trouble finding a way to do this.
You can see the site at
http://blaqk.tylerbryan.com/indexx.php
template page:
Code:
<LINK REL=stylesheet HREF="/style.css" TYPE="text/css">
<html>
<head>
<title>Blaqk Ink Style</title>
</head>
<body background="/layout/layout1bg.jpg">
<div align="center">
<MAP NAME="imgmap">
<AREA SHAPE=rect COORDS="625,63,669,73" HREF="/indexx.php" ALT="Blaqk Ink Style news">
<AREA SHAPE=rect COORDS="612,79,720,87" HREF="/indexx.php?x=bio.php" ALT="Blaqk Audio biography">
<AREA SHAPE=rect COORDS="699,96,758,106" HREF="/indexx.php?x=media.php" ALT="Blaqk Audio media">
<AREA SHAPE=rect COORDS="586,124,721,134" HREF="/indexx.php?x=comm.php" ALT="Blaqk Audio communities">
<AREA SHAPE=rect COORDS="590,150,662,160" HREF="/indexx.php?x=lyrics.php" ALT="Blaqk Audio lyrics">
<AREA SHAPE=rect COORDS="676,168,824,177" HREF="/forum/" ALT="Blaqk Ink Style forum">
</MAP>
<IMG SRC="/layout/layout1a.jpg" border=0 width=850 height=567 USEMAP="#imgmap">
<div style="position: absolute; top:129; left:260; width:383; overflow:auto; height:400;">
<center>
<?php
$x = basename($x);
if(!$x) {
include("$default");
} else {
include("$x"); }
?>
</center>
<P><P>
</div>
</div>
</body>
</html>
style (css) page:
Code:
<html>
<head>
<title>Darkened Pages</title>
<style type="text/css">
<!--body {
scrollbar-3dlight-color: #2a2a2a;
scrollbar-arrow-color: #2a2a2a;
scrollbar-base-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #000000;
}
-->
<!--
A:link { COLOR: #ffffff; cursor:w-resize; text-decoration: none; font-weight: none;}
A:visited { COLOR: #ffffff; cursor:w-resize; text-decoration: none; font-weight: none;}
A:active { COLOR: #ffffff; cursor:w-resize; TEXT-DECORATION: none; font-weight: none;}
a:hover { color:#ffffff; cursor:w-resize; text-decoration: none; font-weight: none;}
-->
<!--
body,tr,td, h6, p, li
{font-size: 12pt;
font-family: Arial;
color:#ffffff;
line-height:17px;
letter-spacing:0pt;
cursor:default;
-->
<!--
BODY
background-attachment:fixed;
background-color: transparent}
-->
<!-- h6
{font-size: 8pt;
font-weight:normal}
-->
<!--
input, textarea
{background: transparent;
border: none;
font-size: 12pt;
font-weight: normal;
text-decoration: none;
font-family: Arial;
text-align: auto;
filter: alpha(opacity=0)}
-->
</style>
</head>
<body>
</body>
</html>