Question

我已经能够改变整个页面的背景颜色，但我正在努力改变标题的单独背景颜色。任何帮助都是史诗般的：Fiddle

HTML：

<body>
<div id="header" border="0">
    <div id="header_button" alt="Ashley Lincoln Designs">
    enter code here`<img src="images/logo.png" height="100px"><div>
    <div id="header_button">About</div>
    <div id="header_button">Newest<br>Project</div>
    <div id="header_button">Archive</div>
    <div id="header_button">Contact</div>
</div>

<p>Test</p>

</body>

CSS：

* {
    margin: 0;
    padding: 0;
    background-color: #174C4F;
}

#header {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    background-color: #FSE9BE;
}

#header_button {
    height: 100px;
    margin: 0 auto;
    padding: 0;
    color: #207178;
    font-family: "Verdana", Verdana, sans-serif;
    font-size: 20px;
    text-align: center;
    text-transform:uppercase;
    text-indent: 0px;
    display:inline-block;
    background-color: #FSE9BE;
}

Answer 1

您的问题是您的ID不是唯一的（它们应该是HTML标准）。使用课程 - 请参阅此处http://jsfiddle.net/T4jdq/1/

<div class="header_button">About</div>
<div class="header_button">Newest<br>Project</div>
<div class="header_button">Archive</div>
<div class="header_button">Contact</div>

.header_button {
    height: 100px;
    ...
    background-color: red;
}

至于排列按钮 - 你可以用导航条做很多事情。我不太确定你想要什么;示例导航栏的图像高于其他所有内容。如果您将float: left;添加到他们排队的其他元素中。除此之外，这是一个很多调整的问题：P。我建议使用Chrome和开发控制台（右键单击，检查元素），这样可以直接修改CSS。

Answer 2

您的CSS大部分都是正确的，但您的#header背景颜色不是有效的HEX颜色。现在它将设置为：

background-color: #FSE9BE;

应该是

background-color: #F5E9BE;

注意qr S tu与34 5 67

不同

正如其他人所提到的，每页只能使用id一次。您的header_button更适合class。

至于使菜单项更好地对齐;

只需添加：

vertical-align:top;

http://jsfiddle.net/daCrosby/T4jdq/2/

Answer 3

更新了小提琴：

Demo

<body>
<div id="header" border="10">
    <img src="Images/logo.png" id="header_button" alt="Some Text"/>
    <div id="header_button" alt="Ashley Lincoln Designs"/>
    <div id="header_button">About</div>
    <div id="header_button">Newest<br>Project</div>
    <div id="header_button">Archive</div>
    <div id="header_button">Contact</div>
</div>

<p style="position:relative">Test</p>

</body>

的CSS：

body{
    margin: 0;
    padding: 0;
    background-color: #174C4F;
}

#header {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    position:absolute;
    background-color:Black;
}

#header_button {
    height: 100px;
    margin: 0 auto;
    padding: 0;
    color: #207178;
    font-family: "Verdana", Verdana, sans-serif;
    font-size: 20px;
    text-align: center;
    text-transform:uppercase;
    text-indent: 0px;
    display:inline-block;
    background-color: #FSE9BE;
}

我同意@DaCrosby ..颜色的十六进制小数无效。一切都很好。

Answer 4

Demo

的CSS

* {
    margin: 0;
    padding: 0;

}
body{
    background-color: #174C4F;
}

#header {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    background: red;
}

.header_button {
    height: 100px;
    margin: 0 auto;
    padding: 0;
    color: #207178;
    font-family: "Verdana", Verdana, sans-serif;
    font-size: 20px;
    text-align: center;
    text-transform:uppercase;
    text-indent: 0px;}

HTML

<div id="header">
    <div class="header_button"> <img src="images/logo.png"
        height="100px" alt="Ashley Lincoln Design"s /></div>
 <div>
    <div class="header_button">About</div>
 <div class="header_button"> Newest 
     <br/>Project

</div>
    <div class="header_button">Archive</div>
    <div class="header_button">Contact</div>
</div>

<p>Test</p>

CSS标题背景颜色不起作用

4 个答案: