0

我首先要说我的css技能很弱。

这是网站，我试图在这个背景上添加一些边距，这样我就可以看到所有的内容。我现在明白我无法在背景上使用边距，那么我在这里有什么选择？

这是我的 HTML

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

这是我的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;
}

我的主页按钮也有问题，我也想要一些空间，但是我尝试了一些东西，比如填充和边距，但无法做到......

我会很感激任何帮助....这是现场页面，如果您想达到高峰http://brewstahs.com/menu.html

4

4 回答 4

0

也许您应该尝试使用 background-position 属性：

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

于 2013-11-13T14:14:44.727 回答
0

你想让我做什么？如果移动按钮，请尝试 margin-top: 50px; 例如在 btn 的 css 中。这样，按钮将移动 50 像素到底部。Margin-left 将按钮向右移动，...

于 2013-11-13T14:18:06.890 回答
0

我知道为什么你的 CSS 不工作。CSS 最基本的用途是创建布局，但是即使你的 DOM 包含代表容器和页脚的 div，每个占据的高度也等于其内容的高度（因为你没有为 div 容器提供任何高度） 。简而言之，

边距：150px 0px 不起作用，因为父容器（导航）没有那个高度来为其提供边距。因此，为 nav 和 div 提供一个高度，它将起作用。

使用 Firebug 之类的工具来查看您的布局并查看哪里出错了。一切顺利！！

于 2013-11-13T14:29:13.317 回答
0

如果您尝试将按钮向下移动，则需要先将其放入包装器中

如果不试试这个。

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

关于你的背景，你可以尝试一件事。有一个类似于你现在使用 background-repeat:repeat 的循环背景纹理；然后用 z-index 将主背景图像放在其上方，并在需要时居中。只是给你一个简单的例子

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

希望这可以帮助 ：）

于 2013-11-13T14:30:41.320 回答