header部分とnaviの位置の調整がうまくいきません。

締切済

質問者：SC.ハーロック
質問日時：2021/11/04 11:28
回答数：2件

下記のようにHTMLコードがあって、header部分の下にnaviを配置するのですが、ブラウザを最大化するとheader部分の底辺とnaviの底辺がそろってしまいます。
また、ブラウザのサイズの変更に合わせてheader部分のサイズも変更するのですが、naviがついていきません。
やりたいことは、まずブラウザを最大化したときにheader部分の底辺の下にnaviがつくようにしたい。
次に、ブラウザのサイズ変更に合わせてサイズ変更するheader部分の底辺に合わせて、naviの位置が変わるようにしたい。
以上を、cssで記述する場合、どのようなコードを追加したらよいでしょうか。
いろいろ試してみましたがうまくいきません。
どなたか、ご教授ください。

【HTML】
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>**************</title>
<link rel = "stylesheet" href = 'shared/css/index.css'/>
<link rel = "stylesheet" href = 'shared/css/setting.css'/>
</head>
<body>
<div id = "container">
<header id = "header">
<img class = "top-logo" src = 'shared/images/logo.png' width="201" height="71">
<div class = "catchcopy">Innovation in new distribution architectures</div>
<video src='shared/images/top.mp4' autoplay playsinline muted loop></video>
</header>
<nav id = "menubar">
<ul class = "inner">
<li>
<a class = "name">**********</a>
</li>
<li class="list-border"></li>
<li>
<a class = "nav-link"></a>
</li>
<li class="list-border"></li>
<li>
<a class = "nav-link"></a>
</li>
<li class="list-border"></li>
<li>
<a class = "nav-link"></a>
</li>
<li class="list-border"></li>
<li>
<a href = "app/login_form.php" class = "nav-link active">ログイン</a>
</li>
<div class = "clear"></div>
</ul>
</nav>
ーーーーー<続く＞

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2021/11/04 14:26

No1です。

＞これでお分かりになりますでしょうか。
わかりません。

ご提示のCSSとHTMLのみでご自分で試してみていますか？
ご質問のような事象は起こりません。
（サイズの幅に制限がかかるとか、隙間が空くことは発生しますけれど‥）

ですので、No1の回答に変わりはありません。
そのままにはしたくない何かがあるのでしょうけれど、それに関しては何らの説明もないので、第三者にはわかりません。
なので、「CSSを全部外せば直る」という回答しかないですね。

- 1
- 件

通報する

この回答へのお礼

分かりづらくてすみません。
現象の説明で画像を捕捉にあげようとしましたが、うまくいきませんでした。
せっかくご丁寧に説明していただいたのですが、もう少し自分で探してみようと思います。
ありがとうございました。

通報する

お礼日時：2021/11/04 15:51

No.1

回答者： fujillin
回答日時：2021/11/04 11:47

こんにちは

＞ブラウザを最大化するとheader部分の底辺とnaviの底辺がそろってしまいます。
ご提示のHTMLだけならそのようなことは起こりません。
現状のCSSが不明ですが、そのようになるように指定をしているものと想像されます。

一旦、設定なさっているCSSを外してみれば、navが常にheaderの下に表示されることがわかると思います。
ただし、ブラウザのデフォルトマージンによって、headerとnavの間に隙間ができる可能性はあります。
その隙間をなくしたい場合は、margin:0 を指定しておくことで、隙間はなくせるはずと思います。

- 1
- 件

通報する

この回答へのお礼

ありがとうございます。
関係するであろうCSSコードは以下の通りです。
これでお分かりになりますでしょうか。
【CSS】
#header {
width: 100%;
height: 50vh;
}
#menubar {
background-image: -ms-linear-gradient(top, #4a77ff 0%, #4169e1 100%);
background-image: -moz-linear-gradient(top, #4a77ff 0%, #4169e1 100%);
background-image: -o-linear-gradient(top, #4a77ff 0%, #4169e1 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4a77ff), color-stop(1, #4169e1));
background-image: -webkit-linear-gradient(top, #4a77ff 0%, #4169e1 100%);
background-image: linear-gradient(to bottom, #4a77ff 0%, #4169e1 100%);
margin-left: auto;
margin-right: auto;
max-width: 1200px;
z-index: 10;
text-align: center;
}
.inner {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 0 auto;
padding-left: 1% !important;
padding-right: 1% !important;
}