Register or have you forgotten your password?
Get the most out of Surmunity, read our tips here! Need an interesting blog to read? You've got to read the Surpass Blog!
| Welcome! Please register to access all of our features.
| Web Standards Design Discuss accessibility, CSS, XHTML and more. |
 |
|
|
LinkBack | Thread Tools | Search this Thread |
May 25th, 2007, 11:28 AM
|
#1 (permalink) |
|
Registered User
Fresh Surpasser
Joined in Feb 2006
1 posts
Gave thanks: 0
Thanked 0 times
|
position text on centered picture?
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>
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>
Last edited by kmh2006; May 25th, 2007 at 11:29 AM. |
|
    
|
|
May 25th, 2007, 2:25 PM
|
#2 (permalink) |
|
﴾͡๏̯͡๏﴿...tweet
Super #1
Joined in Dec 2005
5,768 posts
Gave thanks: 147
Thanked 151 times
|
You should take a different approach and not use the image as the background image as the body.
Instead you should make the image the background of a DIV. more to come.
__________________
 poof
|
|
|
|
|
May 25th, 2007, 2:53 PM
|
#3 (permalink) |
|
﴾͡๏̯͡๏﴿...tweet
Super #1
Joined in Dec 2005
5,768 posts
Gave thanks: 147
Thanked 151 times
|
It's a gamble if you try centering something on a background image... I would take the CSS apprroach:
Code:
body {
margin: 0 auto;
}
#container {
background: url('http://blaqk.tylerbryan.com/layout/layout1a.jpg') top left no-repeat;
margin: 0 auto;
width: 850px
height: 567px;
}
/*===>>> Enter your Text Box Data Here <<<===
.textbox {
}
*/
__________________
poof
|
|
|
|
