繁体   English   中英

如何在此网页中锁定标题

How to lock header in this web page

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有两个需要锁定在此网页上的框,但是当我尝试锁定它们时,它会更改大小,并且正文会在其上滚动。

我需要标题显示所有内容并被锁定。

代码在这里:

http://jsfiddle.net/dwhs/gtehep16/

的HTML

<body>
<!--==============================header=================================-->    
<header>
        <div class="head-box1">
        <div class="main">
            <h1><a class="logo" href="index.html">pro web hosting</a></h1>
            <nav>
              <div style="text-align:right;"> <span class="link2"><a href="#">Account Manager</a> | <a href="https://webhost.pro/account/cart.php?a=view">Cart</a> | <a href="https://webhost.pro/account/register.php">Register</a> | <a href="http://webhost.pro/account/knowledgebase.php">Questions?</a></span></span><span class="phone"><br>
                Call us: <strong>(213)984-HOST 24/7 <a href="/support.htm">Support</a></strong></span><span class="nothing"><br>
                </span> <a href="https://webhost.pro/account/clientarea.php"></a></div>
          </nav>
        </div>
        <div class="clear"></div>
        </div>

        <div id='cssmenu'>
<ul>
   <li class='active'><a href='/'><span>Home</span></a></li>
   <li><span><a href="/web-hosting-plans.htm">Web Hosting</a></span></li>
   <li><span><a href="/reseller-hosting.htm">Reseller</a></span></li>
   <li><span><a href="/dedicated-servers.html">Dedicated</a></span></li>
   <li><span><a href="/support.htm">Support</a></span></li>
   <li><a href='/affiliates/index.htm'><span>Affiliates</span></a></li>
   <li class='last'><a href='/why-us.html'><span>Why us</span></a></li>
</ul>
</div>

的CSS

header {
    width:100%;
    position:relative; 
    z-index:2;
}
.logo {
    display:block;
    width:300px;
    height:75px;
    text-indent:-5000px;
    background:url(/images/logo.png) 0 0 no-repeat;
}
.nothing {
    color: #ffffff;
    font-size:20px;
    text-decoration:none;
    padding: 10px 0px 0px 0px;
}
.head-box1 {
    padding-bottom:10px;
    background-color: #F4F3F3;
}
.main {
    width:960px;
    padding:0;
    margin:0 auto;
}
body{
    color:#333;
    position:relative;
    min-width:980px;
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-transform: none;
    background-color: #F4F3F3;
    background-repeat: no-repeat;
    background-position: center 0;
}
html,body{height:100%;}
p{padding-bottom:18px;}
a{
    color:#333;
    outline:none;
    cursor:pointer;
    text-decoration:none;
}
/*** MENU ***/
.sf-menu, .sf-menu * {
    margin:         0;
    padding:        5;
    list-style:     none;
}

nav {
    float:right;
    margin-right:10px;
    padding-top:25px;
    width:500px;
}
.sf-menu {
    line-height:    1.0;
}
.sf-menu li {
    float:          right;
    position:       relative;
    margin-left:20px;   
}
.sf-menu a {
    display:        block;
    position:       relative;
    color:#CCCCCC;
    text-transform:capitalize;
    font-size:12px;
    line-height:16px;
}
.sf-menu a:hover,
.sf-menu a.active,
.sf-menu li.sfHover > a {
    color:#FFFFFF;
    text-decoration:none;
}

.sf-menu ul a:hover,
.sf-menu ul li.sfHover > a {
    color:#1f4460;
}

.sf-menu ul ul a:hover,
.sf-menu ul ul li.sfHover > a {
    color:#58a5c4;
}

.sf-menu ul {
    position:       absolute;
    top:            -999em;
    background:url(/images/menu-bg.gif) repeat-x 0 0 #4f95ba;
    width:          160px; /* left offset of submenus need to match (see below) */
    padding-top: 19px;
    padding-right: 0;
    padding-bottom: 8px;
    padding-left: 0;
}

.sf-menu ul:after {
    display:block;
    position:absolute;
    width:11px;
    height:6px;
    background:url(../images/marker1.png) no-repeat 0 0;
    top:-6px;
    left:14px;
    content:'   ';
}

.sf-menu ul ul:after {
    display:block;
    position:absolute;
    width:5px;
    height:9px;
    background:url(../images/marker2.png) no-repeat 0 0;
    top:13px;
    left:-5px;
    content:'   ';
}

.sf-menu ul ul  {
    position:       absolute;
    top:            -999em;
    padding:10px 0 6px;
    background:url(../images/menu-bg1.gif) repeat-x 0 0 #1e4460;
    width:          140px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
    width:          100%;
    margin:0 25 30px;
    padding:20px 0 0px;
    text-align:center;
}
.sf-menu ul a {
    font-size:12px;
    color:#fff;
}
.sf-menu li:hover {
    visibility:     inherit; /* fixes IE7 'sticky bug' */
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left: -17px;
    top: 32px; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left: 151px;
    top: -8px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:           10em; /* match ul width */
    top:            0;
}

该页面位于http://dwhswebsite.com尝试锁定菜单和上方的所有内容。 所以一切都在它下面滚动。

谢谢!

1 个回复

您的HTML标记是错误的。 您的<header>包含大部分身体内容。 进行以下更改。

更新了Header HTML,其他所有内容都应位于</header>

<header>
        <div class="head-box1">
        <div class="main">
            <h1><a class="logo" href="index.html">pro web hosting</a></h1>
            <nav>
              <div style="text-align:right;"> <span class="link2"><a href="https://webhost.pro/account/clientarea.php">Account Manager</a> | <a href="https://webhost.pro/account/cart.php?a=view">Cart</a> | <a href="https://webhost.pro/account/register.php">Register</a> | <a href="http://webhost.pro/account/knowledgebase.php">Questions?</a></span><span class="phone"><br>
                Call us: <strong>(213)984-HOST 24/7 <a href="/support.htm">Support</a></strong></span><span class="nothing"><br>
                </span> <a href="https://webhost.pro/account/clientarea.php"></a></div>
          </nav>
        </div>
        <div class="clear"></div>
        </div>

        <div id="cssmenu">
<ul>
   <li class="active"><a href="/"><span>Home</span></a></li>
   <li><span><a href="/web-hosting-plans.htm">Web Hosting</a></span></li>
   <li><span><a href="/reseller-hosting.htm">Reseller</a></span></li>
   <li><span><a href="/dedicated-servers.html">Dedicated</a></span></li>
   <li><span><a href="/support.htm">Support</a></span></li>
   <li><a href="/affiliates/index.htm"><span>Affiliates</span></a></li>
   <li class="last"><a href="/why-us.html"><span>Why us</span></a></li>
</ul>
</div>


 </header>

的CSS

header {
  width: 100%;
  position: fixed;
  z-index: 2;
}

body {
  top: 150px;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题
 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM