setting up css background margins

StackOverflow https://stackoverflow.com/questions/19955956

  •  30-07-2022
  •  | 
  •  

Question

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

Was it helpful?

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!!

OTHER TIPS

Maybe you should try with background-position attribute:

http://www.w3.org/wiki/CSS/Properties/background-position

What do you want to do? In case of moving the button, try margin-top: 50px; for example in the css of btn. This way, the button is moved 50pixels to the bottom. Margin-left moves the button to right, ...

if you are trying to move the button down then you need to first put it in a wrapper

if not try this .

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

#navigation {
   position:relative;
   display:block;
   margin:40px 0px 0px 0px;
   padding:0px;
   width:auto;
   height:auto;   
}

#navigation ul {
   display:block;
   position:relative;
   margin:auto;
   padding:0px;
}

#navigation ul li {
  list-style:none;
}

#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;
}

and about your background you can try one thing. Have a looping background texture similar to the one you have right now with background-repeat:repeat; and then put the main background image above it with z-index and centered if required. Just to give you a simple example 

body {
  background-image:url('images/loop.jpg);
  background-repeat:repeat;
  }

#backgroundimg {
   background-image:url('images/prices.jpg);
   background-repeat:no-repeat;
   display:block;
   position:relative;
   width:980px;
   height:700px;
   margin:auto;
   padding:0px;
}

hope this helps :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top