SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 col centered layout problem

    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>

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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 }

  3. #3
    SitePoint Member
    Join Date
    May 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's exactly what I thought at first, but there must be something special with this layout because it's not working.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Does your background image have a space in the filename? the url has to be encoded - so spaces become '&#37;20' .. That's the only thing I can think of.

  5. #5
    SitePoint Member
    Join Date
    May 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  7. #7
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •