リストのマーカーを二つ設定する

リストの項目に二つ背景画像を表示したい時は

.mobile-nav-1 li{
background: url(../img/mark.png) , url(../img/arrow.png) ;
background-repeat: no-repeat, no-repeat;
background-position: top 30px left 20px, top 30px right 20px;
}

とすると、どちらも場所指定して表示できます。

z-indexが効かないとき

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

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

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

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

角丸半透明のdivを作る

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 の上下の間隔が空いてしまう

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

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

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

CSS BOXカラムを指定する

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で背景色が入れ替わるナビゲーションを作る

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>

<img src='hogehoge.jpg' style=' border:1px #9b9b9b solid; padding:3px; '>