ヘッダーの下にトップ画像が被らない（入らない）ようにするには

前提・実現したいこと

コーディング初心者です。
ヘッダー（グローバルナビゲーション）の下になぜかトップ画像の上部が被ってしまいます。
解決方法を探しているのですが一向に見つからず、、
どなたかご教授いただけないでしょうか。

レスポンシブ対応のテンプレを書き換えながら作っているので、おかしい部分が多々あるかと思いますが、お願いいたします。

該当のソースコード

html
1<body>
2  <div id="wrapper">
3	  <main>
4	  
5    <header>
6       <div class="header1">
7		  <div class="logo">
8		  <a href="index.html"><img src="images/logo_header.png" alt="000" width="70px"></a>
9		  </div>
10		   <div class="spMenuWrap">
11			<div id="spMenu"><span id="navBtn"><span id="navBtnIcon"></span></span></div>
12		   </div>
13		     <ul class="header_sns">
14                <li><a href="https://twitter.com/seisyun_kaleido" target="_blank"><img src="images/icon_tw.png" alt="twitter" height="30px"></a></li>
15			    <li><a href="http://www.humax-cinema.co.jp/cinema/ikebukuro/" target="_blank"><img src="images/button_theaterinfo.png" alt="劇場情報" height="30px"></a></li>
16		     </ul>
17        <div class="clear"></div>
18	   </div>
19
20		<div class="header2">
21			<ul>
22				<li><a href="#intro">INTRODUCTION</a></li>
23				<li><a href="000.html">000</a></li>
24				<li><a href="111.html">111</a></li>
25				<li><a href="222.html">222</a></li>
26				<li><a href=".html"><font color="#DCDCDC">TRAILER</font></a></li>
27				<li><a href="tickets.html">TICKETS</a></li>
28				<li><a href="goods.html">GOODS</a></li>
29			</ul>
30		</div>
31			<section class="header clearfix"></section>
32		</div>
33	</div><!-- /.inner -->
34</header>
35
36<!--Content-->
37<main>
38<div id="top" class="wrapper">
39	
40<section class="top top_visual">
41    <div class="only_pc" style="position:relative;">
42          <img src="images/top_visual.png" alt="" width="1280" height="720" class="top top_visual">
43    </div>
44	<div class="only_sp" style="position:relative;">
45        <img src="images/top_visual_sp.png" alt="" width="720" height="960">
46    </div>
47</section>
48

