ブログ練習帳

リキッドレイアウトをしてみる

ウィンドサイズに合わせてレイアウトを伸び縮みさせてみました。

いろいろ、上級技とかあるようですが、まずは入門の簡単なのをトライです。

XHTML

<div id="wrapper">

<div id="header"><h1>header</h1></div>

<div id="contents">

<div id="maincontents">

<div id="maincontentin">

<h2>Hi!</h2>

<p>

contentscontentscontentscontentscontentscontentscontents

contentscontentscontentscontentscontentscontentscontents

contentscontentscontentscontentscontentscontentscontents

contentscontentscontentscontentscontentscontentscontents

contentscontentscontentscontentscontentscontentscontents

</p>

</div>

</div>

<div id="mainnavi">

<ol>

<li>list1</li>

<li>list2</li>

<li>list3</li>

<li>list4</li>

<li>list5</li>

</ol>

</div></div>

<div id="footer"><p>footer</p></div>

</div>

CSS

* {

  padding:0;

  margin:0;

  }

  #wrapper {

  background-color:#ff0;

  }

  #wrapper #contents #maincontents {

  float: left;

  width:100%;

  background-color:red;

  }

  #wrapper #contents #maincontents #maincontentin {

  margin-left:150px;

  background-color:blue;

  }

  #wrapper #contents #mainnavi {

  float: left;

  width: 150px;

  margin-left:-100%;

  background-color:green;

  }

  * html #wrapper #contents #mainnavi {

  float: left;

  width: 150px;

  margin-left:-100%;

  position: relative;

  background-color:green;

  }

  #footer {

  clear:both;

  }

▼サンプルはこちら

ネガティブマージンを使うので、IE6対策用に、position:relativeを入れるのがポイントかも…と思った見習です。あと、IE6はfloatするとmarginの値をいきなり倍にしちゃうとか、そういうお作法があるようなので、このあたりも注意が必要かも…。でも、よく分かりません。がんばるぞぉう。

2011年12月20日1:48 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)