186(css)

2005-03-30

[][] http://d.hatena.ne.jp/jintrick/20050324

IEがmin-widthさえ理解してくれればなぁ、と思わないでもない。

トラックバック - http://css.g.hatena.ne.jp/smoking186/20050330

2005-03-21

[] 基本ソース

  • float
    • %指定なら問題無し
    • 一部をpxで固定したいならNegative Margin
    • ただしGecko系の為にoverflowを指定する必要あり
    • ということはMacIE対策をする必要がある。
  • position
    • なにも考えずに出来る……と思う。

div.mainを左寄せだとmargin指定出来ないということを覚えておかなくてはならない……らしい。

%指定float

http://d.hatena.ne.jp/themesample?hatena

まぁsampleの日記に適用させることを考えながらCSSを書いてみる。

なぜか中央寄せ+float。自分で書いていて不思議だ。

/*
 float sample
 両方とも%指定。
 */

 * {
 margin: 0px;
 padding: 0px;
}

body {
 text-align: center;
 line-height: 1.0;
}

body * {
 text-align: left; /* for IE */
}

.hatena-body {
 width: 90%;
 margin: 0px auto 0px auto;
 border: 1px solid black;
}

/* 本文が左 */
.main {
 width: 65%;
 float: left;
 border: 1px solid red;
 line-height: 1.4;
}

.sidebar {
 width: 30%;
 float: left;
 border: 1px solid blue;
 line-height: 1.4;
}

/* hatena-bodyに線を設定するときのGecko用小細工 */
.hatena-body:after {
 content: ".";
 color: white;
 display: block;
 clear: both;
 margin-top: -1em;
}

/* 本文が右 */
/*
.main {
 width: 65%;
 float: right;
}

.sidebar {
 width: 30%;
 float: left;
}
*/

div.sidebarの下にoverflow:auto;を入れることをお忘れなく。

片側px指定

こっちはOpera7以外はOK。?DはOpera7がquirkモードだからなー。なぜかWinIE6では上手くいく。

borderの指定に難があるので背景画像を使ってやらないといけない場合が多い……ようだ。

こういうことをするならposition:absoluteを使えという話ではある。

/*
 float sample
 片一方px指定
 using Negative Margin: http://www.alistapart.com/articles/negativemargins/
 Opera7だけ駄目(藁
*/

* {
 margin: 0px;
 padding: 0px;
}

h1 {
 background: #d7dabd;
}
.main {
 width: 100%;
 float: left;
 margin-right: -305px;
}

.sidebar {
 width: 300px;
 float: right;
}

.hatena-body:after {
 content: ".";
 color: white;
 display: block;
 background: #d7dabd;
 clear: both; 
}

.main * {
 margin-right: 305px;
}

.main * * {
 margin-right: 0px;

}

/* 本文が右 */
/*
.main {
 width: 65%;
 float: right;
}

.sidebar {
 width: 30%;
 float: left;
}
*/
トラックバック - http://css.g.hatena.ne.jp/smoking186/20050321

2005-03-10

[] 時計のソース。

こんな感じらしい。

中央ぞろえにしたかったら、div.hatena-clock {text-align: center;}でいいか。

<div class="hatena-clock">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="120" height="25" id="clock" align="center">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://d.hatena.ne.jp/tools/clock-morphing.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent">
<param name="FlashVars" value="color=0xffff00">
<embed src="http://d.hatena.ne.jp/tools/clock-morphing.swf" FlashVars="color=0xffff00" wmode="transparent" quality="high" bgcolor="#ffffff" width="120" height="25" name="clock" align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>
</div>
トラックバック - http://css.g.hatena.ne.jp/smoking186/20050310

2005-03-09

[] div.hatena-asin-detail-foot

ずっと使い道が分からなかったのだが、やっと分かった。

clear:both;用だ!!!

トラックバック - http://css.g.hatena.ne.jp/smoking186/20050309