css
1
2
3/*================================================
4 *  ヘッダー
5 ================================================*/
6header {
7	display: block;
8	position: fixed;
9	top: 0;
10	left: 0;
11	width: 1280px;
12	margin: 0 auto;
13	background: #fff;
14	z-index: 100;
15}
16
17
18header:after {
19	content: ""; 
20	display: block;
21	clear: both;
22}
23
24
25.header1 {
26    width: 1280px;
27    height: 72px;
28    margin: 0px auto 0px auto;
29    background-color: #fff;
30}
31
32.logo {
33    position: absolute;
34    top: 10px;
35    left: 50%;
36    margin: 0px 0px 0px -80px;
37}
38
39
40header .header1 class_sns {
41	float: right;
42	height: 0px;
43	font-size: 16px;
44	line-height: 50px;
45	color: #555555;
46}
47
48.header2 {
49    width: 100%;
50    height: 50px;
51    margin: 0px 0px 0px 0px;
52    padding: 14px 0px 14px 0px;
53    background-color: #fff;
54}
55
56.header2 li {
57    position: relative;
58    float: left;
59    margin: 0px 45px 0px 0px;
60    padding: 0px 45px 0px 0px;
61    border-right: solid 1px #000;
62    font-size: 15px;
63    letter-spacing: 0.1em;
64}
65
66
67header  img {
68	vertical-align: middle;
69	
70}
71
72screen and (max-width:768px) {
73	header h1 {
74		padding: 0 0 0 10px;
75	}
76}
77
78.header_sns {
79    float: right;
80    margin: 20px 0px 0px 0px;
81}
82
83.header_sns li {
84    display: inline;
85    margin: 0px 0px 0px 16px;
86}
87
88ul, ol {
89    margin: 0;
90    padding: 0;
91}
92
93li {
94    list-style: none;
95}
96
97
98
99/*================================================
100 *  グローバルナビゲーション
101 ================================================*/
102/* PC用 */
103@media print, screen and (min-width:769px) {
104	div.header2:after {
105		content: '';
106		display: block;
107		clear: both;
108	}
109	div.header2 {
110		display: block !important;
111		float: right;
112	}
113
114	/* 共通 */
115	div.header2 ul {
116		margin: 0;
117		padding: 0;
118	}
119	div.header2 ul li {
120		position: relative;
121		line-height: 50px;
122		margin: 0;
123		padding: 0;
124		list-style: none;
125	}
126	div.header2 ul li a {
127		display: block;
128		background: #fff;
129		color: #000;
130		font-size: 14px;
131		font-weight: bold;
132		text-decoration: none;
133	}
134	div.header2 ul li:hover > a {
135		color: #3A3A3A;
136		background: #FBFFBD;
137	}
138
139	/* 1段目 */
140	div.header2 > ul > li {
141		position: relative;
142		width: 181.5px;
143		float: left;
144		margin: 0;
145		padding: 0;
146		text-align: center;
147		list-style: none;
148		line-height: 50px;
149	}
150	div.header2 > ul > li.subnav a {
151		padding-right: 0 100px;
152	}
153	
154	div.header2 > ul > li.subnav > a:after {
155		position: absolute;
156		content: "";
157		top: 50%;
158		width: 0;
159		height: 0;
160		margin-top: -2.5px;
161		margin-left: 10px;
162		border: 5px solid transparent;
163		border-top-color: #fff;
164	}
165	
166	.header2 li:first-child {
167    margin: 0px 0px 0px 0px;
168    padding: 0px 0px 0px 0px;
169    border-left: solid 1px #000;
170}
171
172	/* 2段目 */
173	div.header2 ul li ul {
174		position: absolute;
175		z-index: 3;
176		top: 100%;
177		left: 0;
178		width: 180px;
179		margin: 0;
180		padding: 0;
181	}
182	div.header2 ul li ul li {
183		overflow: hidden;
184		height: 0;
185		color: #fff;
186		transition: .2s;
187	}
188	div.header2 ul li ul li a {
189		padding: 0 15px;
190		text-align: left;
191		background: #333;
192		font-weight: normal;
193	}
194	div.header2 ul li ul li a:hover {
195		background: #444;
196	}
197	div.header2 ul li:hover > ul > li {
198		overflow: visible;
199		height: 40px;
200		line-height: 40px;
201		border-bottom: 1px solid #555;
202	}
203	div.header2 ul li:hover ul li:last-child {
204		border-bottom: none;
205	}
206	div.header2 > ul > li:last-child > ul {
207		left: -60px;
208	}
209	div.header2 ul li ul li ul:before {
210		position: absolute;
211		content: "";
212		top: 17.5px;
213		left: -20px;
214		width: 0;
215		height: 0;
216		border: 5px solid transparent;
217		border-left-color: #fff;
218	}
219	div.header2 > ul > li:last-child ul li ul:before {
220		position: absolute;
221		content: "";
222		top: 17.5px;
223		left: 200%;
224		margin-left: -20px;
225		border: 5px solid transparent;
226		border-right-color: #fff;
227	}
228
229	/* 3段目 */
230	div.header2 ul li ul li ul {
231		top: 0;
232		left: 100%;
233	}
234	div.header2 ul li ul li ul li {
235		width: 100%;
236	}
237	div.header2 ul li ul li:hover > ul > li {
238		border-bottom: 1px solid #555;
239	}
240	div.header2 > ul > li:last-child > ul li ul {
241		left: -100%;
242	}
243	div.header2 ul li ul li ul li a {
244		background: #444;
245	}
246	div.header2 ul li ul li ul li a:hover {
247		background: #666;
248	}
249
250	/* 3段目 */
251	div.header2 > ul {
252		display: block !important;
253	}
254	#spMenu {
255		display: none;
256	}
257}
258
259/* タブレット・スマートフォン用 */
260@media screen and (max-width:768px) {
261	div.header2 {
262		display: none;
263	}
264	div.header2 ul {
265		margin: 0;
266		padding: 0;
267	}
268	div.header2 > ul {
269		z-index: 2;
270		overflow: auto;
271		position: fixed;
272		top: 50px;
273		right: 0;
274		width: 100%;
275		height: 88%;
276		height: -webkit-calc(100% - 50px);
277		height: calc(100% - 50px);
278	}
279	div.header2 li {
280		position: relative;
281		width: 100%;
282		float: none;
283		margin: 0;
284		text-align: left;
285		list-style: none;
286		border-bottom: 1px solid #333;
287		background: #000;
288	}
289	div.header2 li:first-child {
290		border-top: 0;
291	}
292	div.header2 li:last-child {
293		border-bottom: 0;
294	}
295	div.header2 li a {
296		display: block;
297		padding: 10px 20px;
298		color: #fff;
299		text-decoration: none;
300		background: #000;
301	}
302	nav.gnav li a:hover {
303		color: #fff;
304		background: #222;
305	}
306	nav.gnav ul ul {
307		display: none;
308		position: relative;
309	}
310	div.header2 li li a {
311		box-sizing: border-box;
312		width: 100%;
313		padding: 10px 30px 10px 34px;
314		text-align: left;
315	}
316	div.header2 li li li a {
317		padding: 10px 20px 10px 48px;
318	}
319
320	.spMenuWrap {
321		display: block;
322		position: fixed;
323		top: 0;
324		right: 0;
325		-webkit-transition: all 1s;
326		-moz-transition: all 1s;
327		-ms-transition: all 1s;
328		-o-transition: all 1s;
329		transition: all 1s;
330		background: transparent;
331	}
332
333	#spMenu {
334		position: absolute;
335		top: 10px;
336		right: 10px;
337	}
338
339	#spMenu:hover {
340		cursor: pointer;
341	}
342
343	#navBtn {
344		display: inline-block;
345		position: relative;
346		width: 30px;
347		height: 30px;
348		border-radius: 5%;
349		background: #333;
350	}
351	#navBtnIcon {
352		display: block;
353		position: absolute;
354		top: 50%;
355		left: 50%;
356		width: 14px;
357		height: 2px;
358		margin: -1px 0 0 -7px;
359		background: #f1f1f1;
360		transition: .2s;
361	}
362	#navBtnIcon:before,
363	#navBtnIcon:after {
364		display: block;
365		content: '';
366		position: absolute;
367		top: 50%;
368		left: 0;
369		width: 14px;
370		height: 2px;
371		background: #f1f1f1;
372		transition: 0.3s;
373	}
374	#navBtnIcon:before {
375		margin-top: -6px;
376	}
377	#navBtnIcon:after {
378		margin-top: 4px;
379	}
380	#navBtn .close {
381		background: transparent;
382	}
383	#navBtn .close:before,
384	#navBtn .close:after {
385		margin-top: 0;
386	}
387	#navBtn .close:before {
388		transform: rotate(-45deg);
389		-webkit-transform: rotate(-45deg);
390	}
391	#navBtn .close:after {
392		transform: rotate(-135deg);
393		-webkit-transform: rotate(-135deg);
394	}
395}

