コーディングコンテスト用素材でSTUDY 3

メモっぽく書いております〜

コンテンツ部

簡単に言うとこんな感じです。

<!-- コンテンツ部分 開始 -->
<div id="content" class="clearfix">
	<!-- メインコンテンツ（右側）開始 -->
	<div id="main">中身</div>
	<!-- サブコンテンツ（左側）開始 -->
	<div id="sub">中身</div>
</div>

サブコンテンツの背景

そして、サブコンテンツ（左側）の背景を指定しているところが

<div id="content" class="clearfix">　←ココ

サブの中↓で背景にしても、中に存在するバナー分しか高さが存在しないためである。
<div id="sub">

コンテントの真ん中配置

なお、今回のやり方だと、コンテント（content）も真ん中配置にするために調整が必要だった。

#content {
 background: transparent url(../image/sub_bg.gif) repeat-y top left;
 background-position: 43px top;
 width: 801px;
 margin: 0 auto;
 padding-left: 43px;
}

RSSリンク画像

しかしここで問題が！！「RSS」ボタンはどうやっておけばいいのか！？
調べると、こんな置き方をしている人がいらっしゃったので、それをベースに微調整

#newsIndex #rss {
 float: right;
 position: relative;
}
#newsIndex #rss a {
 position: absolute;
 top: -36px;
 left: -55px;
}

最新製品情報

これは大層難しかったのです(´；ω；`)

HTML

背景画像はこんな感じで作成します。
http://purazumakoi.web.fc2.com/test/html/image/new_products_bg.gif
そしてそれをどこで指定するかというと

<div id="products" class="clearfix">　←ここで背景画像を指定！！
 <dl>
  <dt><a href="index.html">HappyLifeマシン</a></dt>
  <dd>
   <p>テキスト</p>
  </dd>
 </dl>
 <dl>
  <dt><a href="index.html">WWW WATC時計</a></dt>
  <dd>
   <p>テキスト</p>
  </dd>
 </dl>
 <dl>
  <dt><a href="index.html">真鍮製！！！！！！！サラダボウル</a></dt>
  <dd>
   <p>テキスト</p>
  </dd>
  </dl>
</div>

つまり背景の位置に合わせてdl要素を設置するわけです

cssはこんな感じo(´^｀)o

#newProducts #products {
 background: transparent url(../image/new_products_bg.gif) no-repeat bottom left;
 background-position: 8px bottom;
}

#newProducts dl {
 float: left;
 margin: 0 4px;
}

dtの背景画像はちょっと大きめに作ってあげます
上半分に通常表示、下半分にロールオーバー表示用

#newProducts dl dt a:hover {
 background-position: 0 -200px;
}

フッダーナビゲーション

フッダーでポイントなのはココ

#fooderNavi {　←div要素で背景を指定
 background: transparent url(../image/fooder_menu_bg.gif) repeat-x top left;
}

#fooderNavi ul li {
 display: inline;　←floatではなくてインライン要素にする
}

このようにできているのです！！！・・・ってちょっと端折りすぎかな(^▽^;)

purazumakoiの[はてなブログ]

技術メモから最近はライフログも増えてきてます。