No replies
docsquid
Offline
Regular
Last seen: 12 years 31 weeks ago
Joined: 2008-08-05
Posts: 14
Points: 0

Hi. I'm doing a rather odd layout right now, and have the majority of it, to my surprise, working just fine, but with a minor problem. Before going on, I recommend you check out the link below to help you visualize, and be sure to play around with the browser window size.

http://spurlockservices.com/home4.shtml

As you can see, I think, the idea is that the text cloud region adapts to different screen sizes such that it always (for any reasonable size screen) will fit nicely between the doors. Problem is, I've got a semi-transparent png background that I want behind the text region. This way you'll be able to read the white text even if the screen is so small it pushes it down into the white region of the background. However, the background image isn't as smart as the text. For some reason, as the text region shrinks horizontally, the background region stays wide, and looks horrible. Refreshing the page, or just starting it off small, doesn't help either. The result is the same: text fits, background doesn't. Borders show the same behavior. Funny thing is, now that I look at it, I can't honestly explain how I made the text shrink...

Anyway, all the CSS for that document is in the head for the time being. I'm posting the entire contents below just for convenience. I know its a weird issue, but thanks in advance for the help.

<!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" xml:lang="en" lang="en">
<head>
<title>Spurlock Services - AMOMS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
<!--
 
body,html
{
	height:100%;
	width:100%;
	margin:0px;
	padding:0px;
}
body
{
	background-image: url(/images/ss_floor_1280.jpg);
	background-position:center bottom;
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-color:black;
	text-align:center;
}
 
#titlebar
{
	background-image:url(/images/top_bg.png);
	background-repeat:horizontal;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	color:#FFFFFF;
	height:110px;
	z-index:100;
}
 
.topcontent
{
	position:relative;
	top:5px;
}
 
#container
{
	position:absolute;
	bottom:0px;
	width:100%;
	text-align:center;
	height:100%;
}
 
#doorfarm
{
	position:absolute;
	margin:auto;
	text-align:center;
	max-width:1280px;
	width:100%;
	height:100%;
}
 
.door
{
	text-align:center;
}
 
#leftdoors .door
{
	float:left;
	margin-right: 3%;
}
 
#rightdoors .door
{
	float:right;
	margin-left: 3%;
}
 
.door a
{
	font-family:Verdana, Verdana, Geneva, sans-serif;
	color:#CCCCCC;
	font-size:11px;
}
.door a:hover
{
	color:#FFFFFF;
	text-decoration:none;
}
 
.door img
{
	padding-top:5px;
}
 
#leftside
{
	margin-left:2px;
	float:left;
	min-width:262px;
	width:100%;
	max-width:267px;
	position:relative;
	height:100%;
	clear:none;
}
#rightside
{
	margin-right:2px;
	float:right;
	min-width:262px;
	width:100%;
	max-width:267px;
	position:relative;
	height:100%;
	clear:none;
}
 
#center
{
	padding-top:130px;
	min-width:276px;
	max-width:746px;
	position:relative;
	margin:auto;
	clear:none;
	/*
		On smallest screens, 524 px taken by doors
		On larger screens, 534
	*/
}
 
.textcloud
{
	margin:auto 10px;
	background-image:url(images/trans_dot_gray.png);
	background-repeat:repeat;
	font-family:Verdana, Verdana, Geneva, sans-serif;
	color:#FFFFFF;
	font-size:12px;
	text-align:justify;
}
 
.textcloud a
{
	color:#77AAFF;
}
 
#leftdoors
{
	width:100%;
	position:relative;
	top:100%;
	margin-top:-390px;
}
 
#rightdoors
{
	width:100%;
	position:relative;
	top:100%;
	margin-top:-390px;
}
 
-->
</style>
</head>
<body>
	<div id="titlebar">
		<img src="/images/amoms2_100.png" class="topcontent" alt="AMOMS" />
	</div>
	<div id="container">
		<div id="doorfarm">
			<div id="leftside">	
				<div id="leftdoors">
					<div class="door" style="padding-top:140px">
						<a href="">Incos 50</a><br />
						<img src="images/door4_85.png" alt="Door" />							
					</div>
					<div class="door" style="padding-top:62px">
						<a href="">5100</a><br />
						<img src="images/door4_80.png" alt="Door" />							
					</div>
					<div class="door" style="padding-top:0px">
						<a href="">4500</a><br />
						<img src="images/door4_75.png" alt="Door" />							
					</div>				
				</div>
			</div>
			<div id="rightside">
				<div id="rightdoors">
					<div class="door" style="padding-top:140px">
						<a href="">5971/5972</a><br />
						<img src="images/door4_85.png" alt="Door" />							
					</div>
					<div class="door" style="padding-top:62px">
						<a href="">5970</a><br />
						<img src="images/door4_80.png" alt="Door" />							
					</div>
					<div class="door" style="padding-top:0px">
						<a href="">Ion Trap</a><br />
						<img src="images/door4_75.png" alt="Door" />							
					</div>				
				</div>
			</div>
			<div id="center">
				<p class="textcloud">
						I am the text cloud. I float above majestically and contain 
						all of your precious textual content. Sometimes, when I am 
						feeling lonely, I listen to Norah Jones. Other times, I do not. 
						Being a text cloud is not the most exciting existence, but I 
						earn enough to support my family and my myriad vices, so I 
						usually feel content. If you would like to learn more about 
						text cloud life, check out <a href="http://squidrock.com">squidrock.com</a>.
				</p>				
			</div>		
		</div>
	</div>
</body>
</html>
[img][/img]