試したこと

上の記述にはありませんが、
CSSの最初の方で

.top_visual img {
width: 100%;
height: auto;
padding-top: 150px;
}

というふうに、padding-topを150pxにしたら一応表示はされました。
しかしそうすると、今度はレスポンシブのスマホ版のヘッダーも150pxに固定されてしまいました。

補足情報（FW/ツールのバージョンなど）

dreamweaverで作っています。

x_x

2019/07/10 01:31

<main> が二つ出現していますがあっていますか？

suzuri

2019/07/15 09:31

すみません、気づきませんでした、、ご指摘ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

お節介かもしれないけど数点
・headerとかはそう使わない

で解決策
全くコード的には同じで文字色とかが全部白色のをimgの直前に入れる。

やってみた
画像は白いのに置き換えればよし

おそらく1番簡単で失敗がない。と思う

HTML
1<!--同じなんで略-->
2                <li><a href="tickets.html">TICKETS</a></li>
3                <li><a href="goods.html">GOODS</a></li>
4            </ul>
5        </div>
6            <section class="header clearfix"></section>
7        </div>
8    </div><!-- /.inner -->
9</header>
10<!--ここから-->
11<header class="he2">
12       <div class="header1">
13          <div class="logo">
14          <a href="index.html"><img src="https://placehold.jp/70x70.png" alt="000" width="70px"></a>
15          </div>
16           <div class="spMenuWrap">
17            <div id="spMenu"><span id="navBtn"><span id="navBtnIcon"></span></span></div>
18           </div>
19             <ul class="header_sns">
20                <li><a href="https://twitter.com/seisyun_kaleido" target="_blank"><img src="https://placehold.jp/30x30.png" alt="twitter" height="30px"></a></li>
21                <li><a href="http://www.humax-cinema.co.jp/cinema/ikebukuro/" target="_blank"><img src="https://placehold.jp/30x30.png" alt="劇場情報" height="30px"></a></li>
22             </ul>
23        <div class="clear"></div>
24       </div>
25
26        <div class="header2">
27            <ul>
28                <li><a href="#intro">INTRODUCTION</a></li>
29                <li><a href="000.html">000</a></li>
30                <li><a href="111.html">111</a></li>
31                <li><a href="222.html">222</a></li>
32                <li><a href=".html"><font color="#fff">TRAILER</font></a></li>
33                <li><a href="tickets.html">TICKETS</a></li>
34                <li><a href="goods.html">GOODS</a></li>
35            </ul>
36        </div>
37            <section class="header clearfix"></section>
38        </div>
39    </div><!-- /.inner -->
40</header>
41<!--ここまで追加-->
42<!--Content-->
43<main>
44<div id="top" class="wrapper">
45<!--同じなんで略-->

CSS
1/*同じなんで略*/
2.he2 {
3  position:absolute;
4  z-index:50;
5}
6.he2 div.header2 ul li a {
7  color: #fff;
8}
9.he2 .header2 li {
10  border-right: solid 1px #fff;
11}
12.he2 .header2 li:first-child {
13  border-left: solid 1px #fff;
14}