質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1065閲覧

重なってしまう要素を直したいです。html5・CSS3

tt_360

総合スコア29

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/04/14 01:39

headerのスライドショーの要素が、同じheader内のバナー要素とmain要素に重なってしまうのを直したいのです。
バナーは増えたり減ったりする予定なので、いちいちCSSをの高さを変更しなくてもいいようにしたいのですが、現状はバナーが増えたり減ったりする度に、

main内の

1#main{ 2 display: -webkit-flex; 3 display: flex; 4 max-width: 1080px; 5 margin: 0 auto; 6 padding-top:600px; 7} 8 9@media screen and (max-width:750px) { 10 #main{ 11 display:block; 12 padding-top:400px; 13 } 14}

上のpadding-top:○○px;をPCスマホ両方変更しないと要素が重なってしまいます。
これを直す方法を教えて欲しいですm(_ _)m

html

1<!doctype html> 2 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 7 <meta name="format-detection" content="telephone=no"> 8 <meta name="Description" content="" /> 9 <meta name="Keywords" content="" /> 10 <link rel="stylesheet" href="css/main.css"> 11 <link rel="icon" href="favicon.ico"> 12 <!--スライドショーstart--> 13 <link rel="stylesheet" type="text/css" href="css/screen.css" media="all" /> 14 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 15 <script type="text/javascript"> 16 $(function(){ 17 var setId = '#slideshow'; 18 var fadeTime = 500; 19 var delayTime = 2500; 20 21 $(setId + ' div div').each(function(i){ 22 $(this).attr('id','view' + (i + 1).toString()); 23 $(setId + ' div div').css({zIndex:'98',opacity:'0'}); 24 $(setId + ' div div:first').css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime); 25 }); 26 27 $(setId + ' ul li').click(function(){ 28 clearInterval(setTimer); 29 30 var connectCont = $(setId + ' ul li').index(this); 31 var showCont = connectCont+1; 32 33 $(setId + ' div div#view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'})}); 34 $(setId + ' div div#view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'})}); 35 36 $(this).addClass('active'); 37 $(this).siblings().removeClass('active'); 38 39 timer(); 40 41 }); 42 43 $(setId + ' ul li:not(.active)').hover(function(){ 44 $(this).stop().animate({opacity:'1'},200); 45 },function(){ 46 $(this).stop().animate({opacity:'0.5'},200); 47 }); 48 49 $(setId + ' ul li').css({opacity:'0.5'}); 50 $(setId + ' ul li:first').addClass('active'); 51 52 timer(); 53 54 function timer() { 55 setTimer = setInterval(function(){ 56 $('li.active').each(function(){ 57 var listLengh = $(setId + ' ul li').length; 58 var listIndex = $(setId + ' ul li').index(this); 59 var listCount = listIndex+1; 60 61 if(listLengh == listCount){ 62 $(setId + ' ul li:first').click() 63 } else { 64 $(this).next('li').click(); 65 }; 66 }); 67 },delayTime); 68 }; 69 70 // hoverでスライド動作ストップ 71 $(setId).mouseover(function(){ 72 clearInterval(setTimer); 73 }).mousemove(function(){ 74 clearInterval(setTimer); 75 }).mouseout(function(){ 76 timer(); 77 }); 78 79 }); 80 </script> 81 <!--スライドショーend--> 82<title>無題ドキュメント</title> 83</head> 84 85<body> 86<div id="wrapper"> 87<header id="header"> 88 89 <div id="container"> 90 バナー<br> 91 バナー<br> 92 <!--スライドショーstart--> 93 <div id="slideshow"> 94 95 <div class="slideshow1"> 96 <div class="slideshow1-1"><a href="#"><img src="img/photo01.jpg" width="100%" alt="" /></a></div> 97 <div class="slideshow1-1"><a href="#"><img src="img/photo02.jpg" width="100%" alt="" /></a></div> 98 <div class="slideshow1-1"><a href="#"><img src="img/photo03.jpg" width="100%" alt="" /></a></div> 99 <div class="slideshow1-1"><a href="#"><img src="img/photo04.jpg" width="100%" alt="" /></a></div> 100 </div> 101 <!--サムネイルstart--> 102 <div class="thumbnail"> 103 <ul> 104 <li><a href="javascript:void(0);"><img src="img/photo01.jpg" width="100" height="75" alt="" /></a></li> 105 <li><a href="javascript:void(0);"><img src="img/photo02.jpg" width="100" height="75" alt="" /></a></li> 106 <li><a href="javascript:void(0);"><img src="img/photo03.jpg" width="100" height="75" alt="" /></a></li> 107 <li><a href="javascript:void(0);"><img src="img/photo04.jpg" width="100" height="75" alt="" /></a></li> 108 </ul> 109 </div> 110 <!--サムネイルend--> 111 </div> 112 <!--/#slideshow--> 113 114 </div> 115 <!--/#container--> 116 <!--スライドショーeng--> 117</header> 118<main id="main"> 119 <article id="article"> 120 main 121 </article> 122 <aside id="aside"> 123 <nav id="nav">nav</nav> 124 side 125 </aside> 126</main> 127 <footer id="footer"> 128 footer</footer> 129</div> 130</body> 131</html> 132

