[PR] 不動産担保ローン css | 素人ときどき玄人
スポンサーサイト

一定期間更新がないため広告を表示しています

カテゴリ:- | | - | - | -
アイコンと文字の高さを揃えたい!
 
JUGEMテーマ:ウェブデザイナー


表題だと分かりにくいのでまずは図を参照してください!




一番上はアイコンが文字より上付きになっています。
これではビジュアル的に美しくないので高さをそろえます。


そろえたものが真ん中の状態。


さらにアイコンがあるなら文字は要らないわっ!
としたものが一番下の状態です。


CSSコード知りたい?


続きを読む >>
カテゴリ:css | 18:15 | comments(0) | trackbacks(0) | -
マウスオーバーすると元画像サイズで表示させる方法 only css
JUGEMテーマ:ウェブデザイナー

マウスオーバーで画像の拡大を表示させる場合、
サムネイル用の画像と元画像と、
2枚の画像を作らないとならないのはなかなか手間ですよね?



これが1枚の画像で、さらにCSSだけで出来ちゃう方法があるって知ってました?

続きを読む >>
カテゴリ:css | 03:46 | comments(0) | trackbacks(0) | -
モダンブラウザで見ると空白が出来てしまうのよ(涙)
JUGEMテーマ:ウェブデザイナー


サイトデザインをこんな風にしたいのに

┏━━━┯━━━━━━━┯━━━┓
┃   │       │   ┃
┃   │              │      ┃
┃   │              │    ┃
┃   │   メイン     │    ┃
┃   │              │    ┃
┃   │              │    ┃
┃   │              │      ┃
┃   │       │      ┃
┗━━━┷━━━━━━━┷━━━┛

* { margin: 0px; padding: 0px; }
と指定しているのにも関わらず一番下の行に空白が。

┏━━━┯━━━━━━━┯━━━┓
┃   │       │   ┃
┃   │              │      ┃
┃   │              │    ┃
┃   │   メイン     │    ┃
┃   │              │    ┃
┃   │              │    ┃
┃   │              │      ┃
┃   └───────┘      ┃
┗━━━━━━━━━━━━━━━┛

なぜかIEで見る時はこの空白がない。
なぜ?

続きを読む >>
カテゴリ:css | 02:22 | comments(0) | trackbacks(0) | -
vertical-align:middleが効かないのぉ(涙)
JUGEMテーマ:ウェブデザイナー

垂直方向にセンタリングさせたい!

と思って vertical-align:middle を指定したのだが・・・
効かない。
ん???

と、調べてみるとどうやら一部の要素しか効果がないことが判明。
おや、そうだったのかい!

続きを読む >>
カテゴリ:css | 12:29 | comments(10) | trackbacks(0) | -
ulのリストマークがIEで表示されないよ〜(涙)
JUGEMテーマ:ウェブデザイナー

 こちらのサイトに私が困った状況が分かりやすく載っておりましたのでご紹介。

  iKesai.com
全称セレクタにzoomを使うとバグる

リストマークは出てこないし、marginの調整で強引に表示させたものの
2行以上になると、リストマークの位置が???の状態。

なぜ「vertical-align: bottom;」な感じに???
(上記サイトのサンプル2参照)

これまた強引に「vertical-align: top;」プロパティを与えリストマークの位置を
調整してみたものの、ちょっと上付きな感じに。
うむーっ。5pxほど下げたい。。。
ってか、そもそもliタグに「vertical-align」プロパティを使うってどうよ?

続きを読む >>
カテゴリ:css | 14:58 | comments(0) | trackbacks(0) | -
| 1/3PAGES | >>