Toro_Unit

カテゴリー: HTML

  • 今更ながら、CSSテクニックまとめ。(1)

    まぁ備忘録ですからね。CSSで使えるテクニックのまとめです。

    Clearfix

    [css]
    .clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
    }

    /* Win IE7 */
    *:first-child+html .clearfix
    {
    height: 1%;
    }
    /* End Win IE7 */

    /* Win IE6 \*/
    * html .clearfix
    {
    height: 1%;
    }
    /* End Win IE6 */

    /* Mac IE\*//*/
    .clearfix
    {
    display: inline-table;
    }
    /* End Mac IE */
    [/css]
    http://blog.d-spica.com/entry/070307clearfix.html

    cssでのロールオーバー実装と背景画像によるテキスト置換。

    XHTML
    [xhtml]
    <li id="bt1" class="menu_button"><a href="preview.php">preview</a></li>
    [/xhtml]
    CSS
    [css]
    .menu_button a {
    overflow:hidden;
    height:50px;
    text-indent:-9999px;
    display:block;
    }
    .menu_button:hover {
    background-position:-230px;
    }
    #bt1 {
    background-image:url(../images/menu_01.gif);
    }
    [/css]
    （Crude　Music Web Site　で使いますのでリニューアル後にでも見てください。）