我想让我的菜单栏滚动页面

时间:2014-12-28 12:12:25

标签: html css

我想让我的菜单栏随页面滚动。有人可以帮我弄这个吗? 我不知道该尝试什么,因为我是新手。 我还有另一个问题:我想在我的主页中禁用滚动功能。 我试图使用overflow:hidden但是没有用。

我的HTML代码是:     

<center>
<img  src="logo.jpg" alt="logo" width=900 height=500 id="logo"/> 
</center>


<div> <table id="navigatie-venster"> 
    <tr>
        <td> <a href=index.html>Startpagina</a> </td>
    </tr>
    <tr>
        <td> <a href=bestuur.html>Bestuur</a> </td>
    </tr>
    <tr>
        <td> <a href=trainers.html>Trainers</a> </td>
    </tr>
    <tr>
        <td> <a href=disciplines.html>Disciplines</a> </td>
    </tr>
    <tr>
        <td> <a href=waartrainenwij.html>Waar trainen wij</a> </td>
    </tr>
    <tr>
        <td> <a href=uurrooster.html>Uurrooster</a> </td>
    </tr>
    <tr>
        <td> <a href=contact.html>Contact</a> </td>
    </tr>

</table> </div>

<div> <table id="navigatie-vensterr"> 
    <tr>
        <td> <a href=index.html>Startpagina</a> </td>
    </tr>
    <tr>
        <td> <a href=bestuur.html>Bestuur</a> </td>
    </tr>
    <tr>
        <td> <a href=trainers.html>Trainers</a> </td>
    </tr>
    <tr>
        <td> <a href=disciplines.html>Disciplines</a> </td>
    </tr>
    <tr>
        <td> <a href=waartrainenwij.html>Waar trainen wij</a> </td>
    </tr>
    <tr>
        <td> <a href=uurrooster.html>Uurrooster</a> </td>
    </tr>
    <tr>
        <td> <a href=contact.html>Contact</a> </td>
    </tr>

</table> </div>

<div id="facebook">
<a href="https://www.facebook.com/KoninklijkeTurnkringAalst"  target="_blank" > <img  src="facebook.jpg" alt="facebook" width=100 height=100 >  </a> 
</div>

<div id="kwaliteitslabel">
<img  src="kwaliteitslabel.jpg" alt="kwaliteitslabel" width=100 height=100 /> 
</div>

</body>

我的css是:

body{ background: rgba(169,3,41,1);
background: -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(169,3,41,1)), color-stop(44%, rgba(143,2,34,1)), color-stop(100%, rgba(109,0,25,1)));
background: -webkit-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -o-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: linear-gradient(to right, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019', GradientType=1 );}

#navigatie-venster {position: absolute;
left: 0px; top: 150px; }    

#navigatie-vensterr{ position: absolute;
right: 0px; top: 150px; direction: rtl; }   

1 个答案:

答案 0 :(得分:0)

老兄检查这段代码

http://jsfiddle.net/naveenkumarpg/bepnus8u/

希望这是你所期待的

<div id="fixedheader">
    <img src="logo.jpg" alt="logo" width=900 height=500 id="logo" />
</div>

我用div修改了你的标题 并更新了css。

HTML中存在一些问题,我已修复它们。

这里有CSS:

#fixedheader {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    float:left: display:block;
    text-align:center;
    background:#fff;
}

希望这就是你想要的。

干杯