[B! *css] imount69のブックマーク

JavaScriptを使わずCSSのみでシンプルなツールチップ実装:phpspot開発日誌

Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#fffff

imount69 2008/04/01

使ってみたい

*css
tooltip

リンク

画像とかの横にあるテキストを上下中央に

←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。デモページ画像とかの横にあるテキストを上下中央にする。のデモページヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;

imount69 2008/03/17

vertical-align +α　って事で。

*css

リンク

[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス

CSS Globeのエントリーから、スタイルシートのレイアウトで生じる問題を解決する８つの1行のスタイルシートの紹介です。 8 Premium One Line Css Tips 縦方向のセンタリング高さが固定されている場合、「line-height」を使用して、縦方向のセンタリングが実装できます。デモページ <textarea name="code" class="css" cols="60" rows="5"> line-height:24px; </textarea>

imount69 2008/03/13

リンク

[CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス

Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel

imount69 2008/03/05

*css

リンク

CSSのみでクールな階層メニュー作成サンプル:phpspot開発日誌

Stu Nicholls | CSSplay | Cross browser flyout menu examples using only css CSSのみでクールな階層メニュー作成サンプル。次のようなカッコいい階層メニューのサンプルが公開されています。クールなのでそのままサイトに組み込んで流用できそう。 IE5.5 , IE6, IE7, Firefox, Opera 等で動作。関連エントリ CSSでちょっと変わっているピル風の形をしたナビゲーションを作成セクシーに動作するスライドメニューバー実装JSライブラリクールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」 CSSのクールなメニューをオンラインで簡単生成「CSS Menu Generator」