左側に設置したバナーの縦の長さを小さくしたいです

質問

現在、無料cssテンプレートを使用して自社サイトを作成しています。
http://web-zen.sakura.ne.jp/index.html
左側のバナー関連が縦長になってしまい、しかし上司にはバナーの数を
減らす事はできないと言われ大変困っております。
そこで、バナーそのものの縦の長さを変更できないか質問してみます。
関係ありそうなcssのファイルの内容は、以下のとおりです。
@charset "UTF-8";

/* ---------------------
* FONTSIZE MODEL *
* ---------------------
* 63% -> 10pxに相当
* 70% -> 11pxに相当
* 75% -> 12pxに相当
* 82% -> 13pxに相当
* 88% -> 14pxに相当
* 94% -> 15pxに相当
* 100% -> 16pxに相当
* 107% -> 17pxに相当
* 113% -> 18pxに相当
* 119% -> 19pxに相当
* 125% -> 20pxに相当
* --------------------- */

/* ========BASIC======== */
html {
overflow-y:scroll;
}

body {
margin:0;
padding:0;
line-height:1.6;
letter-spacing:1px;
font-family:Verdana, Helvetica, sans-serif;
font-size:13px;
color:#fff;
background:#FFF;
}

br {
letter-spacing:normal;
}

a {
color:#d1d1d1;
text-decoration:none;
}

a:hover {
color:#666;
}

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

h1,h2,h3,h4,h5,h6 {
margin:0;
}

/* ========TEMPLATE LAYOUT======== */
#top {
width:780px;
margin:0 auto;
}

#contents {
float:left;
width:780px;
}

#side {
float:left;
width:220px;
background:#181818;
padding:10px 0;
}

#main {
float:right;
width:540px;
padding:10px 0;
}

#footer {
width:540px;
margin-left:240px;
}

/* ========SIDE CUSTOMIZE======== */
#side h1 {
margin:0;
font-size:24px;
}

#side h1 a {
color:#fff;
}

#side h1 a:hover {
color:#ddd;
}

#side div.section {
margin:0 10px;
}

/* ========MENU CUSTOMIZE======== */
#menu ul {
margin:0 auto;
padding:10px 0;
}

#menu li {
color:#333;
text-align:center;
list-style-type:none;
}

#menu li a {
display:block;
width:220px;
color:#f1f1f1;
line-height:60px;
}

#menu li a:hover {
color:#f1f1f1;
background:#2d2d2d url("../images/bg_menu.gif") 0 0 repeat;
}

/* ========MAIN CONTENTS CUSTOMIZE======== */
#main #pr p {
margin:0;
padding:5px 0;
}

#main #icatch {
margin-bottom:10px;
}

#main a {
color:#d1d1d1;
}

#main a:hover {
color:#f1f1f1;
text-decoration:underline;
}

#main h2 {
margin-bottom:8px;
padding:0 0 0 10px;
font-size:15px;
font-weight:bold;
line-height:35px;
border:1px solid #3e3e3e;
background:#181818;
}

#main h3 {
clear:both;
margin:20px 0 8px 0;
padding:0 0 0 5px;
font-size:14px;
border-left:5px solid #3e3e3e;
}

#main h4 {
margin-bottom:2px;
font-size:14px;
border-bottom:2px solid #f1f1f1;
}

#main h5 {
margin-bottom:2px;
padding:2px 5px;
font-size:13px;
background:#3e3e3e;
}

#main h6 {
margin-bottom:2px;
font-size:13px;
border-bottom:2px solid #3e3e3e;
}

#main p {
margin:0 0 1em 0;
}

#main dt {
margin-bottom:3px;
}

#main dd {
padding:0;
margin:0 0 0.5em 1em;
padding:3px;
color:#ddd;
background:#181818;
}

/* INFORMATION CUSTOMIZE */
* html body #main dl.information dd div {
display:inline-block;
}

#main dl.information dt {
float:left;
width:10em;
margin:0;
padding:0;
color:#fff;
}

#main dl.information dd {
margin:0 0 0.5em 10em;
padding:0;
color:#fff;
background:transparent;
}

#main table {
width:100%;
border-collapse: collapse;
}

#main table th {
padding:5px;
font-size:12px;
text-align:left;
border:1px solid #ddd;
background:#181818;
}

#main table td {
padding:5px;
font-size:12px;
text-align:left;
border:1px solid #ddd;
}

/* ========PAGETOP CUSTOMIZE========= */
#pageTop {
padding:10px 0;
text-align:right;
font-size:11px;
}

#pageTop a{
padding:0 0 0 12px;
background:url("../images/bg_pagetop.gif") 0 60% no-repeat;
}

/* ========FOOTMENU CUSTOMIZE======== */
#footMenu ul {
margin:0;
padding:10px 0 0 0;
text-align:right;
border-top:1px solid #b4b4b4;
}

#footMenu li {
display:inline;
margin:0 0 0 10px;
list-style:none;
}

#footMenu li a {
padding-left:10px;
background: url("../images/bg_footmenu.gif") 0 50% no-repeat;
}

よろしくお願いします。

回答No.2

outbrave

#menu li a {
display:block;
width:220px;
color:#f1f1f1;
/*line-height:60px;*/
padding: 4px 0;
}

