3 col centered layout problem

**Guillaume76** · Aug 21, 2007 16:28

I'm working on a small website, based on the 3 column centered layout by Paul O'B.

I've pretty much got everything understood except for one thing, how can I do a drop-shadow on the layout? I've tried to put it just about everywhere after not being able to find where I should put it and it just doesn't work. Well it does work but not where I want it to be

Here is the example by Paul O'B: http://www.pmob.co.uk/temp/3colcentred_2a.htm

I want the drop shadow right outside the header, footer, left column and the right column as well.

Here is my code, forgive me for the funky colors, used them to make it clearer what went where etc

Code HTML4Strict:

<!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>
 
<title>S</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type="text/css">
* {margin:0;padding:0}
h1,h2,h3,h4,p {margin-bottom:1em}
ul{margin-left:16px}
 
/* mac hide \*/
html,body{height:100%;}
/* end hide*/
 
body { 
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 
	/*main background \*/
	background:#3399CC;
	/*main background*/
 
	color:#000;
	text-align:center;
    font-size:x-small
}
#outer{
	min-height:100%;
	width:694px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	border-left:3px solid #fff;
	border-right:3px solid #fff;
	position:relative;
 
	/*left right content2 background \*/
	background:#FF9933;
	/*left right content2 background*/
}
* html #outer {
	width:700px;
	w\idth:694px;
	height:100%;
 
 
	/*background \*/
	background:#66CC66;
	/*background*/
}
#header, #footer{
 
	/*footer background \*/
	background:#66CC66;
	/*footer background*/
 
	border-top:5px solid #fff;
	border-bottom:5px solid #fff;
	text-align:center;
	}
#footer{
	position:absolute;
	bottom:0;
	left:0;	
	width:694px;
	height:40px;
}
* html #footer {
	height:50px;
	he\ight:40px;
	bottom:-1px;
}
#clearfooter {
	clear:both;
	height:50px;
}
#right, #left, #content {
 
	/*left right content background \*/
	background:#CC3399;
	/*left right content background*/
 
	float:left;
	width:115px;
}
#content{width:464px;}
.content1{
	background:red;
	color:#fff;
	border-bottom:5px solid #fff;
    padding:5px;
}
.content2{
	padding:5px;
	background:blue;
}
.clearer{
	height:1px;
	overflow:hidden;
	clear:both;
	margin-top:-1px;
}
</style>
 
<script src = "../scripts/oSwapImages.js" language="JavaScript"><!--/ Version 9 /--></script>
<script language="JavaScript"><!-- 
//-------------------------------------------------------
 
	// Details
 
	var oSwapImages = new cSwapImages("../images", false, false);
 
	// oSwapImages.mLoadImagesByNum(iLastImageNumber);
	oSwapImages.mLoadImagesByName(["available", "available_over", "available_on", "aboutme", "aboutme_over", "aboutme_on", "collection", "collection_over", "collection_on", "contact", "contact_over", "contact_on", "home", "home_over", "home_on", "conditions", "conditions_over", "conditions_on"]);
 
	// oSwapImages.mSwapByNum(sHtmlImageName, iImageNumber, sLayerName);
	// oSwapImages.mSwapByName(sHtmlImageName, sImageName, sLayerName);
 
	// oSwapImages.mSwapManagerByNum(aiImageOverAndOut, asHtmlImageName, aiImagesClicked, aiImagesRestore, asLayerNames, iTargetInArray);
	// oSwapImages.mSwapManagerByName(asImageOverAndOut, asHtmlImageName, asImagesClicked, asImagesRestore, asLayerNames, iTargetInArray);
 
//-------------------------------------------------------
//--></script>
 
</head>
 
<body>
 
<div id="outer">
	<div id="header">
