Jump to content


Photo
- - - - -

Aligning content with container - or - getting rid of that pesky scroll bar


  • Please log in to reply
9 replies to this topic

#1 Greg Dillman

Greg Dillman

    Soho Novice

  • Members
  • PipPip
  • 23 posts

Posted 01 April 2009 - 06:32 PM

Hello all,

My custom template is having one small problem and the answer is eluding me. A horizontal scroll bar shows in the '#content#' area whenever content is added. This is not desired. Here is a picture to get us started:

Posted Image

Note there are two "content areas": ContentLeft which contains '#CONTENT#' and a narrow one (ContentRight) containing '#CUSTOMINC#'... The one in question is ContentLeft. Please notice the scroll bar.

Here is another picture to help fill in the story:

Posted Image

This pic is an edited screen shot. It shows output of Firebug for Firefox. Above the green bar (top section) is the web page showing the two containers as noted earlier. Below the green bar is the associated code. The top section has a light blue bar indicating the boundaries of (what I assume is) the sohotext - whats thrown in based on the page editor. I saved a page with text "test" barely seen behind the light blue bar. Notice how the content area is offset to the ContentLeft container. This is what is causing the scroll bar.

What code do I alter to align the sohotext with the ContentLeft container? In addition, once that is cured, where do I pad the content so it isn't smashed against the left boundary?

Thanks in advance for your help.

Greg

#2 lwyau

lwyau

    a soho enthusiast

  • Moderators
  • 5,605 posts

Posted 01 April 2009 - 06:38 PM

You did not show how "ContentLeft" style is coded. In fact, it'll be helpful to show the template index.html and custom.css files.

#3 Greg Dillman

Greg Dillman

    Soho Novice

  • Members
  • PipPip
  • 23 posts

Posted 02 April 2009 - 02:41 AM

Thanks for your response. Here is index.html. Custom.css will follow in another post.

INDEX.HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="3jD4Fx81zJVUUoyQ+DY/dc5SzEyCK5wGtlARtn+pdh0=" />
<title>Americas Pool: Your Premier Site for Sports Pools</title>

