2016-04-08 9 views
0

2つのメインナビゲーションバーで構成されるウェブサイトを作成していますが、見出しに1つ、サイドにメインナビゲーションバーがあります。 (ウェブサイトは近くにはないので、その時点ではデザインを無視していることに注意してください)。HTML - 1つのページに2つのナビバーがあります

私はいくつかの助けを得ることができたと思っていました。私が編集しようとしているdivブロックはCSSで編集していないようです。それは本当に私がこの投稿をしている理由です私は本当に混乱しています。あなたはjsfiddleにの.infoクラスを編集するときに、JSFiddleの上に伝えることができたよう

JSFIDDLE

は、何も見出しの内容を変更しません。私が浮かべるように言っても、正しい結果は得られません。これが起こり、解決策が認められる理由。ありがとうございました!

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="homepage.css"> 
    <title>CSGOMarble</title> 
</head> 
<body> 
<div class="info"> 
<ul> 
    <li><a href="tos.html">Terms of Service</a></li> 
    <li><a href="faq.html">FAQ</a></li> 
</ul> 
</div> 
<div class="logo"> 
    <a href="homepage.html"> 
    <img src="logo.png" alt="LOGO" height="60px" width="200px"> 
    </a> 
</div> 

<hr> 

<div class="navbar"> 
    <ul> 
     <li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li> 
     <li><a href="jackpot.html">JACKPOT</a></li> 
     <li><a href="coinflip.html">COINFLIP</a></li> 
     <li><a href="roulette.html">ROULETTE</a></li> 
     <li><a href="giveaway.html">GIVEAWAY</a></li> 
     <li><a href="about.html">ABOUT</a></li> 
     <li><a href="contact.html">CONTACT</a></li> 
    </ul> 
</div> 
<div class="container"> 
    <img src="logo.png" alt="logo"> 
    <br> 
    <b><p style="font-size: 16.8px; color: grey; margin-top: 25px;">Welcome to CSGOMarble, the greatest CSGO gambling experience! CSGOMarble aims to be the best used, most trusted and respected of CSGO gambling. We all love to win, and we would like almost everyone to experience that. With CSGOMarble, not only will you be welcomed by a loving community, we will also be here to support you during your difficult times, that's why we have our, customer support and hard-working staff at your disposal. You'll be happy you decided to gamble with us!</p></b> 
    <br> 
    <a href="SIGNIN.HTML"> 
    <img src="LOGINMAIN.png" alt="SIGN IN WITH STEAM" style="margin-top: 5px;"> 
    </a> 
</div> 
</body> 
</html> 

CSS:

body { 
font-family: Arial, Verdana, sans-serif; 
background-color: #232a30; 
} 
.logo { 
margin-left: 25px; 
} 
.navbar { 
    margin-top: 50px; 
    margin-left: 40px; 
    padding: 0; 
    font-size: 15px; 
    float: left; 
    display: inline-block; 
    z-index: 2; 
    position: fixed; 
} 

.container { 
    width: 1000px; 
    height: 500px; 
    margin-top: 20px; 
    font-size: 25px; 
    display: inline-block; 
    text-align: center; 
    z-index: 1; 
    margin-left: 450px; 
} 
.navbar a { 
text-decoration: none; 
color: black; 
} 
.navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 250px; 
    background-color: #f1f1f1; 
    border: 2px solid #b4b6bd;; 
} 

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

.navbar li:last-child { 
    border-bottom: none; 
} 
.signin { 
margin-left: 500px; 
margin-top: -600px; 
} 
.info{ 
} 

答えて

1

あなたはaを選択する必要があります - 個別にアンカータグ。

.info { 
    float: right; 
} 
.info a{ 
    text-decoration: none; 
    } 

チェックこの::次のようにFiddle

+0

とき、私は – Senoj

+1

@Senoj、未発行できるよう最善の答えを報い、これをありがとうございました。それがあなたを助けてくれてうれしいです。 – divy3993

+0

Uhhh、.info divのタグを選択しようとすると、テキストの装飾が機能しません。それはあなたのフィドルでも動作しません...提案? – Senoj

関連する問題