Question

我一直试图在CSS的帮助下用HTML创建一个标题，但我遇到的问题是每当我最小化（恢复）我的浏览器时，会发生的是标题行 HOME 是隐藏在这些链接和我指定的链接之间的一些悬停效果有点向下。是否有任何解决方案，即使我尽量减少我的浏览器，我必须修复标题位置，并且该标题的内容必须与正常阶段的内容相同。

图片如下： This is the problem i am facing

代码：

<body>

    <div id='header'>

        <center><h1>Home</h1></center>

    </div>

<div id="footer">

</div>

<div id="nav">
    <ul>
    <li><a href="#home">spam</a></li>
    <li><a href="#news">eggs</a></li>
    <li><a href="#contact">foo</a></li>
    <li><a href="#about">bar</a></li>
    </ul>
</div>
</body>

您可以在FIDDLE上找到它的CSS文件：FIDDLE

Answer 1

只需从position:fixed和#header

中删除#nav即可

JSFiddle

Answer 2

我认为这将有效：

<强> HTML

<body>
<div id="menuCont">
    <div id='header'>

        <center><h1>Home</h1></center>

</div>

<div id="nav">
    <ul>
        <li><a href="#home">spam</a></li>
        <li><a href="#news">eggs</a></li>
        <li><a href="#contact">foo</a></li>
        <li><a href="#about">bar</a></li>
    </ul>
</div>
    </div> 
    <div id="footer">

</div>

</body>

<强> CSS

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;

}
li
{
float:left;
width: 25%;

}
a:link,a:visited
{
display:block;

width:100%;

color:#404040;


text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
/* background-color:#E0E0E0; */


background-color: #323B50;
color: #FFFFFF;

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
border-radius: 1px;

}
#nav {
        background:#FFFFFF;
        color:#000000;
        opacity:1; 




        -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
        -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
        box-shadow: 1px 2px 3px rgba(0,0,0,.5);
        font-family:'Ubuntu';
        border-radius: 1px;
        position: relative;
        top: 8%;
        width: 100%;
        z-index: 100;
        left: 0%;
        height: 3.5%;
        padding: 0%;
        font-size: 75%;
    }
    #header
    {
        position: relative;
        font-size: 100%;
        height:8%;
        color: #FFFFFF; 
        background: #323B50;
        width: 100%;
        -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
        -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
        box-shadow: 1px 2px 3px rgba(0,0,0,.5);
        font-family:'Ubuntu';
        border-radius: 1px;

        top: 0;

        z-index: 100;
        left:0%;
    }
    #footer 
    {
        position:absolute;
        width: 100%;
        top:216%;
        left: 0;
        height:3%;
        color: #FFFFFF; 
        background: #323B50;
        width: 100%
    }

#menuCont{
   position: fixed;
    width: 100%; 
}

fiddle

标题内容变小并在最小化时隐藏

2 个答案: