実践演習課題H13C13
HTML
<!DOCTYPE HTML> <htmllang="ja"> <head> <metacharset="utf-8"> <title>H13C13</title> <linkrel="stylesheet"href="css/H13C13.css"> </head> <body> <divid="container"> <divid="wrapper"> <divid="content"> <h1><imgsrc="img/13/logo.gif"width="267"height="129"alt="Patisserie camellia"></h1> <divid="nav"> <ul> <liid="info"><ahref="#">info</a></li> <liid="menu"><ahref="#">menu</a></li> <liid="access"><ahref="#">access</a></li> <liid="mail"><ahref="#">mail</a></li> </ul> </div><!--/nav--> </div><!--/content--> <divid="sidebar"> <imgsrc="img/13/photo03.jpg"width="160"height="160"alt="ワッフル"> <imgsrc="img/13/photo05.jpg"width="80"height="80"alt="コーヒー"> <imgsrc="img/13/white.gif"width="80"height="80"alt=""> <imgsrc="img/13/white.gif"width="80"height="80"alt=""> <imgsrc="img/13/white.gif"width="80"height="80"alt=""> <imgsrc="img/13/white.gif"width="80"height="80"alt=""> <imgsrc="img/13/photo07.jpg"width="80"height="80"alt="イチゴスムージー"> <imgclass="right"src="img/13/photo01.jpg"width="160"height="160"alt="プリン"> <imgsrc="img/13/photo04.jpg"width="80"height="80"alt="コーヒー"> <imgsrc="img/13/white.gif"width="80"height="80"alt=""> <imgsrc="img/13/photo06.jpg"width="80"height="80"alt="イチゴプリン"> <imgsrc="img/13/white.gif"width="80"height="80"alt=""> <imgsrc="img/13/white.gif"width="80"height="80"alt=""> <imgsrc="img/13/photo02.jpg"width="160"height="160"alt="ショートケーキ"> <imgsrc="img/13/photo08.jpg"width="80"height="80"alt="ヨーグルト"> <imgsrc="img/13/white.gif"width="80"height="80"alt=""> <imgsrc="img/13/photo10.jpg"width="80"height="80"alt="コーヒー"> <imgsrc="img/13/white.gif"width="80"height="80"alt=""> <imgsrc="img/13/photo09.jpg"width="80"height="80"alt="ライト"> <imgsrc="img/13/white.gif"width="80"height="80"alt=""> </div><!--/sidebar--> </div><!--/wrapper--> <divid="campaign"> <ahref="#"><imgsrc="img/13/campaign.gif"width="170"height="100"alt="キャンペーン情報"></a> </div><!--/campaign--> </div><!--/container--> </body> </html>
@charset "utf-8"; /* CSS Document */ body , div, h1, ul, li, img{ padding: 0; margin: 0; } ul{ list-style: none; } #container{ width:800px; background: #5f3d18 ; padding: 40px 40px 30px 40px; margin: 50px auto; position: relative; } #wrapper{ height:410px; background: #ffffff url(../img/13/shadow.gif) repeat-x left bottom; overflow: hidden; } #content{ width:260px; height: 360px; padding: 20px 30px; float:left; position: relative; } h1{ position: absolute; left: 30px; bottom: 20px; } #nav{ margin-bottom: 110px; } #nav ul{ } #nav ul li{ margin-bottom: 5px; } #nav ul li a{ width:95px; height: 25px; display: block; white-space: nowrap; text-indent: 100%; overflow: hidden; } #nav ul li#info a{ background:url(../img/13/m_info.gif) no-repeat; } #nav ul li#menu a{ background:url(../img/13/m_menu.gif) no-repeat; } #nav ul li#access a{ background:url(../img/13/m_access.gif) no-repeat; } #nav ul li#mail a{ background:url(../img/13/m_mail.gif) no-repeat; } #sidebar{ width: 480px; height: 400px; overflow:hidden; float:right; } #sidebar .white{ background:#CCC; } #sidebar img,#sidebar .white{ float:left; } #sidebar img.right{ float: right; } #campaign{ width:170px; height:100px; position: absolute; right: 25px; top: 17px; } #campaign img{ border:none; }
- h1をpositionでnavより下に配置。親は#content。
- ケーキ等の画像はfloatで配置。空白部分は白い四角の画像を作成して埋めた。
- キャンペーン情報はposition配置。親は#container。