タグ

*CSSと<li>に関するjetta_swinginのブックマーク (6)

  • IE8リストマーク(list-style-type)の■と●がおかしいのを直す方法 - develo.org

    HTMLCSSJavascript、デザイン、絵を描いたり。

    IE8リストマーク(list-style-type)の■と●がおかしいのを直す方法 - develo.org
    jetta_swingin
    jetta_swingin 2011/07/19
    IE8の<li>要素のマークが、IE6やIE7と比べて小さく表示されるのをごまかす方法2案。doctypeをtransitionalにする手もあるが、標準から離れていく・・。
  • 覚えて良かったCSSテクニック « zaru blog

    ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅:190px マージン:15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7

  • ページ送りのサンプル4種+2

    ず、随分間が空いてしまった・・・何て言う現実。 気付けば冬間近ですね。 久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。 ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。 サンプルサイトを見る サンプルをダウンロード 地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。 今回作っておきたかったのは、センタリングさせたページ送りっす。 とても似たようなエントリーが有るので、下記も参考にしてみるといいかと。 ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。 不特定の数の横に並ぶブロック要素をセンタリングさせる | CSS-EBLOG 各サンプル共通で以下のスタイルが当たってます。 #main ul, #main ul li { marg

    ページ送りのサンプル4種+2
    jetta_swingin
    jetta_swingin 2009/11/11
    ページング、ページネーション、目次のHTML、CSS詳細付きの作例。
  • 【CSS】CSSで実装するちょっと凝ったパンくずリスト | バシャログ。

    地味なパーツながら実は便利。そのためコーディングをする機会も多いと思われるのが「パンくずリスト」です。 シンプルなコーディングでちょっと気の利いた「パンくずリスト」を実現する方法をご紹介します。 パンくずリストの XHTML のサンプルは以下です。とてもシンプルです。 <ol id="topicPath"> <li class="home"><a href="hoge">ホーム</a></li> <li><a href="hoge">アニメ</a></li> <li><a href="hoge">ガンバの冒険</a></li> <li><em>ボーボ</em></li> </ol> サンプル1 とてもシンプルなパンくずリスト とてもシンプルなパンくずリストのサンプルです。 ホーム アニメ ガンバの冒険 ボーボ CSS はこちら ol#topicPath { margin: 20px 0;

    【CSS】CSSで実装するちょっと凝ったパンくずリスト | バシャログ。
  • [CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス

    実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices

  • a要素が2行になった場合に背景下にテキストが来ないように。

    目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。 そういえば、web creatorsの5月号(たぶん)に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか!?読んでないーorz あと、7月号(Vol.91)にちょろっと記事書いてるので良ければ買ってくだしあ。 タイトルがa要素になってますが、インライン要素でもいいです。 背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。 タイトルって難しいですねorz さて、時間もあまりないので題に。 サンプルページを見る 以前に書いた、ユーザーの動き。にもあるように、リストのマーカー部分をクリックして、クリック出来ない的な人が居たりするってのもありますが、li要素にbackgroundの指定をしてpad

    a要素が2行になった場合に背景下にテキストが来ないように。
  • 1