サイトデザイン変更

2004年4月24日(土) by level
B ?

ようやく念願のサイトデザインの変更を行った。まだ、トップページだけだが、他のページにも広げて行きたい。

今は、CSS は以下のようにして、サイドバーを左においている。

#container {
  max-width       : 55em;
  min-width       : 40em;
}
#content {
  margin-left     : 11em;
}
#sidebar {
  position        : absolute;
  top             : 3em;
  width           : 13em;
}

しかし欲しかったのは、サイドバーを右に置くタイプ。これは、以前 pswf さんのサイトで紹介されていたここのコメントテストページを見るのが手っ取り早い)に沿ったもので、CSS は以下のとおり。

#container {
  width           : 100%;
  float           : left;
  margin-right    : -11em;
  max-width       : 55em;
  min-width       : 40em;
}
#content {
  margin-right    : 11em;
}
#sidebar {
  width           : 13em;
  float           : right;
}

しかしこれではなぜか、sidebar が content の右に来てくれない。これはトップページで代替スタイルシート test を選択すれば確認できる。ちなみに container の部分は関係ない。ここを取っ払っても content と sidebar がうまく並ばない。はて、なぜだろう?

#content {
  width           : 40em;
  float           : left;
}
#sidebar {
  width           : 13em;
  float           : right;
}

これだと、並んでくれるけど、content が固定幅になってしまう。

#content {
  max-width       : 40em;
  float           : left;
}
#sidebar {
  width           : 13em;
  float           : right;
}

これだと、sidebar が一番右まで飛んでしまう。

ウィンドウ幅を広げても、一定以上に広がらなくしたいのだ。

コメント

コメントはありません。

トラックバック

トラックバックは検索対象外です。

この記事にリンクしているページ < >

  1. データがありません。