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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Shadow border

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Shadow border

    I want to make a shadow border on my container so that the page stands out, a border like this http://www.pet-supermarket.co.uk/pro...&a=resetsearch, the site takes some time to load but there are a lot of images on the site so I hope it is not the shadow. My site has a dark gold background, so would the shadow still work well? Is there a way to do this in CSS? My container is 800px or 57.143em
    Last edited by quartzy; 02-14-2011 at 05:21 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Good morning quartzy,
    The shadow on that page is done with this image - http://www.pet-supermarket.co.uk/images/wrapper_bg.jpg

    Here is a CSS drop shadow example.

    And, of course, CSS3's shadow.
    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:

    quartzy (02-13-2011)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    HI to you too excav

    Thanks so much it is a very clever image, just making the ends shaded. But I would have to see if I could do that too in inkscape.

    The code for the css shadow just seems to be too complicated adding other code to what I have so I will try the image first and may have to use the code.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by quartzy View Post
    HI to you too excav

    Thanks so much it is a very clever image, just making the ends shaded. But I would have to see if I could do that too in inkscape.

    The code for the css shadow just seems to be too complicated adding other code to what I have so I will try the image first and may have to use the code.
    The image method is pretty bulletproof since all browsers can display an image. A small one like that repeated y doesn't cost much bandwidth at all, it would have little or no bearing on the slow load speed you mentioned that page had.
    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

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I have made the image, but there is a 1px border of white showing on each end of my navigation. Can you help?

    Code:
    .indentmenu {
    width: 100%; 
    }
    
    .indentmenu ul {
    float: left;
    display: inline;
    width: 100%;
    background: black url(../images/box3.jpg) center center repeat-x;
    }
    
    #bodyblock {
    width: 1002px;
    margin: 0 auto;
    background-image: url('../images/container.jpg'); background-repeat: repeat-y;}
     
    #container {
    width: 57em; 
    background: #fff; 
    position: relative; 
    height: auto; /* For IE */; 
    margin: 0 auto; 
    text-align: left;/*Hack to fix IE6 to center*/; 
    margin-top: 1em;}

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    In the CSS for your ul, I'm not sure why you float a full width element or why you center a repeat-x image. I don't think either of those would cause a 1px border though, can you post the entire code?
    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

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Yes, my mistake it is not a whole border just the outer ends.

    I will post the code for the navgiation, it is from a script so that explains why the code may be not right, I have not touched it, just added another navigation.

    Code:
    .indentmenu {
    width: 100%; 
    }
    
    .indentmenu ul, .indentmenu2 ul {
    float: left;
    display: inline;
    width: 100%;
    background: black url(../images/box3.jpg) center center repeat-x;
    }
    .indentmenu2 ul {background: gray url(../images/box2.jpg) center center repeat-x;}
    
    .indentmenu ul li, .indentmenu2 ul li{display: inline;}
    
    .indentmenu ul li a, .indentmenu2 ul li a{
    float: right;
    color: white; 
    font-weight: bold;
    padding: 5px 11px;
    text-decoration: none;
    border-right: 1px solid #fff;
    display: block; 
    }
    .indentmenu2 ul li a {float:left; display: inline; padding: 2px 9px; text-transform: uppercase;}
    
    .indentmenu ul li a:visited{color: white;}
    
    .indentmenu ul li a:hover, .indentmenu2 ul li a:hover, {
    color: white !important;
    color: white; /*for IE*/ 
    padding-top: 6px;
    padding-bottom: 4px; 
    background: black url(../images/box4.jpg) center center repeat-x;}
    
    .indentmenu2 ul li a:hover{
    padding-top: 2px;
    padding: bottom: 2px;}

  • #8
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    When I removed the float: left; the whole of the navigation disappeared. Very strange. Removed the center center ok though

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    This may be one
    Code:
    .indentmenu ul li a, .indentmenu2 ul li a{
    float: right;
    color: white; 
    font-weight: bold;
    padding: 5px 11px;
    text-decoration: none;
    border-right: 1px solid #fff;
    display: block; 
    }
    Really need your markup along with that CSS before we can reproduce your problem locally.
    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

  • #10
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Here is my layout code:

    Code:
    html, body {
    height: 100%; 
    width: 100%;  
    font-family: Trebuchet, Helvicta, Arial, Sans-serif; background: #FFCC00;
    font-size: 100%; 
    line-height: 1.6;}
    
    #bodyblock {
    text-align: left;/*for IE6*/; 
    width: 1002px; 
    margin: 0 auto; 
    background-image: url('../images/container.jpg'); background-repeat: repeat-y;} 
    
    #container {
    width: 57em; 
    background: #fff; 
    position: relative; 
    height: auto; /* For IE */; 
    margin: 0 auto; 
    text-align: left;/*Hack to fix IE6 to center*/;}
    
    .logo_seniors {
    width: 25em; 
    padding-top: 3em; 
    padding-left: 1em; }
    
    #header {
    height: 10em; 
    width: 57em; 
    margin: 0; padding: 0;}
    and the mark up
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="en" name="language" />
    <meta name="description" content="What's On at Seniors, our timetable and things you can do, plus notice board for special events"/><meta name="keywords" content="What's on timetable, noticeboard, seniors"/>
    <title>Seniors - What's On</title>
    <link href="../styles/mainstyle.css" rel="stylesheet" type="text/css" />
    <link href="../styles/navigation.css" rel="stylesheet" type="text/css" />
    <link href="../styles/layout.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="bodyblock">
    <div id="container">
    <div id="header" class="seniors"><div class="indentmenu"><ul>
    <li><a href="location.html">Location</a></li>
    <li><a href="contact_us.html">Contact Us</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="homepage.html">Home</a></li></ul>
    <!--end .indentmenu--></div><div class="logo_seniors"><img alt="Seniors logo" height="101" src="../images/seniors_logo.gif" width="343" title="Return to hompage" /></div>
    <address class="top">260 Stanstead Road<br/>London SE23 1DD<br/></address>	</div>
    <!--header--><div class="indentmenu2"><ul>
    <li><a href="cafe.html">Cafe</a></li>
    <li><a href="newsletter.html">Newsletter</a></li>
    <li><a href="volunteering.html">Volunteering</a></li>
    <li><a href="donations.html">Donations</a></li>
    <li><a href="album.html">Photo Album</a></li></ul><!--end .indentmenu--></div>
    <div id="content"><h1>What's On</h1>
    <p>We offer various classes in the week, as outlined in the Timetable below. </p>
    <p>We occasionally open for Special Events on Fridays, Saturdays and Sundays 
    - please check here for extra upcoming events.</p>
    <div class="notice">
    <h4 class="booking_box">Special Events Notice Board</h4><div class="inner"><p class="inner2">No 
    special events at present</p></div></div><div class="clear"></div>
    
    <h2 class="center">Time Table</h2>
    <table class="timetable">
    <tr class="table_header">
    <th>Times</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th></tr>
    <tr><td>10.30 am</td><td></td><td>Choir ends 12.00pm</td><td>
    <ul class="list">
    <li>Art Group ends 12.15pm</li>
    <li>Creative Writing ends 12.00pm</li>
    <li>Knit 'n'&nbsp; Natter ends 12.00pm</li>
    </ul></td><td></td></tr>
    <tr><td>11.00 am</td><td>Line Dancing ends 1.00pm</td><td></td><td></td><td>
    <ul class="list">
    <li>Thai Chi ends 12.00 pm</li>
    <li>Computer Class (not active presently)</li>
    </ul></td></tr><tr><td>1.00 pm</td><td>French<br />Class ** </td>
    <td>Film Club ends 4.30pm</td><td></td><td>Vista Reminiscence Group ** ends 4.30pm</td></tr>
    <tr><td>2.00 pm</td><td></td><td></td><td>
    <ul class="list">
    <li>Keep Fit ends 3.00pm</li>
    <li>Armchair Bingo ends 4.00pm</li></ul></td><td></td></tr></table>
    <p>** Externally organised groups</p>  
    </div><!--content--><div id="footer">
    <ul class="foot_list">
    <li><a href="sitemap.html">Site Map</a></li></ul>
    <p class="right">&copy; Seniors 2011</p>
    </div><!--footer--></div><!--container--></div><!--bodyblock--></body></html
    I have been looking at it, but I cant work it out.
    Last edited by quartzy; 02-13-2011 at 07:48 PM.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    but there is a 1px border of white showing on each end of my navigation. Can you help?
    Code:
    .indentmenu ul li a, .indentmenu2 ul li a{
    float: right;
    color: white; 
    font-weight: bold;
    padding: 5px 11px;
    text-decoration: none;
    border-right: 1px solid #fff;
    display: block; 
    }
    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:

    quartzy (02-14-2011)

  • #12
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I moved the border to the left and the border on the right has gone. But now I still have a 1px border on the left and the border is also on my footer, so its not the navigation.

    For the navigation I have been trying to remove the border on the left of the first item, but it refuses to go. Can you see what I am doing wrong?

    Code:
    indentmenu ul li.first a, indentmenu2 ul li.first a {border-left:0;}
    
    .indentmenu ul li a, .indentmenu2 ul li a{
    float: right;
    color: white; 
    font-weight: bold;
    padding: 5px 11px;
    text-decoration: none;
    border-left: 1px solid #fff;
    margin-right: 1px;
    display: block; 
    }
    
    HTML
    
    <div class="indentmenu"><ul>
    <li><a href="location.html">Location</a></li>
    <li><a href="contact_us.html">Contact Us</a></li>
    <li><a href="about.html">About Us</a></li>
    <li class="first"><a href="homepage.html">Home</a></li></ul>
    <!--end .indentmenu--></div>

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    indentmenu ul li.first a, indentmenu2 ul li.first a {border-left:0;}
    is invalid.

    I think you probably mean .indentmenu ul li.first a, .indentmenu2 ul li.first a {border-left:0;}


    See the difference?
    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

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I just saw what you are trying to do. When targeting the first-child I think the syntax would be .indentmenu ul li:first-child a, .indentmenu2 ul li:first-child a {border-left:0;}


    first-child is not supported in some browsers though. Sometimes it can be easier just to use inline styles to override the linked CSS.
    Try some variation of this on your menu -
    Code:
    <ul>
        <li style="border-left: none;">linky</li>
        <li>linky</li>
        <li>linky</li>
        <li>linky</li>
    </ul>
    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

  • #15
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    thanks ecav
    I am not that clever to use first-child. Good idea to style the li tag itself, could have saved a lot of problems and frustration.

    How silly of me to miss out the full stop. That's one problem out of the way, still hunting for the mystery 1px gap on the left. Need to get to bed though so will have to wait until tomorrow


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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