<style>
</style>
<link href="custom.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
.style1 {color: #000000}
-->
</style>
</head>

<body>

<div id="wrap">

	<div id="top">
	  <div id="logo"><img src="images/ap-logo.png" width="661" height="106" /></div>
  <div id="login" class="rounded">
  <h3> LOGIN </h3>
			<form method="post" action="http://americaspool.com/pgm-secure_login.php">
				<input type="hidden" name="PROCESS" value="AUTHENTICATE" />
				<input type="hidden" name="pa" value="" />
				<input type="hidden" name="sc" value="" />
				<input type="hidden" name="customernumber" value="" />
				<p><input name="SOHO_AUTH" type="text" value="" size="22" /><br/>Email Address</p>
				<p><input name="SOHO_PW" type="password" value="" size="22" /><br/>Password</p>
				<input name="image" type="image" class="padding" src="images/button-signin.png" alt="Signin" align="right" style="padding-right: 10px;"/>
				<p><input type="checkbox" name="remember" /> Remember Me</p>
			</form>
			<style>#password { color: #CDD3E8; font-size: 11px; float: right; padding: 10px 20px 0 0; } #password a { color: #CDD3E8; text-decoration: none; } #password a:hover { text-decoration: underline; } </style>
			<div id="password"><a href="http://americaspool.com/pgm-secure_remember.php" title="Click here to retrieve your password">Forgot your password?</a></div>
		</div>
		<style>
			#currentSports { color: #fff; font-weight: bold; font-size: 140%; }
		</style>
		
		<!--<div id="signup"><img src="images/button-signup.png" width="172" height="30" /></div>-->
  </div>
	<div class="clear"></div>
	<div id="currentSports"></div>
<div id="navBar">
		<div id="nav" class="rounded">
			<ul>
				<li><a href="index.php?pr=Learn_More" title="Learn More" class="style1">Learn More</a></li>
			  <li><a href="index.php?pr=About_Americas_Pool" title="About Us">About Us</a></li>
				<li><a href="index.php?pr=Contact_Us" title="Contact Us">Contact Us</a></li>
			</ul>
	</div>
		<div id="signup"><a href="index.php?pr=Join_Americas_Pool" title="Join America's Pool"></a></div>
  </div>
	
	<div id="contentLeft">#CONTENT#
	</div>
	
	<div id="contentRight">#CUSTOMINC#</div>
    	
    <div class="clear"></div>
	
    <div id="footer">#CUSTOMINC2#</div>
        
	<div id="credits">
	  <p><a href="index.php?pr=Terms_of_Service" title="Terms of Service">Terms of Service</a> | <a href="index.php?pr=Contact_Us" title="Contact Us">Contact Us</a> | <a href="http://americaspool.com/index.php?pr=Privacy" title="Privacy Policy">Privacy Policy</a></p>
		<p>© 2008 America's Pool.  All rights reserved.</p>
	</div>
	<br/>
  </div>

	<!-- Don't alter anything below here -->
	<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
	</script>
	<script type="text/javascript">
	var pageTracker = _gat._getTracker("UA-4535218-2");
	pageTracker._initData();
	pageTracker._trackPageview();
	</script>
	<!-- Start Quantcast tag -->
<script type="text/javascript">
_qoptions={
qacct:"p-e6EjMXY-y7-B6"
};
</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
<noscript>
<a href="http://www.quantcast.com/p-e6EjMXY-y7-B6" target="_blank"><img src="http://pixel.quantserve.com/pixel/p-e6EjMXY-y7-B6.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/></a>
</noscript>
<!-- End Quantcast tag -->
</body>
</html>


#4 Greg Dillman

Greg Dillman

    Soho Novice

  • Members
  • PipPip
  • 23 posts

Posted 02 April 2009 - 02:43 AM

CUSTOM.CSS

	* { margin: 0; padding: 0; }
	body {
		background: #3950A2 url(images/bg.png) top center repeat-y;
		font-family:Arial, Helvetica, sans-serif;
		font-size: 12px;
		color: #666;
		}
	a img { border: none; }
		
	/* TOOLBOX */
	.clear { clear: both; }
	.floatLeft { float: left; }
	.floatRight { float: right; }
	.rounded { -moz-border-radius: 5px; -webkit-border-radius: 5px;}
	
		
	
	#wrap {
		margin: 0 auto;
		width: 900px; 
		}
	#top {}
	#logo {
		margin-left: 1px;
		float: left;
		width: 661px;
		}
		#logo a img { border: none; }
	#login {
		background: #251cba;
		width: 165px;
		float: left; 
		margin: -20px 0px 10px 10px;
		padding: 28px 5px 5px 5px;
		color: #cdd3e8;
		font-size: 11px; 
		}
	#signup {
		margin: 20px 0 0 0;
		float: right;
		}
		#signup a img { border: none; }
	#navBar { width: 630px; }
	#nav {
		width: 900px;
		height: 20px;
		background-image: url(images/bg-nav8.png);
		background-repeat: no-repeat;
		vertical-align: middle;
		margin: 5px 20px 5px 0;
		float: left;
		}
		#nav ul {
			font-size: 15px; 
			font-weight: bold;
			color: #ffff00;
			list-style: none; 
			padding: 1px;
			margin: 0px 0 0 40px; 
			}
			#nav ul li { float: left; padding-right: 80px; }
			#nav ul li a { color: #fff; text-decoration: none; }
			#nav ul li a:hover { color: #f9d2d3; }
	#contentLeft {
		margin: 10px 0px 5px 1px;
		padding: 10px 0px 1px 3px;
		width: 658px;
		height: 372px;
		float: left;
		background:url(images/bg-maincontent.png);
		background-repeat:no-repeat;
		overflow: auto;
		}
		#contentLeft img { margin: 0px; }
		#contentLeft h1 {
			color: #E02224;
			font-size: 1.8em;
			letter-spacing: 1px;
			margin: 2px 0 0 10px;
			font-weight: bold;
			}
		#contentLeft h2 {
			font-size: 1.4em;
			margin: 3px 0 2px 20px;
			} 
		#contentLeft p {
			font-size: 12px; 
			line-height: .95em;
			margin: 0 0px 5px 20px;
		 	}
			
	#contentRight {
	margin: 10px 10px 5px 1px;
	padding: 3px 1px 10px 3px;
		width: 183px;
		height: 372px;
		float: left;
		background:url(images/bg-rightcontent.png);
		background-repeat:no-repeat;
		overflow: auto;
		}
		#contentRight img { margin: 5px;
		}
		#contentRight h1 {
			color: #E02224;
			font-size: 1.8em;
			letter-spacing: 1px;
			margin: 2px 0 0 0px;
			font-weight: bold;
			}
		#contentRight h2 {
			font-size: 1.4em;
			margin: 0px 0 2px 0px;
			} 
		#contentRight p {
			font-size: 12px; 
			line-height: .95em;
			margin: 0 7px 5px 0px;
		}
			
	#footer {
		margin: 20px 0 15px 0;
		width=900px
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		color: #cdd3e8;
		text-align: center;
		}
		#footer p { margin-bottom: .75em; }
		#footer a {
			color: #cdd3e8; 
			text-decoration: none;
			}
			#footer a:hover { text-decoration: underline; }
		
	#credits { 
		font-family: Arial, Helvetica, sans-serif;
		color: #cdd3e8;
		font-size: 11px;
		text-align: center;
		width=900px
		}
		#credits img { margin: 0 2px; }
		#credits a {
			color: #cdd3e8; 
			text-decoration: none;
			}
			#credits a img { border: none; }
	
	.blue { color: #3950A2; }
	.red { color: #E02224; }
	
	.imageArea { height: 180px; width: 182px; margin-bottom: 12px;} 
	
	/* INDEX.HTML */
	
	#contentMain {
		width: 630px;
		background: #fff;
		margin: 66px 0px 0 0;
		padding: 15px 25px 15px 25px;
		min-height: 200px;
		 -moz-border-radius: 5px; -webkit-border-radius: 5px;
		}
		#contentMain p {
			font-family: Arial, Helvetica, sans-serif !important;
			font-size: 12px !important;
			color:#333;
			margin-left: 10px;
			}


