Web Analytics Made Easy -
StatCounter css - shadow page outline border - CodingForum

Announcement

Collapse
No announcement yet.

css - shadow page outline border

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

    Comment


    • #3
      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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

      Comment


      • #4
        Thanks for your help Excavator. For faster loading time (overall efficiency), which solution would you implement, given your experience.

        Adolph

        Comment


        • #5
          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

          Comment


          • #6
            Thanks a bunch, your the man. This is enough for me to put something together. I will keep you posted.

            Comment


            • #7
              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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

              Comment


              • #8
                Resolved thanks to excavator!

                Comment

                Working...
                X