Search code examples
htmlcssbackgroundmargins

setting up css background margins

I'll start by saying that my css skills are very weak.

Here is the site, and I was trying to add some margins to this background so I can see all the content. I now understand that I am not able to use margins on a background, so what are my options here?

Here is my HTML

<body>
    <div id="container">
        <nav id="navigation">
            <ul>
                <li><a href="index.html" id="btn">Homepage</a></li>
            </ul>
        </nav>
    </div>          
</body>

and here is my css

body { 
    background: url('images/prices.jpg'); 
    min-height: 100%;
    height: 100%;
}

#btn {
    color: #FAF3BC;
    background: #4FB69F url('images/texture.png') no-repeat right bottom;
    padding: 15px 30px;
    margin: 150px 0px;
    border-top: 5px;
    border-radius: 25px;
    text-decoration: none;
    text-transform: uppercase;
}

I am also having issues with the homepage button, I would like some room there as well, but I've tried couple of things like padding and margin and was not able to do it...

I would appreciate any help .... here is the page live, if you like to take a peak http://brewstahs.com/menu.html

Solution

  • I know why your css is not working. The most basic use of CSS is to create a layout, but even though your DOM contains div representing container and footer, the height occupied by each is equal to the height of its content(because you have not provided any height to the div containers).In short,

    margin : 150px 0px does not work because the parent container(nav) does not have that height to provide the margin to it. So provide a height to nav and div and it will work.

    Use tools like Firebug to see your layout and see where you're going wrong. All the best!!