2016-04-23 24 views
0

私は現在、ロゴ、その右側の水平ナビゲーションバー、一定の高さの下にある固定幅の画像、下に追加の地形のnavbar。このような何か:HTMLフルサイズの画像、固定の高さ

HTML

<img src="img/imgicon.jpg" /> 
<nav id="mainnav" style="float: right /> 
<img src="img/fixedimg" style="width: 100%; height: 30%; /> 
<nav id="secondnav" /> 

私が持っている問題は、固定イメージは常にフルサイズであり、固定されていないということです。私は親コンテナ(div)を使用して、その上に固定高さを設定しようとしましたが、イメージは常にフルサイズになります。私が見つけることができる唯一の解決策は、画像の位置を絶対に設定することですが、その下にあるナビゲーションバーは画像の下に隠されています。下に移動するには20 <br>を使用したくありません。

これを解決するにはどうすればよい方法でしょうか?ここで

は抜粋です:

body { 
 
    font-family: cambria; 
 
    margin: 0; 
 
} 
 
/*TOP NAVBAR */ 
 

 
#topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: white; 
 
    float: right; 
 
    height: 71px; 
 
} 
 
#topnav li { 
 
    margin-top: 13px; 
 
    float: right; 
 
} 
 
#topnav li a { 
 
    display: block; 
 
    padding-top: none; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    color: #4d4d4d; 
 
    margin-right: 3px; 
 
} 
 
#topnav li a:hover { 
 
    color: blue; 
 
} 
 
.active1 { 
 
    color: blue; 
 
} 
 
/*SECONDARY NAVBAR */ 
 

 
#secondnav { 
 
    float: left; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #666666; 
 
    border-bottom: 5px solid #8c8c8c; 
 
    width: 100%; 
 
} 
 
#secondnav li { 
 
    float: left; 
 
} 
 
#secondnav li a { 
 
    display: block; 
 
    padding-top: none; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    color: white; 
 
    margin-right: 3px; 
 
    font-weight: bold; 
 
} 
 
#fullwidth { 
 
    width: 100%; 
 
}
<DOCTYPE html> 
 
    <html lang="en"> 
 

 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css" /> 
 
    <title>Website</title> 
 
    </head> 
 

 
    <body> 
 
    <!--LOGO--> 
 
    <div style="width: 100%; height: 71px;"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" style="float: left; margin-left: 150px; height: 71px; width: 220px;" /> 
 
     <!--MAIN NAV--> 
 
     <ul id="topnav"> 
 
     <li><a href="#">LOGIN</a> 
 
     </li> 
 
     <li><a href="#">GALLERY</a> 
 
     </li> 
 
     <li><a href="#">CONTACT</a> 
 
     </li> 
 
     <li><a href="courseinfo.html">INFORMATION</a> 
 
     </li> 
 
     <li><a href="index.html">HOME</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div style="height: 5%; width: 100%;"> 
 
     <img src="http://images.freecreatives.com/wp-content/uploads/2016/04/Blue-Scratched-Textured-Background.jpg" alt="welcome" style="width: 100%; height: 5px%;" /> 
 
    </div> 
 
    <!--SECONDARY NAV--> 
 
    <ul id="secondnav"> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
    </ul> 
 
    </body> 
 

 
    </html>

私はいずれかを設定していないかのように、フルサイズになりますが、画像が小さなに設定されているにもかかわらず、スニペットから見ることができるようにまったく属性。

+0

を与えるあなたは[織り](http://kodeweave.sourceforge.net/editor/)を投稿したり、スニペットもらえますか? –

答えて

0

使用のCSSとのimgクラスに

#fixed { 
 
    width: 100% height: 30%; 
 
}
<img src="img/imgicon.jpg"> 
 
<nav id="mainnav" style="float: right;> 
 
<img class=" fixed; src="img/fixedimg,png"> 
 
    <nav id="secondnav"></nav>

関連する問題