質問編集履歴

1 質問の追加

tacchan

tacchan score 60

2016/02/22 21:06  投稿

position:absoluteを使うと次のブロックが重なってしまう
以下のhtml、cssのコードで問題があります。
わかっている人にしたら基本的な問題なのだと思いますが、いつになっても解決しないので質問させてください。
問題点は二つです。
1、見たままなのですが、tabboxの部分が上に重なってしまい上手く表示されません。
2、わかりにくい箇所ですが、ボタンの部分がhoverするとき、外側の部分(marginの部分)にカーソルを持っていくだけで、hoverが発生してしまう。
1に関して、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;
}
```
  • HTML

    23416 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16689 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る