前提・実現したいこと
ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
navに親要素でも無いmainのborderが被さってしまう
HTML5
1コード 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <meta name="description" content=""> 7 <title>もふもふ</title> 8 <link rel="stylesheet" href="index.css"> 9 </head> 10 <body> 11 <header> 12 <div class="container"> 13 <div class="header-left"> 14 <img src="image/google.png" class="logo"> 15 </div> 16 </div> 17 </header> 18 <div id="nav"> 19 <ul id="nav1"> 20 <li><a href="#">ホーム</a></li> 21 <li><a href="#">会社概要</a></li> 22 <li><a href="#">お問い合わせ</a></li> 23 </ul> 24 <a href="#" id="login">ログイン</a> 25 </div> 26 27 <main> 28 </main> 29 <footer></footer> 30 </body> 31</html>
CSS3
1@charset "utf-8"; 2 3header { 4 width: 100%; 5 height: 65px; 6 background-color: rgba(2,2,3,0.6); 7} 8.logo { 9 width: 60px; 10 margin-left:20px 11} 12#nav1 { 13 list-style: none; 14 text-align: center; 15 margin: 0px; 16 padding-top: 8px; 17} 18#nav1 li { 19 background-color: rgba(2,2,3,0.8); 20 width: 140px; 21 float: left; 22 padding: 5px; 23 margin-right: 30px; 24} 25#nav1 li a { 26 text-decoration: none; 27 color: white; 28 font-weight: bold; 29} 30body { 31 background-image: url(image/roma.jpg); 32 height: 800px; 33 background-size: cover; 34 margin-top: 0px; 35} 36#login { 37 background-color: black; 38 float: right; 39 text-decoration: none; 40 padding: 5px; 41 width: 100px; 42 text-align: center; 43 font-weight: bold; 44 color: white; 45 margin-right: 30px; 46} 47main { 48 height:100px; 49 border: 1px solid white; 50} 51
回答2件
あなたの回答
tips
プレビュー