カテゴリー: HTML/CSS

z-indexが効かないとき

Posted on by masomi79

cssとjsで作ったトップメニューのプルダウンがどうしても下にあるdivの後ろに隠れてしまって表示されない。。。。いろいろ調べたところz-indexが効かない原因はこんな感じ

  • 親要素がposition:static；もしくはpositionが設定されてない
  • ほかにz-indexが設定されている
  • overflow:hidden;が設定されている

今回の原因は3でした。
ちなみにoverflow属性はコンテンツがdivに入りきらないときにどうするかを指定するもの
デフォルト値はvisibleです。hiddenははみ出た部分をバッサリ非表示にします。

こんなんで2,3時間。。。

角丸半透明のdivを作る

Posted on by masomi79 
div#header-info-kadomaru{
border-radius: 20px;         /* CSS3 */
-moz-border-radius: 20px;    /* Firefox */
-webkit-border-radius: 20px; /* Safari,Chrome */
background-color: #696969;
filter: alpha(opacity=20); /* IE */
opacity: 0.2; /* Chrome, Firefox, Safari, Opera, */
padding: 20px;
}

div の上下の間隔が空いてしまう

Posted on by masomi79

上下に並べたBOXの間隔がどうしても2pxくらい空いてしまう。。。
ちなみに上のBoxにはサイズいっぱいの画像が入っています。
margin, paddingはもちろんどちらも0px

div#up{
line-height:0;
}
div#under{
}

とLine-heightを0に指定すると良いようです。

CSS　BOXカラムを指定する

Posted on by masomi79

HTML

<div id='field'>
<div id='container'>
<div id='box1'>
</div>
<div id='box2'>
</div>
<div id='box3'>
</div>
</div>
</div>

Stylesheet

#field{
background-color:#ffffff;
width:900px;
margin:auto;
}
#container{
display: -webkit-box;/* Safari,Chrome */
　　 display: -moz-box;/* firefox */
}
#box1{
width:250px;
margin:25px
}
#box2{
width:250px;
margin:25px
}
#box3{
width:250px;
margin:25px
}

IE。。。

javascriptとCSSで背景色が入れ替わるナビゲーションを作る

Posted on by masomi79

Javascriptを＜header＞部分に記載

<script type="text/javascript">
　　<!--
function changeBackgroundColor( id, color){
　　document . getElementById(id) . style . backgroundColor = color;
}
　　 -->
</script>

HTML部分

<nav id="yokomenu" style="background-color:lightgray;">
<p id="cbc01" style="background-color:lightblue;color:black;height:20px;padding:10px;
margin:0px;" onMouseOver="changeBackgroundColor( 'cbc01', 'lightgreen')"
onmouseout="changeBackgroundColor( 'cbc01', 'lightblue')">
<a href="http://quichua.sakura.ne.jp/">Home</a>
</p>
<p id="cbc02" style="background-color:lightblue;color:black;height:20px;padding:10px;
margin:0px;" onMouseOver="changeBackgroundColor( 'cbc02', 'lightgreen')"
onmouseout="changeBackgroundColor( 'cbc02', 'lightblue')">
<a href="/">contact</a>
</p>
<p id="cbc03" style="background-color:lightblue;color:black;height:20px;padding:10px;
margin:0px;" onMouseOver="changeBackgroundColor( 'cbc03', 'lightgreen')"
onmouseout="changeBackgroundColor( 'cbc03', 'lightblue')">
<a href="http://d.hatena.ne.jp/masomi79/">blog</a>
</p>
</nav>