We're aware that some users are experiencing technical issues which the team are working to resolve. See the Community Noticeboard for more info. Thank you for your patience.
📨 Have you signed up to the Forum's new Email Digest yet? Get a selection of trending threads sent straight to your inbox daily, weekly or monthly!

Any website coding experts?

Options
Drea
Drea Posts: 9,892 Forumite
Hiya,

This might be a longshot but I was hoping that someone could help me with a problem I'm having with my website.

www.animalstation.co.uk - I've been trying to code it myself (and mainly failing :rotfl:) but one thing that is really bugging me is that I can't seem to keep my drop shadow at the sides of the layout when I add the main content div. I tried creating two sidebar divs to put the drop shadow picture in but that didn't seem to work.

I'd really appreciate it if anyone had any ideas :D

Thanks!
Just because you made a mistake doesn't mean you are a mistake.
«1

Comments

  • Figment
    Figment Posts: 2,643 Forumite
    Part of the Furniture Combo Breaker
    Try wrapping a new div around the content div, with a background image of a 5px tall white bar with drop shadow to left and right edges. (see example in quote box below - if you save this image it is the correct size - but has been scaled down by the forum)

    #content-bg {
    width: 850px;
    background: url(../images/content-bg.png) scroll top repeat-y;
    }

    content-bg.png
    How do I add a signature?
  • Figment
    Figment Posts: 2,643 Forumite
    Part of the Furniture Combo Breaker
    Also in the <head> section, remove:

    <style type="text/css" media="all">@import "css/master.css";</style> <style type="text/css" media="all">@import "css/master.css";</style>

    and replace with:

    <link href="css/master.css" rel="stylesheet" type="text/css" media="all />

    which is a better way of linking to an external style sheet
    How do I add a signature?
  • Drea
    Drea Posts: 9,892 Forumite
    Figment wrote: »
    Try wrapping a new div around the content div, with a background image of a 5px tall white bar with drop shadow to left and right edges. (see example in quote box below - if you save this image it is the correct size - but has been scaled down by the forum)

    #content-bg {
    width: 850px;
    background: url(../images/content-bg.png) scroll top repeat-y;
    }
    Figment wrote: »
    Also in the <head> section, remove:

    <style type="text/css" media="all">@import "css/master.css";</style> <style type="text/css" media="all">@import "css/master.css";</style>

    and replace with:

    <link href="css/master.css" rel="stylesheet" type="text/css" media="all />

    which is a better way of linking to an external style sheet

    Doesn't seem to work :( although I'm not sure what you mean by wrapping a new div around it?

    Will change the second part now, thanks :)
    Just because you made a mistake doesn't mean you are a mistake.
  • Drea
    Drea Posts: 9,892 Forumite
    Oh noo changing the second part has messed it all up :rotfl: I'm out of my depth...
    Just because you made a mistake doesn't mean you are a mistake.
  • Figment
    Figment Posts: 2,643 Forumite
    Part of the Furniture Combo Breaker
    Add the css I included above in your style sheet. Save the image to your images folder. Then edit the page to add the bits in blue above and below the content div


    <div id="content-bg">

    <div id="content">Testing.........
    </div>
    </div>
    How do I add a signature?
  • Figment
    Figment Posts: 2,643 Forumite
    Part of the Furniture Combo Breaker
    Drea wrote: »
    Oh noo changing the second part has messed it all up :rotfl: I'm out of my depth...

    Whoops, my bad. There's a closing " missing at the end :o

    <link href="css/master.css" rel="stylesheet" type="text/css" media="all" />
    How do I add a signature?
  • Drea
    Drea Posts: 9,892 Forumite
    Figment wrote: »
    Add the css I included above in your style sheet. Save the image to your images folder. Then edit the page to add the bits in blue above and below the content div


    <div id="content-bg">

    <div id="content">Testing.........
    </div>
    </div>

    Thank you so much! That has been driving me bananas! You're a star :D
    Just because you made a mistake doesn't mean you are a mistake.
  • Figment
    Figment Posts: 2,643 Forumite
    Part of the Furniture Combo Breaker
    That looks better. Now edit your footer.png to add a 5 px white bar at the top with drop shadow to left, right and below. This will create a gap below your content.

    Adjust the margins of your content div to put some white space down the left margin.
    How do I add a signature?
  • Drea
    Drea Posts: 9,892 Forumite
    Figment wrote: »
    That looks better. Now edit your footer.png to add a 5 px white bar at the top with drop shadow to left, right and below. This will create a gap below your content.

    Adjust the margins of your content div to put some white space down the left margin.

    Did the margins but will have to wait until I get home from work before I can change the picture :)

    Thanks!
    Just because you made a mistake doesn't mean you are a mistake.
  • Figment
    Figment Posts: 2,643 Forumite
    Part of the Furniture Combo Breaker
    edited 18 July 2012 at 3:18PM
    Try this for size:

    footer.png



    ETA: don't forget to get rid of the superfluous sidebar divs :)
    How do I add a signature?
This discussion has been closed.
Meet your Ambassadors

🚀 Getting Started

Hi new member!

Our Getting Started Guide will help you get the most out of the Forum

Categories

  • All Categories
  • 351K Banking & Borrowing
  • 253.1K Reduce Debt & Boost Income
  • 453.6K Spending & Discounts
  • 244K Work, Benefits & Business
  • 598.8K Mortgages, Homes & Bills
  • 176.9K Life & Family
  • 257.3K Travel & Transport
  • 1.5M Hobbies & Leisure
  • 16.1K Discuss & Feedback
  • 37.6K Read-Only Boards

Is this how you want to be seen?

We see you are using a default avatar. It takes only a few seconds to pick a picture.