Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    46
    Thanks
    2
    Thanked 0 Times in 0 Posts

    css - shadow page outline border

    hello friends, I need want to add a shadow backdrop to my outside border..using <div> or if there is a more efficent way to implement it..

    The effect I want to give off is displayed at the following site:

    http://www.lawoftime.org/home.html

    Thank you in advance for your time. Peace and Prosperity.

    Adolph

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello adolph0034,
    That site you link to does the shadow with left and right border jpegs but it's using tables for layout. See the link in my sig about tables.

    It could very easily be done by nesting divs - one to hold the right shadow, one to hold the left shadow and a third to contain the site.

    It could also be done even easier with a little photoshop work as a single image repeated on the y axis.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Here's an example using the nested divs -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	outline: none;
    	border: none;
    }
    #outer1 {
    	width: 856px;
    	margin: 0 auto;
    	background: url(http://www.lawoftime.org/graphics/left-border.jpg) repeat-y;
    }
    #outer2 {
    	width: 856px;
    	background: url(http://www.lawoftime.org/graphics/right-border.jpg) repeat-y right;
    }
    #container {
    	width: 800px;
    	height: 600px;
    	margin: 0 auto;
    	background: #999;
    }
    </style>
    </head>
    <body>
        <div id="outer1">
            <div id="outer2">
                <div id="container">
                <!--end container--></div>
            <!--end outer2--></div>
        <!--end outer1--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    46
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for your help Excavator. For faster loading time (overall efficiency), which solution would you implement, given your experience.

    Adolph

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Here's a script I found yesterday. The site is down today and I can't find the source, but I made a bunch of changes.

    Code:
    <!doctype html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
    <html>
    <head>
    <meta http-equiv=content-type content="text/html; charset=utf-8">
    <title>Yahoo!</title>
    
    <link rel="stylesheet" type="text/css" href="xxx.css" />
    
    
    <style>
    
    
    
    .mod
    {
    	left:30%;
    	top:10%;
    	position:absolute;
    }
    
    .bd
    {
    	height:100%;
    	width:15em;
    }
    .ft
    {
    	position:absolute;
    	width:100%;
    	left:0px;
    	top:0px;
    	background:#666666;
    	filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=6);
    	height:100%;	
    	height:expression(this.parentNode.offsetHeight  + 'px');
    	z-index:1;
    }
    .ft[class]:not(span)
    {
    	height:101%;
    	width:101%;
    	left:1px;
    	top:1px;
    	opacity:0.5;
    	border-right:solid 2px #999999;
    	border-bottom:solid 2px #999999;
    	-moz-border-radius:6px;
    	border-radius:6px;
    }
    
    
    
    .content
    {
    	position:relative;
    	z-index:2;
    	padding:12px;
    	font-size:72%;
    	font-family:Arial;
    	background:white;
    	-moz-border-radius:6px;
    	border:solid 1px #666666;
    	border-right-color:#222222;
    	border-bottom-color:#222222;
    }
    
    
    </style>
    
    </head>
    <body>
    
    
    <div class="mod">
    
    	<div class="bd">
    
    		
    		<div class="content">
    		ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. 
    		</div>
    		
    	
    	</div>
    	<div class="ft"></div>
    </div>
    
    
    </body>
    </html>
    here the google cache of the script that I saved. You'll have to pick out the google droppings.
    http://h1.ripway.com/stirfry/css/tes...zy-shadow.html

    here's my test
    http://h1.ripway.com/stirfry/css/tests/fuzzyModule.html

  • #6
    New Coder
    Join Date
    Jan 2009
    Posts
    46
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks a bunch, your the man. This is enough for me to put something together. I will keep you posted.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by adolph0034 View Post
    Thanks for your help Excavator. For faster loading time (overall efficiency), which solution would you implement, given your experience.

    Adolph
    Depends on what you want. Hard to say without seeing your images. If you don't want to use images at all, have a look at this - http://nopeople.com/CSS/drop_shadow/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    adolph0034 (04-13-2009)

  • #8
    New Coder
    Join Date
    Jan 2009
    Posts
    46
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Resolved thanks to excavator!


  •  

    Posting Permissions

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