/* EXTRAS FROM OLD TEMPLATE */

/*** Colors ***/

.blue { color: #3950A2; }
.blue-light { color: #C8C9E5; }
.red {	color: #e02224; }
.apBlue { color: #5c68b0; }
.apBlue-light { color: #C3D9FF; }
.apBlue-lighter { color: #E9EFF9; }
.apRed { color: #e85a42; }
.apGold { color: #f5d47e; }
.apGoldLight { color: #FEFBF2; }
.largeRed {
	font-size: 18px;
	color: #e02224;
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	}
.imageText {
	color: #666;
	font-size: 15px;
	font-weight: bold;
	}
	
/*** Soho Fixes ***/
.hmains  {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0 10px 0 0;
	}
	
/*** NEW ***/

#left {
	display:inline;
	width: 480px;
	background-color: #fff;
	}
#right {}

.login {
	padding: 10px;
	}

.tableFix {
	float: left;
	display: inline;
	margin-right: 45px;
	}
	
.box1Text {
	font-size: 18px;
	line-height: 33px;
	}
.fix {
	margin-right: 50px !important;
	display: inline;
	}
#bug {
	width: 106px; height: 27px;
	position: absolute;
	top: 114px;
	left:67px;
	}
input.btn {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	cursor:pointer;
	border:outset 1px #ccc;
	background:#999;
	color:#666;
	font-weight:bold;
	padding: 1px 2px;
	background:url(images/button-bg.gif) repeat-x left top;	
	margin: 3px 0 0 0;
}
input.btn:hover {
	color: #333;
	}
a.btn {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	cursor:pointer;
	border:outset 1px #ccc;
	background:#999;
	color:#e02224 !important;
	font-weight:bold;
	padding: 1px 4px;
	background:url(images/button-bg.gif) repeat-x left top;	
	margin: 3px 0 0 0;
}
a.btn:hover {
	color: #333 !important;
	text-decoration: none !important;
	}
#userform-submit_btn-container input {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	cursor:pointer;
	border:outset 1px #ccc;
	background:#999;
	color:#666;
	font-weight:bold!important;
	padding: 1px 2px;
	background:url(images/button-bg.gif) repeat-x left top;	
	margin: 3px 0 0 0;
}
#userform-submit_btn-container input:hover {
	color: #333;
	}
td.boxContent1 p { margin-bottom: .5em; }


a.boxContent1 { border: none !important; }

.imageFix { margin-right: 10px; }

.reportBug {
	display: block;
	float: left;
	height: 20px;
	}
	a.reportBug img { border: none; }
	.reportBug img { border: none; } 
#quickLinks{ font-family: verdana, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-align: right;
	margin-top: -10px;
	margin-right: 5px;
	margin-bottom: 0px;
	color: #999;
	}
#quickLinks a { text-decoration: none;
	font-weight: bold;
	color: #999;
	}	
	#quickLinks a:hover { text-decoration: underline; }

		.loginBox { width: 375px; margin: 15px 0; padding: 10px; background-color: #FEFBF2; border: 1px solid #f5d47e; }
		.disclaimerText { font-size: 11px; font-style: italic; margin: 2px; width: 250px; margin: 0 auto;}
		.center { width: 750px; margin: 0 auto; }

#content-parent { margin-left: 10px; }
		.steps { color: #5c68b0; font-size: 24px; font-weight: bold; letter-spacing: -1px; font-family: Arial, sans-serif; line-height: 24px; margin: 10px 0 5px 0px; }

.sohotext { font-family: Arial, Helvetica, sans-serif; color: #999; font-size: 12px !important; }


#5 lwyau

lwyau

    a soho enthusiast

  • Moderators
  • 5,605 posts

Posted 02 April 2009 - 11:22 AM

Here are a couple of things:

1. The total width of a <div> is the sum of width + margin-left + margin-right + padding-left + padding-right. The numbers you have with #ContentLeft is therefore wider than the background image allotted.

2. The style for #ContentLeft has fixed width and height, plus "overflow:auto". You are therefore boxed in a rectangle. Anything that extends beyond either the width or the height results in scrollbars.

#6 Greg Dillman

Greg Dillman

    Soho Novice

  • Members
  • PipPip
  • 23 posts

Posted 02 April 2009 - 02:26 PM

Thanks again and understood on the math. Forgive me for not seeing what I guess is easy. I believe the background image and the "box" for the content are the same width. The "box" (as represented by the light blue rectangle in pic 2) has its left edge shifted right of the background image's left edge. My question is: What drives the placement of the content per the soho page editor?

#7 lwyau

lwyau

    a soho enthusiast

  • Moderators
  • 5,605 posts

Posted 02 April 2009 - 03:25 PM

Soho page editor does not do "shift" placement. It simply replace the #CONTENT# tag in the template. Go to yourdomain.com/sohoadmin/program/modules/site_templates/pages/templatename/index.html to see how #CONTENT# tag is displayed, then adjust your template accordingly.

#8 Greg Dillman

Greg Dillman

    Soho Novice

  • Members
  • PipPip
  • 23 posts

Posted 02 April 2009 - 05:35 PM

"Shift" was meant as a description rather than indicating Soho was actively doing something. I'll go through my template & code again and see what I can come up with.

#9 Greg Dillman

Greg Dillman

    Soho Novice

  • Members
  • PipPip
  • 23 posts

Posted 04 April 2009 - 01:41 PM

Found the answer. For anyone interested... There was a "#content-parent" line which was overriding the contentleft figures.

#10 lwyau

lwyau

    a soho enthusiast

  • Moderators
  • 5,605 posts

Posted 04 April 2009 - 02:35 PM

Glad to he you sorted it out!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users