line-height: の値を小さくすればいいんですけど、padding の方がおすすめで、4px の値を調整してください。

これで、リンク同士の幅が小さくなり、サイドメニュー全体が短くなります。

お礼

ご回答ありがとうございます。
サイドメニュー　という名称なのですね。勉強になりました。
無事、60の数値を25にした所 縦幅の間隔が狭くなり質問した事項が解決できました。
この度はご回答下さりありがとうございました。

回答No.1

ORUKA1951

スタイルシートが、そんなに長大でしかも分かりづらいと・・勘弁してになっちゃいます。
バナーは多分ナビゲーションだと想像して回答します。
もちろんサイズの変更はできますが、本文の長短に関わらず本文を一定以上のサイズを確保するほうが良いです。
　スタイルシートを拝見してHTMLも、失礼ながら相当酷いもののように見受けられます。多分誰もメンテナンスできないし、あなた自身も数年も経たないうちに訳がわからなくなるでしょう。idやclassはむろんdivもきちんと理解して使わないと・・
　左側のバナーの背景色を、任意の色に変更したいです。 - HTML - 教えて！goo( http://okwave.jp/qa/q7953557.html )
とあわせて回答します。

font要素は、強く非推奨です。久しぶりに拝見しました。
　⇒FONT要素とBASEFONT要素は推奨しない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#edef-FONT )

　HTMLには文書構造しか書きません。そのためプレゼンテーション(表現)に関わるfontなどは使えなくなったのです。
　⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )

　下記サンプルをごらんになると分かるように、HTMLには文書構造しか書かれていませんから、将来誰がメンテナンスすることになっても簡単に手が付けられるでしょう。
　もちろん、Lynxでも利用できます。---検索エンジン対策
　『Lynx などのテキスト ブラウザを使用して、サイトを確認します( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )』

ごく簡単な５カラム
・・例示されたHTMLは複雑怪奇で私ごときで手に負えるものではありません。・・・
[　　　header　　]
[　　section本文 ]この内部に本文と目次と付属記事がある
[　　　footer　　]
という文書構造のHTMLがあると考えます。【下記サンプル】
★goTop.gif,goBooks.gif,goProducts.gif,goContactUs.gifと言う画像を./images/bannerに3:1の比で作成してください。
★写真は、01.jpg(4:3),02.jpg(3:4),03.jpg(1:1)を用意して./images/photoにおいてください。
★背景画像は白っぽい写真を用意して./images/backgroundにsky.jpgで保存して置いてください。
※HTML中のhttp:はhtt：に置換してあるので戻すこと
※タブは＿に置換してあるので戻すこと。
※文字コードはUTF-8です。
※Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )でチェック済みです。
　ご確認ください。
※スタイルシートは文字数制限があるので
　左側のバナーの背景色を、任意の色に変更したいです。 - HTML - 教えて！goo( http://okwave.jp/qa/q7953557.html )
　への回答として、後ほど
・・640px以上のウィンドウでリキッドデザインで表示されるように計画しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=UTF-8">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
/* スタイルシートは次回 */
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<div class="section">
＿＿＿<h3>見出し</h3>
＿＿＿<p>ここに記事が入る</p>
＿＿＿<ol class="products">
＿＿＿＿<li><img src="./images/photo/01.jpg" width="480" height="360" alt="EOA1203:電子レンジ">
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li class="name">EOA1203</li>
＿＿＿＿＿＿<li class="price">\50,000-</li>
＿＿＿＿＿＿<li class="specification">W:450,H300,D400</li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li><img src="./images/photo/02.jpg" width="480" height="640" alt="EOA1204:電子レンジ">
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li class="name">EOA1204</li>
＿＿＿＿＿＿<li class="price">\55,000-</li>
＿＿＿＿＿＿<li class="specification">W:450,H300,D400</li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li><img src="./images/photo/03.jpg" width="480" height="480" alt="EOA1205:電子レンジ">
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li class="name">EOA1205</li>
＿＿＿＿＿＿<li class="price">\60,000-</li>
＿＿＿＿＿＿<li class="specification">W:450,H300,D400</li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="nav">
＿＿＿<h3>バナーでのナビゲーション</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="/"><img src="./images/banner/goTop.gif" width="180" height="60" alt="トップへ"></a></li>
＿＿＿＿<li><a href="/books"><img src="./images/banner/goBooks.gif" width="180" height="60" alt="書籍へ"></a></li>
＿＿＿＿<li><a href="/product"><img src="./images/banner/goProducts.gif" width="180" height="60" alt="製品へ"></a></li>
＿＿＿＿<li><a href="/contact"><img src="./images/banner/goContactUs.gif" width="180" height="60" alt="質問"></a></li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="aside">
＿＿＿<h3>新着情報</h3>
＿＿＿<p>記事・・・・・・・・</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

お礼

ご回答ありがとうございます。本日はこれ以上更新作業ができないので、ご指南・アドバイス頂いた事項はまた明日以降急ピッチで進めて行こうと思います。
HTMLにFONT属性などを使ったらだめ
という知識は初めて知りました（参考にしているサイトが初心者向けのページだからかな？　有益な知識として、今後に生かしてゆこうと思います。
独力で上司から文句言われないサイト製作できる自信がないので
（苦笑）、また壁にぶつかった際はご指南いただければ幸いです。　ありがとうございました！