は、水平ナビゲーションバーは、しかし、私が設計しようとしていますバーが水平方向とページの上部に固定され、私はホームボタン用写真付きナビゲーションバーを設計しようとしています垂直

<html> 
<head> 
<link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
<style> 
.topnav { 
    background-color: #333; 
    overflow: hidden; 
    position: fixed; 
} 
.topnav1 { 
    float: left; 
    display: block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-size: 17px; 
    width: 100%; 
    height: auto; 
} 
.topnav1:hover { 
    background-color: #ddd; 
    color: black; 
} 
.topnav1.active { 
    background-color: #4CAF50; 
    color: white; 
} 
.homebutton { 
    width: 5%; 
    height: auto; 
    border: solid; 
    border-color: white float: left; 
    align: center; 
} 
</style> 
</head> 
<body> 
<div class="topnav topnav1"> 
     <a href="/" class="topnav topnav1"><img src="imagesource" class="homebutton"></img> 
     </a> 
     <a href="/about" class="topnav topnav1">About</a> 
     <a href="/updates" class="topnav topnav1">Updates</a> 
     <a href="/contact" class="topnav topnav1">Contact</a> 
    </div> 
</body> 
</html>

として上がってきます。しかし、それは縦になり続け、ページの中央に集中しています。どのようにこれを修正することができます。は、水平ナビゲーションバーは、しかし、私が設計しようとしていますバーが水平方向とページの上部に固定され、私はホームボタン用写真付きナビゲーションバーを設計しようとしています垂直

出典

2017-04-07 Victor Cleare

各A /リンクタグから削除クラス 'topnav'あなたの本部で – Mayank

下記の構造に従ってください。あなたは本当にあなたのCSSでたくさん働く必要があります。また、学習している場所であれば、ブラウザでこれらのプロパティと現在のサポートをチェックしてください。

.topnav { 
 
    background-color: #333; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
.topnav1 { 
 
    float: left; 
 
    display: inline-block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
    height: auto; 
 
} 
 

 
.topnav1:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav1.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
.homebutton { 
 
    width: 5%; 
 
    height: auto; 
 
    border: solid; 
 
    border-color: white float: left; 
 
    text-align: center; 
 
    /* Align:center is obsolete now */ 
 
}

<div class="topnav"> 
 
    <a href="/" class="topnav1"><img src="imagesource" class="homebutton"> 
 
    </a> 
 
    <a href="/about" class="topnav1">About</a> 
 
    <a href="/updates" class="topnav1">Updates</a> 
 
    <a href="/contact" class="topnav1">Contact</a> 
 
</div>

出典

2017-04-07 18:36:02

ありがとう、私はイメージが水平で、下記のリンクの残りの部分と上にある今、これを試してみました他のリンクの左側ではなく、フォームに表示されます。 –

@VictorCleareでフィドルリンクを共有できます –

フィドルリンクとは何ですか？ –

は、水平ナビゲーションバーは、しかし、私が設計しようとしていますバーが水平方向とページの上部に固定され、私はホームボタン用写真付きナビゲーションバーを設計しようとしています垂直

答えて

関連する問題