Q&A
https://teratail.com/questions/49279 とまったく同じ内容なため、回答が付いていないこちらを削除されるよう運営に依頼されてはいかがでしょうか。
###質問
写真(bar.png)を画面の上にくっつけたいのですが、よくやり方がわかりません。
どのように変更したらよいでしょうか...
お願いします。
html
1<body id="bg"> 2 <div id="main"> 3 <header id="header"> 4 <p class="resizeimage"> 5 <img src="../img/bar.png"> 6 </p> 7 <div class="nav" algin="center"> 8 <ul class="nl clearFix"> 9 <li class="item1"><a href="#">TOP</a></li> 10 <li class="item2"><a href="#">クラン</a></li> 11 <li class="item3"><a href="#">活動実績</a></li> 12 <li class="item4"><a href="#">お問合せ</a></li> 13 </ul> 14 </div> 15 </header> 16 <div id="v"> 17 <video id="video" src="../video/sample.mp4" > 18 </video> 19 </div> 20 <div id="contents"> 21 <h1>新着情報</h1> 22 <p>新宿で新種の恐竜の化石が発見されました。<br>警視庁によれば昨夜17時ごろ、地面から 23 骨が生えていると警察に110番通報があり、調査の結果１００万年前の新種の恐竜<br>あることが分かりました。今後は文部科学省が調査するということです. 24 </p> 25 </div> 26 <footer id="footer"> 27 <p id="C">FOOTER 28 </p> 29 </footer> 30 </div> 31</body>
css
1#bg { 2background: #00000B; 3height: 100%; 4width: 100%; 5} 6 7p { 8 color: white; 9} 10header { 11 text-align: center; 12} 13p.resizeimage img { 14 padding-top: 0px; 15} 16/* --- ナビゲーションバー --- */ 17div.nav { 18 position: absolute; 19 top:3vh; 20 left: 45vw; 21display: inline; 22background-color: #f9f9f9; /* ナビゲーションの背景色 */ 23border-top: 1px #cccccc solid; /* 上境界線 */ 24border-bottom: 1px #cccccc solid; /* 下境界線 */ 25font-size: 80%; 26} 27 28/* --- メニューエリア --- */ 29div.nav ul.nl { 30width: 100%; /* メニューの幅 */ 31margin: 0; 32padding: 4px 0; /* メニューのパディング（上下、左右） */ 33list-style-type: none; 34text-align: center; 35} 36 37/* --- メニュー項目 --- */ 38div.nav ul.nl li { 39float: left; 40} 41 42/* --- 項目の幅（emで指定） --- */ 43div.nav ul.nl li.item1 { 44width: 6em; 45} 46div.nav ul.nl li.item2 { 47width: 6em; 48} 49div.nav ul.nl li.item3 { 50width: 6em; 51} 52div.nav ul.nl li.item4 { 53width: 6em; 54} 55div.nav ul.nl li.item { 56width: 10em; 57} 58 59/* --- リンク --- */ 60div.nav ul.nl li a { 61display: block; 62position: relative; /* IE6用 */ 63padding: 2px 5px; /* リンクエリアのパディング（上下、左右） */ 64border-right: 1px #cccccc solid; /* リンクエリアの右境界線 */ 65text-decoration: none; /* テキストの下線（なし） */ 66} 67/* --- ポイント時の設定 --- */ 68div.nav ul.nl li a:hover { 69text-decoration: underline; /* テキストの下線（あり） */ 70} 71 72/* --- clearfix --- */ 73.clearFix:after { 74content: "."; 75display: block; 76height: 0; 77clear: both; 78visibility: hidden; 79} 80.clearFix { 81min-height: 1px; 82} 83#v { 84 text-align: center; 85} 86#video { 87display: inline; 88text-align: center; 89}
回答2件
0
詳細はわかりませんが、以下で画面の上に固定することは可能です。
CSS
1header { 2 position: fixed; 3 top: 0; 4}
投稿2016/09/27 01:52
総合スコア214
あなたの回答
tips
プレビュー
