Page: 1/2   >>
float解除の方法
フロート解除する際、単純に
.cl{ clear: both;} として、
<br class="cl" /> などと書いていました。

厳密に言うと間違った書き方なのだそうです。
(clear: both;はブロック要素でしか使うべきではないため)
かといってブロック要素に指定すると、高さが入ってしまったりして、
レイアウトが狂ってしまいます。

そこで、こんな指定方法が紹介されていました。

.clear{ clear: both; visibility: hidden; height: 0;}

<div class="clear">ここでクリアー</div>



参考サイト
http://www.materialpot.com/content/archive_33.htm
18:52 | comments(0) | - | - | -
min-height と min-width がIEで利かない
min-height と min-widthがIEではききません。

このバグ回避方法としては

★★ {
min-height:100px;
height:auto !important;
height:100px;

}

とするとよいようです。

参考サイト:http://css.studiomohawk.com/12/min-height-min-width-ie-bug-fix/
15:40 | comments(0) | - | - | -
<ol>で、マーカーが同じになってしまったり、下付きになるバグ
<ol>
<li>テキスト<テキストテキストテキストテキスト</li>
<li>テキスト<テキストテキストテキストテキスト</li>
<li>テキスト<テキストテキストテキストテキスト</li>



</ol>

としたとき、マーカーの数値がずっと「1」のままだったり、
「1」の数字が「テキスト」の左下に来てしまうバグがありました。

CSSを色々触りましたが、・・・理由はわかりませんが、
olとliのwidth指定を外したところ、うまくいきました。
14:07 | comments(0) | - | - | -
幅広のページを、切らないでプリントさせるCSS
ページを幅750pxくらいで作れればよいのですが、最近は幅広のページを作成する機会も増えてきました。そのままだとIEでは、プリントで右端が切れてしまいます。

IEで、切れないように縮小させてプリントさせるCSSサンプルです。

HTMLファイル
<html>
<head>
<title>テスト</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css">
</head>
<body style="margin:0px 0px 0px 0px;">

<div style="width:950px;height:1000px;border:1px solid #000000;">プリントしたときに、縮小して全体を入れるためのCSS</div>

</body>
</html>


CSSファイル
@media print{

body{ zoom: 70%; }


スタイルシートの「ZOOM」を使います。
IEのみ有効です。
12:56 | comments(0) | - | - | -
firefox、safariなどでも対応できる半透明CSS
filter: alpha(opacity=90);
opacity: 0.9;


参考:http://weblibrary.s224.xrea.com/weblog/css/cat15/iefirefoxoperanetscapesafarics.html
16:10 | comments(0) | - | - | -
floatすると背景が表示されなくなる
親ボックスに背景を適応して、親ボックスに背景が適応されていることが確認されたのにもかかわらず、内包する子ボックスに対してfloatを適応した場合、Firefoxでは親ボックスの背景が表示されません。

対応方法
1親ボックスに高さ指定
2親ボックスの次のボックスにclear:both;を指定

1はうまくいきましたが、2はできませんでした…

参考サイト
http://blog.webcreativepark.net/2007/01/08-005218.html

18:47 | comments(0) | - | - | -
外部スタイルシートが読み込めない原因いろいろ
外部スタイルシートの読み込みがうまくいかない場合、
以下のことを確認してください。

■外部スタイルシートへのパスの記述が正しいか

■文字コードが正しいか
⇒htmlのほうがshift-jisなのに、CSSをEUCにしているなど、文字コードが異なると読み込めないことがあります。

■インポートしすぎていないか
⇒@importで読み込めるスタイルシートは確か21か31か…
それ以上読み込もうとすると、あふれた分のCSSは読み込まれません。

■属性名を数字から始めていないか
⇒ID属性名などは英字から始めなくてはなりません。
#2007_product
.2007_campaign
などとすると読み込めません。
17:01 | comments(0) | - | - | -
print.css 印刷用CSSの作成方法
head内に
<link rel="stylesheet" href="common.css" type="text/css" media="screen,tv" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
と記述。

→common.cssはWEB上適用されるCSS
→print.cssは印刷時用に適用されるCSS

common.cssの中身は
@media screen{
/*この中にCSSを記述*/
}

print.cssの中身は
@media print{
/*この中にCSSを記述*/
}

WEBでは表示されているけれども、印刷用には表示したくない時は、
.side {
display:none;
}
とすればよい。

ただしMac IEで「@media type { 〜 } で括られた範囲内のスタイル指定が全て無視される。」というバグがあるため、MacIEで、適用されません。
CSSが適用されないので、MacIE用にもう一枚用意するか、MacIEをサービス対象外とするしかありません。

12:18 | comments(0) | - | - | -
ナビゲーションをul、liで作成する時
ナビゲーションをリストタグで作る時、いつもつっかえるので、メモ。
ちなみに自分のサイトのナビゲーションバーを作った時のもの。

ul.menu {
margin:0px 0px 0px 16px;
_margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
_position:relative;left:16px; //margin,paddingでの指定では、winIEでは折り返してしまったため
list-style-type:none;
list-style-position:inside;
width:581px;  //幅を指定しないとmacIEで改行してしまったので
}

ul.menu li {
margin:0px 15px 0px 0px;
padding:0px 0px 0px 0px;
width:100px;
float:left;
}

ulの上の階層のdiv等にもwidthを指定しないとmacIEで改行してしまう。
20:24 | comments(1) | - | - | -
CSSハック一覧
http://codeweb.seesaa.net/article/7658025.html

CSSスタイルシートのハック一覧。
13:37 | comments(0) | trackbacks(0) | - | -

Calendar

     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< March 2024 >>

Recommend

Search

Entry

Comment

  • リンク元のページに戻るボタン(PHP)
    Tadashi (03/13)
  • サイト全体をメンテナンスページに切り替える単純な方法
    yo5kg (06/06)
  • 再配布不可識別子の入れ方
    jumbo (04/25)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    ぐみ (12/11)
  • 再配布不可識別子の入れ方
    eguti (06/04)
  • ナビゲーションをul、liで作成する時
    ビジログ (03/09)
  • 再配布不可識別子の入れ方
    nana (02/02)
  • 再配布不可識別子の入れ方
    TOM (01/22)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    pon (11/09)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    pon (11/09)

Archives

Category

Link

Feed

Others

無料ブログ作成サービス JUGEM

Mobile

qrcode