2016-04-05 35 views
0

所以我很困惑,關於如何div的連接,父母必須是相對的(或固定????),孩子必須是絕對的,但我想要一個頂部菜單與本網站相同,這意味着我需要使頂層菜單div的屬性爲 position:absolute; top:0px; 但那麼這意味着我不能刷新一個div下方頂端菜單如果多數民衆贊成設置爲相對股利設置爲相對,但無法刷新頁面的頂部

html, body { 
 
\t background-color: #E8E8E8; 
 
} 
 
/* Div Body Start */ 
 
#container { 
 
\t width: 100% 
 
\t height: 100%; 
 

 
} 
 

 
#topmenu { 
 
\t position: absolute; 
 
\t opacity: 0.6; /* css standard */ 
 
    filter: alpha(opacity=60); /* internet explorer */ 
 
    
 
    top: 0px; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 70px; 
 
\t background-color: black; 
 
\t color: white; 
 
} 
 
#topmenu:hover { 
 
    opacity: 1; /* css standard */ 
 
    filter: alpha(opacity=100); /* internet explorer */ 
 
} 
 

 
#banner { 
 
    \t position: absolute; 
 
\t clear: both; 
 
    left: 0; 
 
    right: 0; 
 
    width: 750px; 
 
    height: 100px; 
 
    color: white; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 

 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 30px; 
 
\t border-top: 5px solid black; 
 
\t 
 
\t background: #00015E; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(#00015E, #3943FF); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(#00015E, #3943FF); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(#00015E, #3943FF); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(#00015E, #3943FF); /* Standard syntax */ 
 
\t 
 

 
\t height: 15% 
 
    
 
} 
 
/* Div Body End */ 
 
/* Top Menu Script Start */ 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: visable; 
 
    background-color: black; 
 
\t height: 50px; 
 
\t border-bottom: 5px solid black; 
 
\t margin:auto; 
 
\t display:block; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: lime; 
 
} 
 
/* Top Menu Script End */
<div id="container"> 
 
<div id="topmenu"> 
 
<ul> 
 

 
    <li><a href="#">Skills</a></li> 
 
    <li><a href="#contact">Education</a></li> 
 
    <li><a href="#news">Work</a></li> 
 
    <li><a href="#contact">Hobbys</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li style="float:right"><a href="index.html"><img class="topimages" src="images/icons/icon-home1.png" width="35" height="35"></a></li> 
 
</ul> 
 
</div><!-- End topmenu --> 
 
<div id="banner"> 
 

 

 
</div> 
 
</div><!-- End container -->

我真的沒有想使用 頂:55像素; 從屏幕上,因爲它使得後來滾動頁面時,所有的奇怪 我搜查了這種情況,但我無法找到任何答案,可能不夠好看....謝謝你們!

+0

你是什麼意思的「沖洗「?你不需要絕對定位一個div在頁面頂部,它會默認這樣做。 – KWeiss

+0

當我擺脫了位置,它將有一個填充從屏幕的頂部,我試圖得到像這個網站(股票溢出)的頂級屏幕菜單,然後有一個橫幅或任何div連接到頂部菜單。像0px一樣衝出對方? Divs connected –

回答

0

從身體內移除填充和利潤率,以及定位子菜單以正常的方式,工作正常,我在FF,Chrome瀏覽器,IE:

html, body { 
 
\t background-color: #E8E8E8; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 
/* Div Body Start */ 
 
#container { 
 
\t width: 100% 
 
\t height: 100%; 
 

 
} 
 

 
#topmenu { 
 
\t opacity: 0.6; /* css standard */ 
 
    filter: alpha(opacity=60); /* internet explorer */ 
 

 
    width: 100%; 
 
    height: 70px; 
 
\t background-color: black; 
 
\t color: white; 
 
} 
 
#topmenu:hover { 
 
    opacity: 1; /* css standard */ 
 
    filter: alpha(opacity=100); /* internet explorer */ 
 
} 
 

 
#banner { 
 
    \t position: absolute; 
 
\t clear: both; 
 
    left: 0; 
 
    right: 0; 
 
    width: 750px; 
 
    height: 100px; 
 
    color: white; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 

 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 30px; 
 
\t border-top: 5px solid black; 
 
\t 
 
\t background: #00015E; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(#00015E, #3943FF); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(#00015E, #3943FF); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(#00015E, #3943FF); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(#00015E, #3943FF); /* Standard syntax */ 
 
\t 
 

 
\t height: 15% 
 
    
 
} 
 
/* Div Body End */ 
 
/* Top Menu Script Start */ 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: visable; 
 
    background-color: black; 
 
\t height: 50px; 
 
\t border-bottom: 5px solid black; 
 
\t margin:auto; 
 
\t display:block; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: lime; 
 
} 
 
/* Top Menu Script End */
<div id="container"> 
 
<div id="topmenu"> 
 
<ul> 
 

 
    <li><a href="#">Skills</a></li> 
 
    <li><a href="#contact">Education</a></li> 
 
    <li><a href="#news">Work</a></li> 
 
    <li><a href="#contact">Hobbys</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li style="float:right"><a href="index.html"><img class="topimages" src="images/icons/icon-home1.png" width="35" height="35"></a></li> 
 
</ul> 
 
</div><!-- End topmenu --> 
 
<div id="banner"> 
 

 

 
</div> 
 
</div><!-- End container -->

+0

這完美的作品!謝謝!!!!雖然即時通訊仍然困惑,你如何管理這個沒有頂部:0px;設置爲菜單? –

+0

默認情況下它將在0px。 – KWeiss