スポンサーサイト
この広告は60日以上更新がないブログに表示されております。
新しい記事を書くことで広告を消すことができます。
新しい記事を書くことで広告を消すことができます。
テスト 二郎食べたい
あー二郎食べたい！
ヤサイマシマシニンニク！瘕瘕瘕瘕
杻さかな�屮魯鵐弌璽�ー�圓�にぎり瑫ハート瓿バイバイ汴グッド紈ガーン榭ビール擷ジョギング沪ドクロ瞀タコ菀桃�賊�者ハロウィン芡ダンス�吋乾襯尹垢劼蕕瓩�歖涙
cssのfloat解除方法
floatの解除には
.clear {
height: 0;
clear:both;
}
とかのclassをつくって
<div class="clear"></div>
で空のdivで解除していたが、
.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
min-height: 1px;
}
* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}
floatするボックスが入っている親ボックスにclass="clearfix"であてる。
:afterは一番下に適応？されるという命令。
１）まず「.」を生成
２）clearをあてるためblock要素に
３）heightとvisibility
でみえなくする
という事らしい。
その下にある.clearfixはIE6,7用の措置。バグを逆手にとっているよう。
その下の*からはじまるのはMac IE用。
starハックというものらしい。
clearfixで検索するともっと詳しくいっぱい出ます。
margin:0 auto; でも text-align:center; でもなくセンター揃え
通常、幅を指定したdivに「margin:0 auto;」を指定してやれば
ウィンドウのセンターに揃うのですが、IEの6ではセンターになりません。
「text-align:center;」にしてやれば揃うのですが、
その中に含まれるもの全てがセンターになってしまうため、
中のものそれぞれに「text-align:left;」を指定してやらなければなりません。
しかしここに「margin:0 auto;」も「text-align:center;」も使わない
センター揃えの方法が掲載されていました。
センター揃えにしたい大外のdiv(center_div)に以下を設定
#center_div {
position: absolute; /* ウインドウの左上を基準に */
width: 800px; /* divの幅を指定 */
left: 50%; /*divの左端を ページの真ん中へ移動 */
margin-left: -400px; /* divの半分を右に戻す */
}
JUGEMテーマ：インターネット
ウィンドウのセンターに揃うのですが、IEの6ではセンターになりません。
「text-align:center;」にしてやれば揃うのですが、
その中に含まれるもの全てがセンターになってしまうため、
中のものそれぞれに「text-align:left;」を指定してやらなければなりません。
しかしここに「margin:0 auto;」も「text-align:center;」も使わない
センター揃えの方法が掲載されていました。
センター揃えにしたい大外のdiv(center_div)に以下を設定
#center_div {
position: absolute; /* ウインドウの左上を基準に */
width: 800px; /* divの幅を指定 */
left: 50%; /*divの左端を ページの真ん中へ移動 */
margin-left: -400px; /* divの半分を右に戻す */
}
JUGEMテーマ：インターネット
cssでメニューを画像にした場合、a:hoverで一瞬画像が消えるのを防ぐ
cssを使ってメニューを画像に置き換えて、カーソルが乗っかった時に違う画像へ置き換える際、
#menu1 a { /*メニュー1を画像に置き換え */
background-image: url(menu1.gif);
text-decoration: none;
text-indent: -9999px;
width: 200px;
height: 50px;
background-repeat: no-repeat;
display:block;
}
#menu1 a:hover { /* カーソルオンマウス時 */
background-image: url(menu1_o.gif);
background-repeat: no-repeat;
}
とした場合、ブラウザや閲覧環境によっては、オンマウスした瞬間に
一瞬画像が消える（読み込みのタイムラグ？）現象がある。
上の方法では、通常時とオンマウス時で別の画像を用意して呼び出しているが、
通常時とオンマウス時の画像を一つに合体してしまい、オンマウス時に画像の
ポジションをずらすという方法で、タイムラグの発生を防ぐ。
下のケースでは、通常時とオンマウス時の画像を縦に合体した場合。
#menu1 a { /*メニュー1を画像に置き換え */
background-image: url(menu1.gif);
text-decoration: none;
text-indent: -9999px;
width: 200px;
height: 50px;
background-repeat: no-repeat;
display:block;
}
#menu1 a:hover { /* カーソルオンマウス時 */
background-image: url(menu1.gif); /*通常と同じ画像 */
background-position:0 -50px; /* 左辺から0 上辺から-50ピクセル移動させる */
}
横長の合体した画像を作って横にスライドさせる方法もある。
その場合は
#menu1 a:hover { /* カーソルオンマウス時 */
background-image: url(menu1.gif); /*通常と同じ画像 */
background-position:-200 0; /* 左辺から-200 上辺から0移動させる */
}
JUGEMテーマ：インターネット
#menu1 a { /*メニュー1を画像に置き換え */
background-image: url(menu1.gif);
text-decoration: none;
text-indent: -9999px;
width: 200px;
height: 50px;
background-repeat: no-repeat;
display:block;
}
#menu1 a:hover { /* カーソルオンマウス時 */
background-image: url(menu1_o.gif);
background-repeat: no-repeat;
}
とした場合、ブラウザや閲覧環境によっては、オンマウスした瞬間に
一瞬画像が消える（読み込みのタイムラグ？）現象がある。
上の方法では、通常時とオンマウス時で別の画像を用意して呼び出しているが、
通常時とオンマウス時の画像を一つに合体してしまい、オンマウス時に画像の
ポジションをずらすという方法で、タイムラグの発生を防ぐ。
下のケースでは、通常時とオンマウス時の画像を縦に合体した場合。
#menu1 a { /*メニュー1を画像に置き換え */
background-image: url(menu1.gif);
text-decoration: none;
text-indent: -9999px;
width: 200px;
height: 50px;
background-repeat: no-repeat;
display:block;
}
#menu1 a:hover { /* カーソルオンマウス時 */
background-image: url(menu1.gif); /*通常と同じ画像 */
background-position:0 -50px; /* 左辺から0 上辺から-50ピクセル移動させる */
}
横長の合体した画像を作って横にスライドさせる方法もある。
その場合は
#menu1 a:hover { /* カーソルオンマウス時 */
background-image: url(menu1.gif); /*通常と同じ画像 */
background-position:-200 0; /* 左辺から-200 上辺から0移動させる */
}
JUGEMテーマ：インターネット
インターネット覚え書き「ビボウログ」
インターネットの事、パソコンの事、最新技術の事、専門的な事は良くわからないけど
自分なりに頑張って解釈して書きつづる、自分のために始めた備忘録ブログ。
自分なりに頑張って解釈して書きつづる、自分のために始めた備忘録ブログ。
calendar
Profile
Selected entries
- test (02/04)
- テスト 二郎食べたい (11/20)
- cssのfloat解除方法 (10/09)
- margin:0 auto; でも text-align:center; でもなくセンター揃え (09/16)
- cssでメニューを画像にした場合、a:hoverで一瞬画像が消えるのを防ぐ (03/02)
Archives
- February 2010 (1)
- November 2009 (1)
- October 2009 (1)
- September 2009 (1)
- March 2009 (1)
- February 2009 (1)
- December 2008 (1)
- November 2008 (4)
- August 2008 (2)
- July 2008 (4)
- April 2006 (1)
- March 2006 (10)
Recent comment
- test
⇒ 紳士２８号 (06/06) - test
⇒ 最近の流行 (05/15) - test
⇒ アジャ公 (05/03) - test
⇒ 桃医 (01/10) - test
⇒ オリンキー (01/05) - test
⇒ タンやオ (12/31) - test
⇒ ポリエモン (12/22) - test
⇒ モグモグ (12/18) - test
⇒ ちょーたん (12/14) - test
⇒ ちんたまん (12/05)
Recent trackback
- test
⇒ ガリガリ (02/19) - test
⇒ 国際派 (02/13) - test
⇒ 大岩井 (02/06) - test
⇒ 緊急宣言 近い将来にMLMは変わります (02/04) - テスト 二郎食べたい
⇒ キングダム (02/01) - テスト 二郎食べたい
⇒ 海のくまさん (01/25) - テスト 二郎食べたい
⇒ ドライブ好き (01/14) - テスト 二郎食べたい
⇒ チリチリ (01/09) - テスト 二郎食べたい
⇒ まさーしー (01/01) - テスト 二郎食べたい
⇒ ヒゲメタボ (12/26)
sponsored links
てんき
-天気予報コム-
time
mobile
Search
Others
powered
