YUIの CSSをあきらめる＋検索機能追加

開発状況

YUIの CSSはよく分からないので、やっぱり採用をやめました。ここで悩むよりは、早く他の機能を実装していきましょう。
今回の参考文献は、この２つ。
http://allabout.co.jp/internet/hpcreate/closeup/CU20041111A/index2.htm

http://www.geocities.jp/multi_column/practice/3column1.html

現在の cssはこんな感じ。３段組の入れ子はよく分からなかったので、新着番組のところは tableでやっています。デザインは最終的に誰かに頼む予定なので、自分であまり細かくやってもしょうがないという事で、だいだいの見た目が整えばそれでよい事にします。

現在の CSSはこんな感じ。

/var/www/podtv/web/css/main.css

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin: 0; padding: 0; }

a img,:link img,:visited img { border: none; }

a
{
  text-decoration: none;
}

a:hover
{
  text-decoration: underline;
}

body, td
{
  margin: 0;
  padding: 0;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  background-color: #fff;

        text-align: left;
}

body
{
  padding: 20px;
}


/*
 * my css
 * width 960 px;
 */
div.header
{
        clear: both;
}
div.main
{
        float: left;
        width: 780px;
}
        div.main_left
        {
        float: left;
        width: 33.3%;
        }
        div.main_center
        {

        }
        div.main_right
        {
        float: right;
        width: 33.3%;
        }
div.rightbar
{
        float: right;
        width: 180px;
}
div.footer
{
        clear: both;
}


ついでに、Googleのカスタム検索を入れてみました。あと、まだ実装していないけど、画面上部に言語選択も。
layoutはこんな感じ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>

<?php include_http_metas() ?>
<?php include_metas() ?>

<?php include_title() ?>

<link rel="shortcut icon" href="/favicon.ico" />

</head>
<body>

<div class="header">
		<table>
			<tr>
				<td>
					<?php echo link_to( image_tag( "/images/PodTVBETA.jpg"), "/") ?>
				</td>
				<td>
					<span style="color:#aaa;text-align:right">English Chinese Japanese</span><br />
					<br />
					PodTVはみんなで作るビデオマガジン配信スタンドです<br />
				</td>
			</tr>
		</table>
<hr>
</div>


<!-- body -->

<div class="main">
<center>
<form action="http://www.google.co.jp/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-3940055541622695:7gy267iwppl" />
    <input type="text" name="q" size="50" />
    <input type="submit" name="sa" value="&#x691c;&#x7d22;" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>
</center>

	<?php echo $sf_data->getRaw('sf_content') ?>
		<div class="main_left">
			<b><a href="http://sites.google.com/site/podtv/">番組の視聴方法</a></b><br />
			iTunesのインストール<br />
			iPodへ転送<br />
			AppleTVで見る<br />
			携帯で見る<br />
			PSPで見る<br />
		</div>


		<div class="main_left">
			<b><a href="http://sites.google.com/site/podtv/">番組の配信方法</a></b><br />
			番組を作る<br />
			映像を UPする<br />
			友達に教える<br />
			撮影ノウハウ<br />
			編集テクニック<br />
		</div>

		<div class="main_left">
			<b><a href="http://sites.google.com/site/podtv/">FAQ</a></b><br />
			Flash virsion<br />
			番組がいつ配信されるのか知りたい<br />
			タグのつけ方<br />
			CCって何？<br />
			用語集<br />
		</div>
</div>


<div class="righbar">
<!-- width 180 px -->
		<b>Menu</b><br />
<br />
		<b>会員情報</b><br />

以下略

できあがった画面がこちら。

なんか検索があると、画面がまともになる気がします。