下記のように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>
ーーーーー<続く>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
No1です。
>これでお分かりになりますでしょうか。
わかりません。
ご提示のCSSとHTMLのみでご自分で試してみていますか?
ご質問のような事象は起こりません。
(サイズの幅に制限がかかるとか、隙間が空くことは発生しますけれど‥)
ですので、No1の回答に変わりはありません。
そのままにはしたくない何かがあるのでしょうけれど、それに関しては何らの説明もないので、第三者にはわかりません。
なので、「CSSを全部外せば直る」という回答しかないですね。
分かりづらくてすみません。
現象の説明で画像を捕捉にあげようとしましたが、うまくいきませんでした。
せっかくご丁寧に説明していただいたのですが、もう少し自分で探してみようと思います。
ありがとうございました。
No.1
- 回答日時:
こんにちは
>ブラウザを最大化するとheader部分の底辺とnaviの底辺がそろってしまいます。
ご提示のHTMLだけならそのようなことは起こりません。
現状のCSSが不明ですが、そのようになるように指定をしているものと想像されます。
一旦、設定なさっているCSSを外してみれば、navが常にheaderの下に表示されることがわかると思います。
ただし、ブラウザのデフォルトマージンによって、headerとnavの間に隙間ができる可能性はあります。
その隙間をなくしたい場合は、margin:0 を指定しておくことで、隙間はなくせるはずと思います。
ありがとうございます。
関係するであろう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;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
divタグ内のコンテンツが重なっ...
-
<li>で改行する横並びのメニュー
-
ulとliで囲った文字の一部を変...
-
cssのみでメガメニューの作成に...
-
HTML5のfooterに見出しを付けて...
-
画像を縦に4つ並べたい場合
-
ulタグやliタグの中でbrタグ...
-
疑似クラス :activeが効きません
-
【至急】ul li 行間調整ができ...
-
li 長さ指定
-
<table>の高さ固定。情報増加時...
-
【CSS】メニュー上部に固定させ...
-
IEで<td>の全角を有効にする方法
-
ボタンを横に並べて表示させる方法
-
3番目のBoxだけずれる
-
html <ul></ul>の並びで一行空...
-
(HP作成)メニューバーのプル...
-
HTMLで組織図を作成する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
html <li>の中の文字一部に色を...
-
CSS質問:大手サイトを見ると何...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報