ナビゲーションバーHTMLとCSSのヘルプが必要

-1

私はHTMLとCSSが初めてです。私はウェブサイトをしようとしていますが、私はnavbarから始めていますが、私がやろうとする度にposition:fixed;私のnavbarは縮小します。ナビゲーションバーHTMLとCSSのヘルプが必要

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Webhosting</title> 
     <link rel="stylesheet" type="text/css" href="cssone.css"/> 
    </head> 
    <body> 
     <div class="body_div"> 
      <!--NAVBAR--> 
      <div class="navbardiv"> 
       <ul class="navbar_ul"> 
        <li class="navbar_li_Contact"><a href="#contact.html">Contact</a></li> 
        <li class="navbar_li_WebHosting"><a class="active" href="#index.html">Webhosting</a></li> 
        <li class="navbar_li_About"><a href="#about.html">About</a></li> 
       </ul> 
      </div> 
     <div> 
    </body> 
</html>

CSS

body{ 
    background-image:url(imgs/background3.jpg); 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-size: cover; 

} 
.navbardiv{ 
    font-family:Rockwell; 
    font-size: 30px; 
} 
.navbar_ul{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
    background-color:#333; 
    border-radius:5px; 
    border-left:2px solid white; 
    border-right:2px solid white; 
    border-top:2px solid white; 
    border-bottom:2px solid white; 
    margin: -8px; 
    width: auto; 
    min-width:416px; 
    height:80px; 
    display: flex; 
    justify-content: space-between; 
    /*position:fixed;*/ 
} 
li { 
    float:left; 
    padding:15px 100px; 
} 
li a{ 
    display:block; 
    color:white; 
    text-align:center; 
    padding:8px 16px; 
    text-decoration: none; 
    border:2px solid white; 
    /*border-bottom:2px solid white;*/ 
    border-radius:5px; 

} 
li a:hover{ 
    background-color:gray; 
}

出典

2017-06-12 Samuel Ferreira

-1

あなたはどのあなたのためのより良い作品に応じて、width: 100%またはleft: 0; right: 0;を使用することができます。

body{ 
 
    background-image:url(imgs/background3.jpg); 
 
    background-repeat: no-repeat; 
 
    background-attachment:fixed; 
 
    background-size: cover; 
 

 
} 
 
.navbardiv{ 
 
    font-family:Rockwell; 
 
    font-size: 30px; 
 
} 
 
.navbar_ul{ 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
    overflow:hidden; 
 
    background-color:#333; 
 
    border-radius:5px; 
 
    border-left:2px solid white; 
 
    border-right:2px solid white; 
 
    border-top:2px solid white; 
 
    border-bottom:2px solid white; 
 
    margin: -8px; 
 
    left: 0; right: 0; 
 
    min-width:416px; 
 
    height:80px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position:fixed; 
 
} 
 
li { 
 
    float:left; 
 
    padding:15px 100px; 
 
} 
 
li a{ 
 
    display:block; 
 
    color:white; 
 
    text-align:center; 
 
    padding:8px 16px; 
 
    text-decoration: none; 
 
    border:2px solid white; 
 
    /*border-bottom:2px solid white;*/ 
 
    border-radius:5px; 
 

 
} 
 
li a:hover{ 
 
    background-color:gray; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Webhosting</title> 
 
     <link rel="stylesheet" type="text/css" href="cssone.css"/> 
 
    </head> 
 
    <body> 
 
     <div class="body_div"> 
 
      <!--NAVBAR--> 
 
      <div class="navbardiv"> 
 
       <ul class="navbar_ul"> 
 
        <li class="navbar_li_Contact"><a href="#contact.html">Contact</a></li> 
 
        <li class="navbar_li_WebHosting"><a class="active" href="#index.html">Webhosting</a></li> 
 
        <li class="navbar_li_About"><a href="#about.html">About</a></li> 
 
       </ul> 
 
      </div> 
 
     <div> 
 
    </body> 
 
</html>

出典

2017-06-12 16:21:06

しかし、どこに100％を追加しましたか？ –

@SamuelFerreiraあなたは問題の要素に '.navbar_ul'を追加します。私は幅を使用しませんでしたが、私は左と右を使用しました –

あなたが言ったように私はそれをしましたが、今は白い枠線を隠して、左に置いてみました：1右：1しかしそれはあまりにも縮んだ –

-1

ちょうどそれが

出典

2017-06-12 16:27:20

問題は' position：fixed'がnavbarを縮めることです。 OPはすでに '.navbar_ul'に' position：fixed'行をコメントアウトしています。幅や何かを追加するだけで、ブラウザの幅に収縮しないようにする必要があります。 –

thx for downvouting –

ダウンワードは「この回答は役に立たない」ためのものであり、そうではありません。 OPは既に 'position：fixed'を試していました。望むように動作しませんでした。また' top：0'を追加すると何も変わらないので便利ではありません。 –

を動作するはずです、あなた#navbardivに

.navbardiv{ 
    position: fixed; 
    top: 0; 
}

をこのCSSを追加することがうまくいく... CSSで.navbar_ulでwidth: 100%;を試してみてください。 ;）

出典

2017-06-12 16:36:16

ナビゲーションバーHTMLとCSSのヘルプが必要

答えて

関連する問題