2016-04-05 19 views
0

bu yüzden div bağlantısının ne kadar karışık olduğu, ebeveynin göreceli (veya sabit ????) olması gerektiğine ve çocuğun mutlak olması gerektiğine; Bu site ile aynı üst menüde pozisyonu ile en üst menü div yapmam gerekiyor demektir: mutlak; üst: 0px; şu görecelidiv göreceli olarak ayarlanmış ancak sayfanın üst kısmına hizalanamayacak şekilde

ayarlı ise ama sonra bu ı üst menüye altında bir div temizlemek olamaz anlamına

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 -->

ben gerçekten hiç üst kullanmak istediğiniz

: 55px; Ekrandan o kadar garip bir sayfa aşağı kaydırırken tüm garip gitmek yapar gibi bu durumu aradı ama bu soruyu aradım ama yeterince iyi görünmeyebilir, herhangi bir cevap bulamıyorum .... teşekkürler!

+0

Eğer floş" ne demek istiyorsunuz "? Sayfanın en üstünde olmak için kesinlikle bir boşluk yerleştirmeniz gerekmez, varsayılan olarak bunu yapar. – KWeiss

+0

Pozisyondan kurtulduğumda, ekranın en tepesinden bir dolgu gibi olacak, bu web sitesi (stok taşması) gibi bir üst ekran menüsü almaya çalışıyorum, sonra bir pankart veya herhangi bir div bağlantısına sahip olmak istiyorum. Üst menü 0px'de olduğu gibi birbirinden uzaklaştık mı? Divs bağlı –

cevap

0

vücuttan dolgu ve marjını Çıkarma ve alt Normal şekilde konumlandırılması, FF, Chrome, IE benim için çalışıyor:

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

Bu mükemmel çalışır! teşekkür ederim!!!! Yine de üst kısımda olmadan bunu nasıl başardınız: 0px; menüye ayarla –

+0

Varsayılan olarak 0 pikselde olacaktır. – KWeiss

İlgili konular