Home > P.299

P.299

  • Last Modified: 2008年11月29日 19:56

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 ( ZIP アーカイブには解説文は含まれていません。)

解説

これまでの解説で、 p#pageImage 上には img 要素の左マージンによって余白ができました。 ここにインフォメーションとナビゲーションを絶対配置し、ボックスを重ねて配置していきます。

div#siteInfo に position: absolute を指定し、 body からの基点を指定して絶対配置します。 また、内容量が増えた場合を考え、一定の高さを超えた場合はスクロールバーを表示するように overflow: autoを指定します。

CSS

div#siteInfo {
  width: 240px;
  height: 130px; /* 高さの指定 */
  position: absolute; /* 絶対配置 */
  top: 320px;
  left: 12px;
  overflow: auto; /* heightで指定した高さに収まりきらない場合の表示方法を指定 */
}

div#siteInfo h2 {
  margin: 0;
}

div#siteInfo ul {
  margin: 0;
  padding: 0;
}

div#siteInfo li {
  margin: 0;
}

Download

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Trackbacks:0

TrackBack URL for this entry
http://lh3.jp/files/system/mtos/mt-tb.cgi/114
Listed below are links to weblogs that reference
P.299 from lh3.jp

Home > P.299

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top