Question

我正在尝试让我的模板工作，我有一个测试页面，所以你可以看到miss-hap。 http://merkd.com/gtamoney

标题消失在页面的右上角，但标题底部的标题边框似乎不受影响并运行整个页面长度。我的CSS在下面;我将#header和#headerBorder放在顶部，但我还为标题中的所有对象包含了CSS的其余部分，以防它相关。

#headerBorder {
display: block;
position: fixed;
z-index: 99;
top: 3.0em;
width: 100%;
height: 0.5em;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

}

#header {
position: fixed;
width: 100%;
top: 0;
z-index: 100;
left: 0;
background-color: #FFFFFF;
height: 3.0em;
}
#header #logo {
position: fixed;
left: 3.0em;
top: 0.4em;
width: 7.25em;
height: 3.0em;
}
#header a {
display: block;
float: right;
height: 2.25em;
font-size: 0.9em;
text-decoration: none;
font-weight: 600;
color: #777777;
text-transform: uppercase;
letter-spacing: 0.01em;
margin: 0.15em 0 0 2.5em;
padding: 1.25em 0.5em 0.2em 0.5em;

transition: color 0.30s ease-in-out;
-o-transition: color 0.30s ease-in-out;
-moz-transition: color 0.30s ease-in-out;
-webkit-transition: color 0.30s ease-in-out;
} #header a:last-of-type { margin-left: 0; }

#header a:hover {
color: #000000;
}

#header div {
float: right;
margin: -0.1em 2.0em 0 0;
}

#header div a {
margin: 0;
}

#header div a img {
width: 1.5em;
height: 1.5em;

opacity: 0.6;
margin: 0;
}

#header div a:hover img {
opacity: 1.0;


transition: opacity 0.30s ease;
-o-transition: opacity 0.30s ease;
-moz-transition: opacity 0.30s ease;
-webkit-transition: opacity 0.30s ease;
}

Answer 1

删除

#header { right: 10em; }

来自alpha.header.css

Answer 2

CSS should looks like below


body {

background-color: #AAAAAA;
background-image: url("/engine/img/texture.png");
background-repeat: repeat;
margin: 0; }

#header {
background-color: #FFFFFF;
height: 3em;
min-width: 100%;
right: 10em;
top: 0;
z-index: 100; }

#headerBorder {
background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
height: 0.5em;
top: 3em;
width: 100%;
z-index: 99; }


Note: Try not to use position:fixed.

标题消失在页面的右侧

2 个答案: