2016-10-12 3 views
0

自分のHTML文書内のナビゲーションが割り当てられたdivにとどまっていません。私はdivの中にナビゲーションを配置し、それはその内部にとどまっていません。私はなぜ私のヘッダーが今のところ伸びているのか知りたい。ナビゲーションは、その下にないヘッダーと同じ行になければなりません。彼らは両方とも同じ部門に入っています!ではなぜ彼らはそれを見せていないのですか? Plzヘルプ。 ありがとう!div内にナビゲートしていない

.navigation-bar { 
 
    bottom: 0px; 
 
    display: block; 
 
    padding-top: 70px; 
 
    padding-bottom: 70px; 
 
    background-color: #fff; 
 
    color: rgba(0, 0, 0, .74); 
 
    text-transform: uppercase; 
 
    border: 2px solid red; 
 
    position: relative; 
 
} 
 
.brand-text { 
 
    display: block; 
 
    overflow: visible; 
 
    position: relative; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    float: none; 
 
    clear: none; 
 
    -webkit-transition: color 700ms ease; 
 
    transition: color 700ms ease; 
 
    font-family: Georgia, Times, 'Times New Roman', serif; 
 
    color: #000; 
 
    font-size: 40px; 
 
    line-height: 36px; 
 
    font-weight: 700; 
 
    text-decoration: none; 
 
    border: 1px solid blue; 
 
} 
 
.brand-text:hover { 
 
    color: #858585; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
.nav-menu { 
 
    position: relative; 
 
    float: right; 
 
    border: 1px solid green; 
 
} 
 
.nav-link { 
 
    padding-top: 7px; 
 
    padding-bottom: 7px; 
 
    padding-right: 20px; 
 
    padding-left: 20px; 
 
    border: 1px none #858585; 
 
    -webkit-transition: color 700ms ease, border 700ms ease; 
 
    transition: color 700ms ease, border 700ms ease; 
 
    font-family: Georgia, Times, 'Times New Roman', serif; 
 
    color: #000; 
 
    line-height: 18px; 
 
    font-weight: 400; 
 
    position: relative; 
 
} 
 
.nav-link:hover { 
 
    border-style: none; 
 
    border-bottom-width: 1px; 
 
    border-bottom-color: #858585; 
 
    color: #858585; 
 
} 
 
.nav-link.w--current { 
 
    border-style: none none solid; 
 
    border-bottom-width: 1px; 
 
    border-bottom-color: #000; 
 
    -webkit-transition: color 700ms ease; 
 
    transition: color 700ms ease; 
 
    font-family: Georgia, Times, 'Times New Roman', serif; 
 
    color: #000; 
 
    line-height: 18px; 
 
    font-weight: 400; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 
.nav-link.w--current:hover { 
 
    color: #858585; 
 
} 
 
.w-container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 940px; 
 
    display: block; 
 
    position: relative; 
 
}
<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
    <title>Website</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Stylesheet.css"> 
 
</head> 
 

 
<body> 
 
    <section class="navigation-bar" data-animation="over-right" data-collapse="medium" data-contain="1" data-doc-height="1" data-duration="600" data-easing="ease-in-out-circ" data-easing2="ease-in-out-circ"> 
 
    <div class="w-container"> 
 
     <a class="w-nav-brand" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html"> 
 
     <h1 class="brand-text">Website</h1> 
 
     </a> 
 
     <nav class="nav-menu w-nav-menu" role="navigation"> 
 
     <a class="nav-link w-nav-link" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html">Gallery</a> 
 
     <a class="nav-link w-nav-link" href="About">About</a> 
 
     <a class="nav-link w-nav-link" href="Contact">Contact</a> 
 
     <a class="nav-link w-nav-link" href="Blog">Blog</a> 
 
     </nav> 
 
    </div> 
 

 
    </section> 
 
</body>

+0

チェックこのリンクを助けなら、私に知らせて/ /learn.shayhowe.com/html-css/positioning-content/ –

答えて

0

あなたはnav-menufloat:rightを設定するためですが、あなたはそう

はスニペットを参照してくださいw-nav-brandfloat:leftを追加するには、display:blockとして設定されたクラス.brand-textでテキストを持っているw-nav-brandを持っています以下のようになります(imgとnavはデフォルトのスニペット領域のような小さな領域に収まらないので、フルスクリーンでチェックインしてください)。imgを減らしたい場合は、メディアクエリを使用する必要があります-http:幅または特定のビューポートの幅下のメニュー幅)

またはjsfiddleを参照してください>jsfiddle

は、それが

.navigation-bar { 
 
    bottom: 0px; 
 
    display: block; 
 
    padding-top: 70px; 
 
    padding-bottom: 70px; 
 
    background-color: #fff; 
 
    color: rgba(0, 0, 0, .74); 
 
    text-transform: uppercase; 
 
    border: 2px solid red; 
 
    position: relative; 
 
} 
 
.brand-text { 
 
    display: block; 
 
    overflow: visible; 
 
    position: relative; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    float: none; 
 
    clear: none; 
 
    -webkit-transition: color 700ms ease; 
 
    transition: color 700ms ease; 
 
    font-family: Georgia, Times, 'Times New Roman', serif; 
 
    color: #000; 
 
    font-size: 40px; 
 
    line-height: 36px; 
 
    font-weight: 700; 
 
    text-decoration: none; 
 
    border: 1px solid blue; 
 
} 
 
.brand-text:hover { 
 
    color: #858585; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
.nav-menu { 
 
    position: relative; 
 
    float: right; 
 
    border: 1px solid green; 
 
} 
 
.nav-link { 
 
    padding-top: 7px; 
 
    padding-bottom: 7px; 
 
    padding-right: 20px; 
 
    padding-left: 20px; 
 
    border: 1px none #858585; 
 
    -webkit-transition: color 700ms ease, border 700ms ease; 
 
    transition: color 700ms ease, border 700ms ease; 
 
    font-family: Georgia, Times, 'Times New Roman', serif; 
 
    color: #000; 
 
    line-height: 18px; 
 
    font-weight: 400; 
 
    position: relative; 
 
} 
 
.nav-link:hover { 
 
    border-style: none; 
 
    border-bottom-width: 1px; 
 
    border-bottom-color: #858585; 
 
    color: #858585; 
 
} 
 
.nav-link.w--current { 
 
    border-style: none none solid; 
 
    border-bottom-width: 1px; 
 
    border-bottom-color: #000; 
 
    -webkit-transition: color 700ms ease; 
 
    transition: color 700ms ease; 
 
    font-family: Georgia, Times, 'Times New Roman', serif; 
 
    color: #000; 
 
    line-height: 18px; 
 
    font-weight: 400; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 
.nav-link.w--current:hover { 
 
    color: #858585; 
 
} 
 
.w-container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 940px; 
 
    display: block; 
 
    position: relative; 
 
    float:left; 
 
    width:100%; 
 
} 
 
.w-nav-brand { 
 
    float:left; 
 
    }
<section class="navigation-bar" data-animation="over-right" data-collapse="medium" data-contain="1" data-doc-height="1" data-duration="600" data-easing="ease-in-out-circ" data-easing2="ease-in-out-circ"> 
 
    <div class="w-container"> 
 
     <a class="w-nav-brand" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html"> 
 
     <h1 class="brand-text">Website</h1> 
 
     </a> 
 
     <nav class="nav-menu w-nav-menu" role="navigation"> 
 
     <a class="nav-link w-nav-link" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html">Gallery</a> 
 
     <a class="nav-link w-nav-link" href="About">About</a> 
 
     <a class="nav-link w-nav-link" href="Contact">Contact</a> 
 
     <a class="nav-link w-nav-link" href="Blog">Blog</a> 
 
     </nav> 
 
    </div> 
 

 
    </section>

+0

ありがとうございました!これは本当に役立ちます! –

+0

@JoshCorbett嬉しいです。これが正解であれば、回答を受け入れるか、または上書きすることを忘れないでください –

0

<h1>ブロックレベル要素なので、ダウンあなたのNAVを押して、全体の親幅を占めています。

H1を左に浮かべて、それはあなたが望むように動作します - ただし、フルスクリーンスニペット内でのみ!

.navigation-bar { 
 
    bottom: 0px; 
 
    display: block; 
 
    padding-top: 70px; 
 
    padding-bottom: 70px; 
 
    background-color: #fff; 
 
    color: rgba(0, 0, 0, .74); 
 
    text-transform: uppercase; 
 
    border: 2px solid red; 
 
    position: relative; 
 
} 
 
.brand-text { 
 
    display: block; 
 
    overflow: visible; 
 
    position: relative; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    float: left; 
 
    clear: none; 
 
    -webkit-transition: color 700ms ease; 
 
    transition: color 700ms ease; 
 
    font-family: Georgia, Times, 'Times New Roman', serif; 
 
    color: #000; 
 
    font-size: 40px; 
 
    line-height: 36px; 
 
    font-weight: 700; 
 
    text-decoration: none; 
 
    border: 1px solid blue; 
 
} 
 
.brand-text:hover { 
 
    color: #858585; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
.nav-menu { 
 
    position: relative; 
 
    float: right; 
 
    border: 1px solid green; 
 
} 
 
.nav-link { 
 
    padding-top: 7px; 
 
    padding-bottom: 7px; 
 
    padding-right: 20px; 
 
    padding-left: 20px; 
 
    border: 1px none #858585; 
 
    -webkit-transition: color 700ms ease, border 700ms ease; 
 
    transition: color 700ms ease, border 700ms ease; 
 
    font-family: Georgia, Times, 'Times New Roman', serif; 
 
    color: #000; 
 
    line-height: 18px; 
 
    font-weight: 400; 
 
    position: relative; 
 
} 
 
.nav-link:hover { 
 
    border-style: none; 
 
    border-bottom-width: 1px; 
 
    border-bottom-color: #858585; 
 
    color: #858585; 
 
} 
 
.nav-link.w--current { 
 
    border-style: none none solid; 
 
    border-bottom-width: 1px; 
 
    border-bottom-color: #000; 
 
    -webkit-transition: color 700ms ease; 
 
    transition: color 700ms ease; 
 
    font-family: Georgia, Times, 'Times New Roman', serif; 
 
    color: #000; 
 
    line-height: 18px; 
 
    font-weight: 400; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 
.nav-link.w--current:hover { 
 
    color: #858585; 
 
} 
 
.w-container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 940px; 
 
    display: block; 
 
    position: relative; 
 
}
<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
    <title>Website</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Stylesheet.css"> 
 
</head> 
 

 
<body> 
 
    <section class="navigation-bar" data-animation="over-right" data-collapse="medium" data-contain="1" data-doc-height="1" data-duration="600" data-easing="ease-in-out-circ" data-easing2="ease-in-out-circ"> 
 
    <div class="w-container"> 
 
     <a class="w-nav-brand" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html"> 
 
     <h1 class="brand-text">Website</h1> 
 
     </a> 
 
     <nav class="nav-menu w-nav-menu" role="navigation"> 
 
     <a class="nav-link w-nav-link" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html">Gallery</a> 
 
     <a class="nav-link w-nav-link" href="About">About</a> 
 
     <a class="nav-link w-nav-link" href="Contact">Contact</a> 
 
     <a class="nav-link w-nav-link" href="Blog">Blog</a> 
 
     </nav> 
 
    </div> 
 

 
    </section> 
 
</body>