main.css

1@charset "utf-8"; 2/* CSS Document */ 3 4 5/*サイト全体の指定*/ 6 7body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote{margin:0;padding:0;} 8h1,h2,h3,h4,h5{font-size:100%;} 9ol,ul{list-style:none;} 10 11body{ 12 font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; 13 font-weight: 400; 14 font-style: normal; 15 width:100%; 16 text-align: center; 17 background-color:#f0f0f0; 18 margin: 0px; 19 color: #6a696c; 20 font-size: 1em; 21 line-height: 1em; 22 height: 100%; 23 letter-spacing: 0.2em; 24} 25 26a:link {color:#6a696c; text-decoration: underline;} /*未訪問のリンクの色*/ 27a:visited {color:#6a696c;} /*訪問済みのリンクの色*/ 28a:hover {opacity: 0.5;} /*カーソルが乗っているリンクの色*/ 29a:active {opacity: 0.5;} /*クリック中のリンクの色*/ 30 31#wrapper { 32 width: 100%; 33 margin: 0 auto; 34} 35 36/*ヘッダー*************************************/ 37 38#header{ 39 width: 100%; 40 margin-bottom: 5px; 41 height: 50px; 42 background: #faa; 43} 44 45 46/*スライドショー*/ 47 48#container { 49 width: 100%; 50} 51 52#slideshow { 53 margin: 0 auto; 54 width: 100%; 55} 56 57#slideshow .slideshow1 { 58 width: 100vw; 59 height: 500px; 60 overflow: hidden; 61 position: relative; 62} 63 64@media screen and (max-width:750px) { 65 #slideshow .slideshow1{ 66 height: 300px; 67 } 68} 69 70#slideshow .slideshow1-1 { 71 top: 0; 72 left: 0; 73 position: absolute; 74} 75 76 77div.thumbnail{ 78 margin-top:5px; 79} 80 81#slideshow ul { 82 width: 420px; 83 margin: 0 auto; 84} 85 86#slideshow ul li { 87 width: 100px; 88 float: left; 89 display: inline; 90 margin-right: 5px; 91} 92 93#slideshow .active { 94 filter:alpha(opacity=100)!important; 95 -moz-opacity: 1!important; 96 opacity: 1!important; 97} 98 99 100/* ======================================= 101 ClearFixElements 102======================================= */ 103#slideshow ul:after { 104 content: "."; 105 height: 0; 106 clear: both; 107 display: block; 108 visibility: hidden; 109} 110 111#slideshow ul { 112 display: inline-block; 113 overflow: hidden; 114} 115 116 117 118 119/* ======================================= 120 ClearFixElements 121======================================= */ 122#slideshow02 ul:after { 123 content: "."; 124 height: 0; 125 clear: both; 126 display: block; 127 visibility: hidden; 128} 129 130#slideshow02 ul { 131 display: inline-block; 132 overflow: hidden; 133} 134 135 136/*メイン全体***********************************/ 137 138#main{ 139 display: -webkit-flex; 140 display: flex; 141 max-width: 1080px; 142 margin: 0 auto; 143 padding-top:550px; 144} 145 146@media screen and (max-width:750px) { 147 #main{ 148 display:block; 149 padding-top:350px; 150 } 151} 152 153/*左カラム************************************/ 154 155#article{ 156 -webkit-flex: 1; 157 flex: 1; 158 vertical-align: top; 159 text-align: left; 160 margin-bottom: 5px; 161 margin-right: 5px; 162 height: 100px; 163 background: #afa; 164} 165 166/*右カラム************************************/ 167 168#aside{ 169 display: table-cell; 170 vertical-align: top; 171 text-align: left; 172 width: 300px; 173 margin-bottom: 5px; 174 height: 100px; 175 background: #aaf; 176 177} 178 179/*ナビ*/ 180 181#nav{ 182} 183 184 185 186@media screen and (max-width:750px) { 187 #nav{ 188 display:none; 189 } 190} 191 192 193/*フッダー************************************/ 194 195#footer{ 196 width: 100%; 197 height: 50px; 198 background: #ffa; 199} 200

screen

1@charset "utf-8"; 2 3/* ---------------------------------------------- 4 5 import CSS 6 7---------------------------------------------- */ 8 9 10/* IMPORT 11---------------------------------------------- */ 12@import url("base.css"); 13@import url("common.css");

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

このような形でいかがでしょうか?

HTML

1<header id="header"> 2 <div class="header-inner"><!-- このタグを追加 --> 3 バナー<br> 4 バナー<br> 5 </div> 6 <div id="container"> 7 <!--スライドショーstart--> 8 <div id="slideshow"> 9 10 <div class="slideshow1"> 11 <div class="slideshow1-1"><a href="#"><img src="img/photo01.jpg" width="100%" alt="" /></a></div> 12 <div class="slideshow1-1"><a href="#"><img src="img/photo02.jpg" width="100%" alt="" /></a></div> 13 <div class="slideshow1-1"><a href="#"><img src="img/photo03.jpg" width="100%" alt="" /></a></div> 14 <div class="slideshow1-1"><a href="#"><img src="img/photo04.jpg" width="100%" alt="" /></a></div> 15 </div> 16 <!--サムネイルstart--> 17 <div class="thumbnail"> 18 <ul> 19 <li><a href="javascript:void(0);"><img src="img/photo01.jpg" width="100" height="75" alt="" /></a></li> 20 <li><a href="javascript:void(0);"><img src="img/photo02.jpg" width="100" height="75" alt="" /></a></li> 21 <li><a href="javascript:void(0);"><img src="img/photo03.jpg" width="100" height="75" alt="" /></a></li> 22 <li><a href="javascript:void(0);"><img src="img/photo04.jpg" width="100" height="75" alt="" /></a></li> 23 </ul> 24 </div> 25 <!--サムネイルend--> 26 </div> 27 <!--/#slideshow--> 28 29 </div> 30 <!--/#container--> 31 <!--スライドショーeng--> 32</header> 33

CSS

1#header{ 2 width: 100%; 3 margin-bottom: 5px; 4 /* height: 50px; */ 5 /* background: #faa; */ 6} 7#header .header-inner{ 8 height: 50px; 9 background: #faa; 10}

投稿2020/04/14 14:04

new1ro

総合スコア4528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tt_360

2020/04/15 00:01

すごいです!!!感動しました(T_T) 助かりましたm(_ _)m ありがとうございます♪
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問