こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

perlで3カラムにしたい (css)

perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム(三段組み)、最下部をフッターにしたいと考えています。

ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。

どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。
m(_ _)m

当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。

よろしくお願い致します。

-----------------------------

<HTML>
<BODY>
<div id="wrapper">
<div id="header">
ヘッダー部分
</div>
<div id="main">
<div id="menu">
メニュー部分
</div>
<div id="contents">
コンテンツ部分
</div>
<div id="affiriate">
アフィリエイト部分
</div>
</div>
<div id="footer">
フッター部分
</div>



* {
margin: 0;
padding: 0;
}
#wrapper {
width: 755px;
margin: 0 auto; /* 幅固定(755px)でセンタリングします。*/
}
#header {
width: 755px;
height: 50px;
}
#main {
width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/
}
#menu {
float: left;
width: 150px; /* floatに、width 指定は必須です。*/






}


#contents {
float: left;
width: 505px;


#affiliate {
float: left;
width: 150px;
}
#footer {
clear: both; /* float をクリアしています。*/
width: 755px;
height: 50px;
}
#menu ul {
list-style: none;
}

</div>
</BODY>
</HTML>

投稿日時 - 2011-04-29 10:42:02

QNo.6701614

すぐに回答ほしいです

質問者が選んだベストアンサー

ん? perlでこれ全部出力するのは、話が別ですよ。
formをコンテンツ部分に入れてCGIに渡す前提なら問題無いですが。

Javascriptと違い、CSSをstyle要素風にbody内に書いてはいけません。
その書き方なら、head内にstyle要素として書きましょう。
それと、そのCSSだと3カラム目がカラム落ちします。
今の各カラムの幅の合計が 805px ですから、
総幅 755px を超えてはいけません。
下記の外枠値か各幅値を修正し、設計し直しましょう。

<html>
<head>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 755px;
margin: 0 auto; /* 幅固定(755px)でセンタリングします。*/
}
#header {
width: 755px;
height: 50px;
}
#main {
width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/
}
#menu {
float: left;
width: 150px; /* floatに、width 指定は必須です。*/
}
#contents {
float: left;
width: 505px;
#affiliate {
float: left;
width: 150px;
}
#footer {
clear: both; /* float をクリアしています。*/
width: 755px;
height: 50px;
}
#menu ul {
list-style: none;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">ヘッダー部分</div>
<div id="main">
<div id="menu">メニュー部分</div>
<div id="contents">コンテンツ部分</div>
<div id="affiriate">アフィリエイト部分</div>
</div>
<div id="footer">フッター部分</div>
</div>
</body>
</html>

投稿日時 - 2011-04-30 13:29:23

お礼

ご回答ありがとうございました。
基本的なところが分かっておらず、お恥ずかしい限りです。
ただnaokitaさんのアドバイスを読んで、分かりました!
どうもありがとうございました!

投稿日時 - 2011-05-01 20:53:28

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

ちょっとお聞きしたい事が1つ…
これHTMLデータの本来の形でないですよね?
CSSデータはHTML内部に書く場合は、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML4.01Strictの場合 -->
<html lang="ja">
<head>
<title>***</title>
 <meta http-equiv="content-type" content="text/html" charset="Shift_JIS">←お好きな文字コードで
<meta http-equiv="content-style-type" content="text/css">これないとHTML内でCSS使えません
<style type="text/css"> ←ヘッド内にこう指定してここから
<!--
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 755px;
margin: 0 auto; /* 幅固定(755px)でセンタリングします。*/
}
#header {
width: 755px;
height: 50px;
}
#main {
width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/
}
#menu {
float: left;
width: 150px; /* floatに、width 指定は必須です。*/
}
-->
</style> ←ここまでを追加
</head>
<body>
<div id="wrapper">
<div id="header">
ヘッダー部分
</div>
<div id="main">
<div id="menu">
メニュー部分
</div>
<div id="contents">
コンテンツ部分
</div>
<div id="affiriate">
アフィリエイト部分
</div>
</div>
<div id="footer">
フッター部分
</div>
</body>
</html>
とするかもしくは、CSSだけの外部ファイルを作る。
データ内部ここから下
@charset"Shift_JIS"; ←CSSファイル最上部で文字コード指定
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 755px;
margin: 0 auto; /* 幅固定(755px)でセンタリングします。*/
}
#header {
width: 755px;
height: 50px;
}
#main {
width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/
}
#menu {
float: left;
width: 150px; /* floatに、width 指定は必須です。*/
}
データここまで
こう言うデータを作って「お好きな名前.css」で保存し、
HTML内部の<head>内部で
<link rel="stylesheet" type="text/css" href="お好きな名前.css">
と入れるだけで反映されます。
あと、XHTMLで記述したい場合は空要素(meta,brなど)は
<br />と半角スペースとスラッシュを入れる事。
半角スペースは任意でなくても可ですが付けるなら全てに入れる、
入れないなら全て入れないと完全に一致した記述をして下さい。

投稿日時 - 2011-04-29 14:42:19

お礼

ご回答ありがとうございました。
丁寧な解説、ありがとうございます。

初心者なので、よく分からないことだらけですが、回答を読んで「なるほど!」と思いました。とても助かりました。ありがとうございました。

投稿日時 - 2011-05-01 20:54:53

あなたにオススメの質問