以下のhtml、cssのコードで問題があります。
わかっている人にしたら基本的な問題なのだと思いますが、いつになっても解決しないので質問させてください。
問題点は二つです。
１、見たままなのですが、tabboxの部分が上に重なってしまい上手く表示されません。
２、わかりにくい箇所ですが、ボタンの部分がhoverするとき、外側の部分(marginの部分)にカーソルを持っていくだけで、hoverが発生してしまう。
１に関して、distinctiveのposition:absoluteに問題があると思うのですが、これを消すとdistinctive-leftとrightの部分が消えてしまい緑の帯のような表現が出来なくなってしまうので出来ることなら消したくありません。
distinctive-left、center、rightを一つのdivにまとめてしまうことも考えたのですが、レスポンシブの関係でまとめたくはありません。
制限があり、コードも長くわかりづらいとは思いますがよろしくお願いします。
(追記)ウインドウの幅を狭くしていくと、ボタンがずれる瞬間があるのでこれも直したいです。(追記終了)
html
<!DOCTYPE html> <html lang="ia"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript"> function ChangeTab(tabname) { // 全部消す document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; // 指定箇所のみ表示 document.getElementById(tabname).style.display = 'block'; } </script> </head> <body> <div id="mainContents"> <div id="distinctive"> <div id="distinctive-left"></div> <div id="distinctive-main"> <h2>タイトル</h2> <ul id="distinctive-first"> <li> <h3>見出し1</h3> <p>あああああああああああああああああああああああああああああああああああああああああああ</p> </li> <li> <h3>見出し2</h3> <p>あああああああああああああああああああああああああああああああああああああああああああ</p> </li> <li> <h3>見出し3</h3> <p>あああああああああああああああああああああああああああああああああああああああああああ</p> </li> </ul> <ul id="distinctive-second"> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li> <li><a href="#">ボタン3</a></li> </ul> </div> <div id="distinctive-right"></div> <div id="distinctive-bottomleft"></div> <div id="distinctive-bottomcenter"></div> <div id="distinctive-bottomright"></div> </div> <div class="tabbox"> <p class="tabs"> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">タブ1</a> <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">タブ2</a> <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">タブ3</a> </p> <div id="tab1" class="tab"> <p>(タブ1の中身。何でも記述できます。)</p> </div> <div id="tab2" class="tab"> <p>(タブ2の中身。HTMLタグも記述可能です。)</p> </div> <div id="tab3" class="tab"> <p>(タブ3の中身。いくつでも増やせます。)</p> </div> </div> </div> <script type="text/javascript"> // デフォルトのタブを選択 ChangeTab('tab1'); // </script> </body> </html>
css
*{ margin: 0px; padding: 0px; } body{ background: gray; } #mainContents { overflow:hidden; width: 100%; max-width: 960px; height: auto; margin: 0 auto; background-color: rgb(255,255,255); } #distinctive { position: absolute; } #distinctive-left { background: #aacf53; margin-top: 10px; margin-left:-20px; width: 20px; height: 237px; float: left; } #distinctive-main { background: #aacf53; margin-top: 10px; color: #fff; text-align: center; width: 100%; max-width: 960px; float: left; } #distinctive-main h2 { margin: 10px 0px 10px 0px; padding-top: 10px; text-shadow: 1px 1px 3px #000000; } #distinctive-first li { position: relative; float: left; width: 33%; text-align: center; list-style: none; } #distinctive-first li:nth-child(2) { border-left: 1px dotted #ffffff; border-right: 1px dotted #ffffff; } #distinctive-main h3 { margin: 10px 0px 10px 0px; text-shadow: 1px 1px 3px #000000; } #distinctive p { display: block; margin: 10px 20px 10px 20px; } #distinctive-second li { position: relative; float: left; width: 33.33%; text-align: center; list-style: none; } #distinctive-second li a{ margin-top: 20px; margin-bottom: 20px; margin-left: 25%; display: block; padding: 16px 0; width: 50%; background-image: linear-gradient(180deg,#2d5434 0%,#29905e 100%); color: #ffffff; font-size: 14px; font-weight: normal; line-height: 1; text-decoration: none; text-shadow: 1px 1px 3px #000000; } #distinctive-second > li:hover > a{ background-image: linear-gradient(180deg,#29905e 0%,#2d5434 100%); } #distinctive-right { background: #aacf53; margin-top: 10px; margin-right:-20px; width: 20px; height: 237px; float: left; } #distinctive-bottomleft { clear: both; background-image: linear-gradient(26.565051145046deg,transparent 49%,#86aa30 50%,#86aa30 100%); margin-left:-20px; left: 0px; float: left; width: 20px; height: 10px; } #distinctive-bottomcenter { background-image: linear-gradient(180deg,#969696 0%,#ffffff 100%); float: left; width: 100%; height: 10px; } #distinctive-bottomright { background-image: linear-gradient(153.434948694794deg,#86aa30 49%,transparent 50%,transparent 100%); margin-right:-20px; right: 0px; float: left; width: 20px; height: 10px; } /* 表示領域全体 */ div.tabbox { margin: 0px; padding: 0px; width: 400px; } /* タブ部分 */ p.tabs { margin: 0px; padding: 0px; } p.tabs a { display: block; width: 5em; float: left; margin: 0px 1px 0px 0px; padding: 3px; text-align: center; border-radius: 12px 12px 0px 0px; /* 角を丸くする */ } p.tabs a.tab1 { background-color: blue; color: white; } p.tabs a.tab2 { background-color: #aaaa00; color:white; } p.tabs a.tab3 { background-color: red; color: white; } p.tabs a:hover { color: yellow; } /* タブ中身のボックス */ div.tab { height: 150px; overflow: auto; clear: left; } div#tab1 { border: 2px solid blue; background-color: #ccffff; } div#tab2 { border: 2px solid #aaaa00; background-color: #ffffcc; } div#tab3 { border: 2px solid red; background-color: #ffcccc; } div.tab p { margin: 0.5em; }
まだ回答がついていません
会員登録して回答してみよう
