11/28 サンプルレイアウト

CSS

＜dl＞~＜/dl＞を横に一列に並べる


dtにmargin-rightで並びましたが、いいんでしょうか？？

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<style type="text/css">
<!--
body {
	sont-size: 0.8em;
	line-height: 1.8;
}
dt {
	float: left;
	margin-right: 20px;
}
-->
</style>
</head>
<body>
<h3>新着情報</h3>
<dl>
<dt>2011 11/20</dt>
<dd>花柄ワンピース入荷しました。</dd>

<dt>2011 11/21</dt>
<dd>フェイクファーバッグ入荷しました。</dd>

<dt>2011 11/23</dt>
<dd>クリスマスフェアのお知らせです。</dd>

<dt>2011 11/24</dt>
<dd>スタッフブログ更新しました。</dd>

<dt>2011 11/26</dt>
<dd>ヒョウ柄コート入荷しました。</dd>
</dl>
</body>
</html>

サンプルスタイルシートカンパニー


20111128233649

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプルスタイルシートカンパニー</title>
<link href="css/base.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
<!--▼container-->
<div id="container">

<!--▼header-->
<div id="header">
<h1><img src="images/logo.gif" alt="サンプルスタイルシートカンパニー" width="290" height="38" title="サンプルスタイルシートカンパニー" /></h1>
</div>
<!--▲header--＞


<!--▼nav-->
<div id="nav">
<ul>
<li id="nav01"><a href="#"><em>トップページ</em></a></li>
<li id="nav02"><a href="#"><em>ソリューション</em></a></li>
<li id="nav03"><a href="#"><em>実績紹介</em></a></li>
<li id="nav04"><a href="#"><em>パートナー</em></a></li>
<li id="nav05"><a href="#"><em>カスタマー</em></a></li>
<li id="nav06"><a href="#"><em>会社概要</em></a></li>
<li id="nav07"><a href="#"><em>お問い合わせ</em></a></li>
</ul>
</div>
<!--▲nav-->

<!--▼wrapper-->
<div id="wrapper">
<h2><img src="images/main_copy.jpg" alt="main" width="740" height="272" /></h2>
<!--▼content-->
<div id="content">
<h3><img src="images/title_about.gif" alt="弊社について" width="107" height="42" /></h3>
<!--▼section-->
<div class="section">
<h4><img src="images/section_01.gif" alt="" width="292" height="38" /></h4>
<p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
<p class="link"><a href="#">ソリューションへ</a></p>
</div>
<!--▲section-->
<!--▼section-->
<div class="section">
<h4><img src="images/section_02.gif" alt="" width="297" height="38" /></h4>
<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
<p class="link"><a href="#">実績紹介へ</a></p>
</div>
<!--▲section-->
</div>
<!--▲content-->

<!--▼sidebar-->
<div id="sidebar">
<h3><img src="images/title_news.gif" alt="" width="119" height="42" /></h3>
<dl>
<dt class="new">	2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt class="new">	2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt class="new">	2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt class="new">	2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
<dt class="new">	2006年4月1日</dt>
<dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
</dl>
</div>
<!--▲sidebar-->
</div>
<!--▲wrapper-->

<!--▼footer-->
<div id="footer">
<p><img src="images/copyright.gif" alt="Copyright &#169; Sample Stylesheet Company All Rights Reserved." width="319" height="33" /></p>
</div>
<!--▲footer-->
</div>
<!--▲container-->
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

/*reset*/

* {
	margin: 0;
	padding: 0;
}

img {
	border: none;
	vertical-align: bottom;
}

em {
	visibility: hidden;
}

ul {
	list-style-type: none;
}

li {
	display: inline;
	float: left;
}

li a {
	display: block;
	text-decoration: none;
	overflow: hidden;
}

/*base*/
body  {
	color: #333333;
	font-size: 0.8em;
	font-family:
	  "ヒラギノ角ゴ Pro W3", 
		"Hiragino Kaku Gothic Pro", 
		"メイリオ", 
		Meiryo, Osaka, 
		"ＭＳ Ｐゴシック", 
		"MS PGothic", 
		ssans-serif;
	background-color: #F4F4F4;
	background-image: url(../images/body_bg.gif);
	background-repeat: repeat-x;
	background-position: left-top;
}

#container {
	width: 760px;
	height: auto;
        margin: 20px auto;
	text-align: center;

}

#header {
	text-align: left;
	margin: 0 0 10px 15px;
}

#nav {
	width: 740px;
	height: 33px;
	background-image: url(../images/global_nav_bg.gif);
	background-repeat: repeat-x;
	background-position:left;
	margin-top: 13px;
}

#nav li a {
	width: 94px;
	height: 33px;
	background-image: url(../images/global_nav.gif);
	background-repeat: no-repeat;
}

#nav li#nav01 a {
	background-position: 0 -33px;
}
#nav li#nav01 a:hover{
	background-position: 0 -66px;
}



#nav li#nav02 a {
	background-position: -94px -33px;
}
#nav li#nav02 a:hover{
	background-position: -94px -66px;
}


#nav li#nav03 a {
	background-position: -188px -33px;
}
#nav li#nav03 a:hover{
	background-position: -188px -66px;
}


#nav li#nav04 a {
	background-position: -282px -33px;
}
#nav li#nav04 a:hover{
	background-position: -282px -66px;
}


#nav li#nav05 a {
	background-position: -376px -33px;
}
#nav li#nav05 a:hover{
	background-position: -376px -66px;
}



#nav li#nav06 a {
	background-position: -470px -33px;
}
#nav li#nav06 a:hover{
	background-position: -470px -66px;
}


#nav li#nav07 a {
	background-position: -564px -33px;
}
#nav li#nav07 a:hover {
	background-position: -564px -66px;
}


#wrapper {
	width: 741px;
	height: auto;
	background-color: #fff;
	background-image: url(../images/content_bg.gif);
	background-repeat: repeat-y;
	overflow: auto;

}

#content {
	width: 492px;
	height: auto;
	float: left;
	text-align: left;
	background-image: url(../images/title_bg.gif);
	background-repeat:repeat-x;
}

.section {
	margin: 10px 20px 20px 20px;
	border-bottom: 1px solid #aaa;
}

.section p {
	font-size: 0.8em;
	margin-top: 10px ;
}

.section p.link {
	margin-bottom: 10px;
	padding: 0 0 0 15px;
	background-image: url(../images/arrow.gif);
	background-position: left;
	background-repeat: no-repeat;
}


#sidebar {
	width: 247px;
	float: right;
	text-align: left;
	background-image: url(../images/title_bg.gif);
	background-repeat:repeat-x;
	
}

#sidebar dl {
	margin: 10px 15px 10px 15px;
	padding-bottom: 30px;
}

#sidebar dt.new {
	margin-top: 15px;
}

#sidebar dt {
	color: #666;
	font-size: 0.7em;
	margin: 0 0 3px 0;
}

#sidebar dd {
	font-size: 0.8em;
	line-height: 1.2;
}

#footer {
	width: 741px;
	height: 33px;
	clear: both;
	text-align: left;
	background-color: #333333;
}