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 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Shadow Question

    first of all, here's the problem page : http://www.freewebs.com/mrdantownsen...ate/index.html

    Hello everyone, I am in the process of re designing my personal web site (again) and ran into a small issue

    When the height of the navigation and the body isn't long enough, I get a residual shadow that doesn't have anything over it

    so I was just wondering if there was a way to combat this other than making my body and navigation div's vertically longer

    I have no problem with making them longer, but I was just wondering if there was a way to do it

    thanks a million,

    mrdantownsend
    Last edited by mrdantownsend; 12-23-2006 at 08:41 PM.

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    How did you get the shadow to go to the bottom?

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,740
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Hello mrdantownsend,
    If you put the shadow on the other body it will be the same size as the menu or the #body, depending on which one is longer. That way you can have a footer finish the shadow...
    Have a look at this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <!-- saved from url=(0065)http://www.freewebs.com/mrdantownsend/example/template/index.html -->
    <html><head><title>mrdantownsend 4.0 -</title>
    <meta http-equiv=content-type content="text/html; charset=windows-1252">
    <meta content="mshtml 6.00.5744.16384" name=generator>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	text-align: center;
    	font-family: arial, sans-serif;
    }
    div#shadowbg {
    	background-image: url(mrdantownsend%204_0%20-_files/shadow.jpg);
    	background-repeat: repeat-y;
    	background-position: center 50%;
    	width: 700px;
    	margin: 0 auto;
    	padding-right: 31px;
    	padding-left: 31px;
    }
    div#head {
    	background-position: center 50%; 
    	background-image: url(mrdantownsend%204_0%20-_files/head.jpg); 
    	background-repeat: no-repeat; 
    	height: 221px; 
    	background-color: #ffffff;
    }
    div#nav {
    	border-right: #000000 0px solid;
    	border-top: #000000 3px solid;
    	float: left;
    	border-left: #000000 3px solid;
    	width: 167px;
    	border-bottom: #000000 3px solid;
    	height: 300px;
    	background-color: #deebff;
    	text-align: left;
    }
    div#body {
    	border-right: #000000 3px solid;
    	border-top: #000000 3px solid;
    	border-left: #000000 0px solid;
    	border-bottom: #000000 3px solid;
    	height: 300px;
    	background-color: #deebff;
    	margin-left: 167px;
    }
    h1 {
    	padding: 15px;
    }
    h2 {
    	padding: 15px;
    }
    h3 {
    	padding: 15px;
    }
    p {
    	padding: 15px;
    }
    ul {
    	padding: 15px;
    }
    blockquote {
    	padding: 15px;
    }
    h1 {
    	font-size: 20px;
    }
    p {
    	font-size: 17px;
    	text-indent: 20px;
    	line-height: 1.5;
    	text-align: justify;
    }
    </style>
    </head>
    <body>
    <div id=head></div>
    <div id=shadowbg>
    				<div id=nav>
    				<ul>
    				<h4>menu</h4>
    				<li>one</li>
    				<li>two</li>
    				<li>three</li>
    				</ul>
    				</div>
    		<div id=body>
    		<h1>lorem ipsum</h1>
    		<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean pretium. 
    		praesent ante. quisque eu diam id dolor luctus mollis. ut eu justo. nullam 
    		condimentum interdum dui. duis ut lorem quis orci facilisis facilisis. ut vitae 
    		nulla. nam purus neque, facilisis dictum, adipiscing vitae, facilisis non, 
    		tellus. nam laoreet nulla vitae odio. curabitur vel nibh sed est condimentum 
    		sodales.</p>
    		<!--closes body --></div>
    <!--closes shadowbg --></div>
    </body>
    </html>
    You'll have to edit the img paths.
    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
    Nov 2006
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I used a 2 px jpg image and tiled it vertically in the center and then that's it

    here's the CSS :

    Code:
    *                                  {margin:0px;
                                        padding:0px;
                                       }
    
    body                               {/* background */
                                        background-color:#ffffff;
                                        text-align:center;
                                        margin-left:auto;
                                        margin-right:auto;
                                        background-image:url('images/shadow.jpg');
                                        background-position:center;
                                        background-repeat:repeat-y;
                                       }
    div#shadowbg                       {
    
                                       }
    
    div#wrapper                        {text-align:center;
                                        margin-left:auto;
                                        margin-right:auto;
                                        width:700px;
                                        /* background */
                                       }
    
    div#head                           {height:221px;
                                        /* background */
                                        background-color:#ffffff;
                                        background-image:url('images/head.jpg');
                                        background-repeat:no-repeat;
                                        background-position:center;
                                        /* margins */
                                        /* borders */
                                       }
    
    div#nav                            {
    
                                        width:167px;
                                        height:400px;
                                        /* background */
                                        background-color:#deebff;
                                        /* margins */
                                        float:left;
                                        /* borders */
                                        border-style:solid;
                                        border-width:3px;
                                        border-color:#000000;
                                        border-right-width:0px;
                                       }
                                       
    
    div#body                           {
    <!--[if IE 6]>
    border-left-width:3px;
    <![endif]-->
                                        width:527px;
                                        height:400px;
                                        /* background */
                                        background-color:#deebff;
                                        /* margins */
                                        float:right;
                                        /* borders */
                                        border-style:solid;
                                        border-width:3px;
                                        border-color:#000000;
                                        border-left-width:0px;
                                       }
    
    /* Text and Link Formatting */
    
    h1, h2, h3, p, ul, blockquote      {font-family:arial, sans-serif;
                                        padding:15px;
                                       }
    
    h1                                 {padding-bottom:0px;
                                        font-size:20px;
                                       }
    
    p                                  {text-align:justify;
                                        font-size:17px;
                                        line-height:1.5;
                                        padding-top:0px;
                                        text-indent:20px;
                                       }


  •  

    Posting Permissions

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