Navbar Yanıt Vermiyor

Web sayfamda bir navbar var, ayrıca web sayfamda da bilgi aldım. Bilgileri (paragraf ve başlıklar) kaldırdığımda navbar fonksiyonları mükemmel. Ancak bilgileri geri yerleştirdiğimde, navbar hiçbir şekilde işe yaramıyor. Bir web sitesi neden böyle yapıyor? Teşekkürler.Navbar Yanıt Vermiyor

JSFiddle - Bilgilerle

JSFIDDLE - Bilgisi Olmadan

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="homepage.css"> 
    <title>CSGOMarble</title> 
</head> 
<body> 
<h3 style="float: right; margin-right: 25px;"><a href="http://www.steamcommunity.com/login/">SIGN IN WITH STEAM</a></h3> 

<div class="logo"> 
    <img src="logo.png" alt="LOGO" height="60px" width="200px"> 
</div> 

<hr> 

<div class="navbar"> 
    <ul> 
     <li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li> 
     <li><a href="coinflip.html">COINFLIP</a></li> 
     <li><a href="about.html">ABOUT</a></li> 
     <li><a href="contact.html">CONTACT</a></li> 
    </ul> 
</div> 
<div class="container"> 
    <h2>CSGOMarble</h2> 
    <u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u> 
    <p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p> 
</div> 
</body> 
</html>

CSS:

body { 
font-family: Arial, Verdana, sans-serif; 
background-color: white; 
} 
.logo { 
margin-left: 25px; 
} 
.navbar { 
margin-top: 50px; 
margin-left: 25px; 
padding: 0; 
font-size: 15px; 
float: left; 
display: inline-block; 
} 
.container { 
    width: 100%; 
    margin-top: 20px; 
    font-size: 25px; 
    display: inline-block; 
    position: fixed; 
    text-align: center; 
} 
a { 
text-decoration: none; 
color: black; 
} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 175px; 
    background-color: #f1f1f1; 
    border: 2px solid #555; 
} 

li a { 
    display: block; 
    color: #000; 
    padding: 12px 0 12px 0; 
    text-decoration: none; 
} 
li a:hover { 
    background-color: #555; 
    color: white; 
} 
li { 
    text-align: center; 
    border-bottom: 1px solid #555; 
} 

li:last-child { 
    border-bottom: none; 
}

kaynak

2016-04-06 Senoj

yardımcı kod Bu tür basittir ve normalde iyi çalışıyor Umut. Di d Eksik parantezleri veya kapanış etiketlerini kontrol ettiniz mi?

etiketi nedir ve kapama etiketi var mı? – Sparky256

pozisyonunu verdiniz: navbarın üzerinden gelen konteyner için sabit. ya pozisyonu kaldırın: sabitleyin ya da kenar boşluğu kullanın .. –

için position:relative değiştirin position:fixed Eğer pozisyon kaba tespit ilave zaman, her iki ilgili Z-dizinini ekleyebilir. istediğiniz kadar yolunuza düzeltme bunun için konteyner ve nav div'ler.

.navbar { 
    margin-top: 50px; 
    margin-left: 25px; 
    padding: 0; 
    font-size: 15px; 
    float: left; 
    display: inline-block; 
    z-index: 2; 
    position: fixed; 
} 

.container { 
    width: 100%; 
    margin-top: 20px; 
    font-size: 25px; 
    display: inline-block; 
    position: fixed; 
    text-align: center; 
    z-index: 1; 
}

Değişim bu Css o

kaynak

2016-04-06 04:14:26 hemanjosko

Bunun için teşekkür ederiz. – Senoj

Eğer eleman KAYDIRIN DEĞİL istemedikçe position:fixed kullanmayın sayfa ile. Bu css ayarları, ekrana/pencereye sabit kalan ve her zaman görülebilen başlıklar (navbarlar) için mükemmeldir.

position:fixed'a benzeyen diğeri, kullanıcı sayfayı aşağı kaydırdıkça yukarı kaydırması dışında position:absolute'dur. Ancak, hem mutlak hem de sabit, öğeyi ekrana tam olarak konumlandırmak için topleftrightbottom'u kullanmanızı sağlar. (Bir ipucu: ana eleman) ya position:absolute veya position:relative (nispi yaygındır olmalıdır

<div class="container">

kaynak

2016-04-06 04:14:12 gibberish

Navbar Yanıt Vermiyor

cevap

İlgili konular