Q&A
コードブロックはなるべくファイル毎にわけてもらったらと。
学校の課題で高校のウェブサイトを作っています。
メニューバーを作ったのですが下の画像部分と大きさと位置を合わせたいのですがうまく合いません。メニューバーと下のテキストは、両方max-height:1170px; margin:0 auto;で指定しています。
発生している問題・エラーメッセージ
エラーメッセージはありません画像のようになってしまいます。
該当のソースコード
html
1<DOCTYPE html> 2<html lang='ja'> 3<head> 4 <meta charset="utf-8"> 5 <title>**高等学校</title> 6 <link rel='stylesheet' href="top.css"> 7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8<head> 9 10<body> 11 12 <header> 13 <h1><img src="img/logo.gif" alt="">**清瀬高校</h1> 14 <div class='access'><a href='***'><i class="fas fa-map-marker-alt"></i> アクセス</a></div> 15 </header> 16 17 <div class="navigation"> 18 <ul class="m-gnavi"> 19 <li><a href="index.html">トップ</a></li> 20 <li><a href="00001.html">校長から</a></li> 21 <li><a href="00002.html">学校紹介</a></li> 22 <li><a href="00003.html">学校生活</a></li> 23 <li><a href="00004.html">学習について</a></li> 24 <li><a href="00005.html">入学案内</a></li> 25 <li><a href="00006.html">卒業後の進路</a></li> 26 <li><a href="00007.html">経営企画室から</a></li> 27 </ul> 28 </div> 29 <div class="clear"></div> 30 31 <div class="top-wrapper"> 32 <p>スローガン</p> 33 </div> 34</html> 35
css
1header{ 2 background-color: #fff; 3 height: 65px; 4 max-width: 1170px; 5 margin: 0 auto; 6 margin-bottom: 5px; 7} 8header img{ 9 height:100%; 10 padding: 0 15px 0 30px; 11 float:left; 12} 13header h1{ 14 line-height: 65px; 15 float:left; 16 margin: 0 auto; 17 font-weight: normal; 18} 19header a{ 20 text-decoration: none; 21 line-height:65px; 22 float:right; 23 margin: 0 auto; 24 padding: 0 30px; 25 color:#000; 26 transition: 0.5s ; 27} 28header a:hover{ 29 background-color: rgba(198,231,206,1); 30 color:#fff; 31} 32 33.m-gnavi { 34 list-style: none; 35 max-width: 1170px; 36 margin: 0 auto; 37 background-color:rgba(49, 84, 90, 1); 38} 39.m-gnavi li{ 40 float: left; 41 width: 12.5%; 42 text-align: center; 43 background-color: rgba(49, 84, 90, 1); 44 padding:10px 0; 45 transition: 0.5s ; 46} 47.m-gnavi li a{ 48text-decoration: none; 49color:#fff; 50} 51.m-gnavi li:hover{ 52 opacity: 0.7; 53} 54.clear{ 55 clear: left; 56} 57 58.top-wrapper{ 59 max-width: 1170px; 60 height: 400px; 61 margin: 0 auto; 62 background-image: url(img/top-img.jpeg); 63} 64.top-wrapper p { 65 66} 67```### 前提・実現したいこと 68 69 70### 試したこと 71 72検証などで確認しましたがメニューバーのnarginなどは見当たりませんでした。
回答1件
0
ベストアンサー
CSS
1.m-gnavi { 2 list-style: none; 3 max-width: 1170px; 4 margin: 0 auto; 5 background-color:rgba(49, 84, 90, 1); 6 padding: 0; /* ADD */ 7}
投稿2020/09/04 15:57
総合スコア69606
回答ありがとうございます。無事修正できました。もしよければ、なぜ治ったのかも教えていただけると幸いです。
「ブラウザ デフォルト スタイル」で検索してみてください。
理由も分かりました。ありがとうございました。
あなたの回答
tips
プレビュー