<table id="Table_01" width="695" height="230" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="15">
			<img src="../images/home_01.gif" width="695" height="5" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="../images/home_02.gif" width="5" height="220" alt=""></td>
		<td colspan="13">
			<img src="../images/main_photo.jpg" width="685" height="180" alt=""></td>
		<td rowspan="4">
			<img src="../images/home_04.gif" width="5" height="225" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="../images/home_05.jpg" width="5" height="35" alt=""></td>
		<td>
			<img src="../images/home_on.jpg" width="80" height="35" alt=""></td>
		<td>
			<img src="../images/home_07.jpg" width="17" height="35" alt=""></td>
		<td>		  
        <a href="available.html" 
            onMouseOver="oSwapImages.mSwapByName('available', 'available_over', '');" 
            onMouseOut="oSwapImages.mSwapByName('available', 'available', '');">
        <img src="../images/available.jpg" width="100" height="35" alt="" border="0" name=			"available"></a></td>
		<td>
			<img src="../images/home_09.jpg" width="19" height="35" alt=""></td>
		<td>
			<a href="collection.html" 
            onMouseOver="oSwapImages.mSwapByName('collection', 'collection_over', '');" 
            onMouseOut="oSwapImages.mSwapByName('collection', 'collection', '');">
            <img src="../images/collection.jpg" name="collection" width="106" height="35" border="0" alt=""></a></td>
		<td>
			<img src="../images/home_11.jpg" width="15" height="35" alt=""></td>
		<td>
        	<a href="aboutme.html" 
            onMouseOver="oSwapImages.mSwapByName('aboutme', 'aboutme_over', '');" 
            onMouseOut="oSwapImages.mSwapByName('aboutme', 'aboutme', '');">
			<img src="../images/aboutme.jpg" name="aboutme" width="105" height="35" alt="" border="0"></a></td>
		<td>
			<img src="../images/home_13.jpg" width="17" height="35" alt=""></td>
		<td>
        <a href="conditions.html" 
            onMouseOver="oSwapImages.mSwapByName('conditions', 'conditions_over', '');" 
            onMouseOut="oSwapImages.mSwapByName('conditions', 'conditions', '');">
			<img src="../images/conditions.jpg" name="conditions" width="104" height="35" alt="" border="0"></a></td>
		<td>
			<img src="../images/home_15.jpg" width="23" height="35" alt=""></td>
		<td>
        <a href="contact.html" 
            onMouseOver="oSwapImages.mSwapByName('contact', 'contact_over', '');" 
            onMouseOut="oSwapImages.mSwapByName('contact', 'contact', '');">
			<img src="../images/contact.jpg" name="contact" width="82" height="35" alt="" border="0"></a></td>
		<td>
			<img src="../images/home_17.jpg" width="12" height="35" alt=""></td>
	</tr>
	<tr>
		<td colspan="13">
			<img src="../images/home_18.jpg" width="685" height="5" alt=""></td>
	</tr>
	<tr>
		<td colspan="14">
			<img src="../images/home_19.gif" width="690" height="5" alt=""></td>
	</tr>
</table>
	</div>
 
	<div id="left">
		<p>Left</p>
		<p>Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : </p>
	</div>
	<div id="content">
		<div class="content1">
			<p>Content</p>
 
			<p>Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here
				: Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : </p>
							<p>Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here
				: Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : 
				External testicles
				</p>
 
		</div>
		<div class="content2">
			<p>Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here
				: Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : </p>
		</div>
	</div>
 
	<div id="right">
		<p>Right</p>
		<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
	</div>
	<div id="clearfooter"></div>
	<div id="footer">
		<p>
		Home
		Available
		Collection About me
		Conditions
		Contact		</p>
	  <p>
		S2007</p>
	</div>
</div>
 
</body>
</html>

**markbrown4** · Aug 21, 2007 17:41

Hi,

Without looking at your code - I think you can just apply a centered background image to the body for shadows.

Code:

body { background: #color url(image) repeat-y 50&#37; 0 }

**Guillaume76** · Aug 22, 2007 01:10

That's exactly what I thought at first, but there must be something special with this layout because it's not working.

**markbrown4** · Aug 22, 2007 01:33

Does your background image have a space in the filename? the url has to be encoded - so spaces become '%20' .. That's the only thing I can think of.

**Guillaume76** · Aug 22, 2007 04:44

Originally Posted by markbrown4

Does your background image have a space in the filename? the url has to be encoded - so spaces become '%20' .. That's the only thing I can think of.

Nah the name of the file shadow.png

**Paul O'B** · Aug 22, 2007 08:09

Hi,

I'm not exactly sure where you want the shadow because as Mark has said above you can apply it to the body.

Here's a shadow applied to the body on one of those demos.

http://www.pmob.co.uk/temp/3col-centred-template10.htm

When applying a shadow to the body you will get a 1px jog to the side at every odd pixel so makes sure that you allow some leeway for overlap (as in my example) so that its doesn't become obvious (see faq on the 1px jog for more info).

You could instead apply the shadow to the outers background image:

http://www.pmob.co.uk/temp/images/3-...-blueshade.gif

Just add a shadow to the side of that image and increase the dimensions of your outer to cater for it. This will not incur the 1px jog as previously mentioned.

I notice that you mentioned shadow.png and if you are using transparent pngs then IE6 and under do not support transparency in pngs. You would need to use the proprietary IE "alpha image loader" filter to address this issue.

Hope that helps

**AdRock952** · Aug 22, 2007 11:41

I have done what i think you are trying to do

In layout.css (or whatever it's called), in the body section put this

Code CSS:

body {
	background-color: #c2c2c2;
	background-image: url(images/bg1.gif);
	background-repeat: repeat-y;
	background-position: center;
	text-align: center;
}

and i have included the image that I use for my site.

You may have to either resize the image slightly to fit you layout or adjuct the properties for the width. Anyway, it works fine for me

User Tag List

Thread: 3 col centered layout problem

Thread Tools

Display

3 col centered layout problem

Bookmarks

Bookmarks

Posting Permissions