DIVで作った枠について

[新着] Webテンプレートを仮オープンしました

0   名前： ジョニー ： 2007/03/20（火） 19:33  ［URL］  ID:REVXC8Bu sub-VV
以前はTABLEで枠を作っていたのですが、総合掲示板の方でDIVにしたらとアドバイスを頂き、
そうしたまでは良いのですが、幾つかどうしても分からない事があるのでこちらへ来ました

http://romug.web.fc2.com/test/
このサイトなのですが、DIVで作った枠に、ボーダー（枠線）を追加したいのです
どのようにすればよいのでしょうか

あと、枠内の文章を、枠から少し離したいのです
paddingやら色々設定してみましたが、どうにも上手く行きません

どうかご指導の程よろしくお願いいたします

http://romug.web.fc2.com/test/menu.js
http://romug.web.fc2.com/test/default.css
1   名前： 柊 ： 2007/03/20（火） 19:33  ID:5x4b7hsR sub-/A
もう少し詳しくお願いします

divの中にボーダーという文がよく分かりません
2   名前： にゃにゃ ： 2007/03/20（火） 19:33  ID:MEqRMSEk sub-Tp
ジョニーさん
こんにちわ、ずいぶんソースがすっきりして見やすくなりましたね！
こんな短時間で修正、すごいですね。

DIVにボーダーというのはContainerのことでしょうか？
cssを見たところ、記述があったので。

私なりにちょっと修正加えてみました

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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">
<meta http-equiv="content-script-type" content="text/javascript">
<META name="description" content="PSP、DS、エミュレータ、DVD、ファイル共有、iPod、PS2などなど">
<META name="keywords" content="psp,ds,エミュレータ,改造,rom,p2p,ファイル共有,ipod,gray,zone,emulator,torrent">
<link rel="stylesheet" type="text/css" href="default.css">
</head>

<body id="container">

<div id="boxA">
<SCRIPT src="top.js"></SCRIPT>
</div>

<div id="boxB">
<SCRIPT src="menu.js"></SCRIPT>
</div>

<div id="boxC">
記事部分<BR>
</div>
<div id="boxD">
<SCRIPT src="bottom.js"></SCRIPT>
</div>

</BODY>
</html>

CSS
body {
 text-align:center;
 font-size: 12px;
}

* {
 margin:0;
 padding:0;
}

#container {
 width:800px;
 margin-left:auto;
 margin-right:auto;
 text-align:left;
 border:1px solid #000000;
}

#boxA {
 background-image: url(bg.gif); 
}

#boxB {
 width:175px;
 float:left;
 background:#dcdcdc;
}

.menu {
 padding: 3px;
}

#boxC {
 width:625px;
 float:left;
}

#boxD {
 width:100%;
 clear:left;
 background-image: url(bg.gif); 
}

td {  font-size: 12px;}
a:link {color: #000099; text-decoration: none;}
a:visited {color: #000099; text-decoration: none;} 
a:active {color: #000099; text-decoration: none;} 
a:hover {text-decoration: none; color: #000000;}
a:visited:hover {text-decoration: none; color: #00000;}

ul { list-style-image: url(ya.gif); }

HTML
<body>が抜けてました。<meta>も抜けているのがあったので追加しました。
DTDがジョニーさんのソースでは、互換モードだったんですが、標準モードにしてしまいました。
これもけっこう重要だったりします（表示の仕方が違ったりします）
ご自分でもいろいろ試されてみることをお勧めします。

CSS
ボーダーカラーが#000しかなかったので、#000000にしました。
あと最後の「;」が抜けてるものがあったので、修正しました。

もうちょっと工夫できそうな部分もあるので、あくまで参考してご覧ください。
お互いがんばりましょう！
3   名前： モノ ◆7YMtX/NYmu ： 2007/03/20（火） 19:33  ID:TeHw2026 sub-Cl
3桁でもかまいませんけど
http://www.kanzaki.com/docs/html/htminfo17-2.html#color-value
4   名前： ジョニー ： 2007/03/20（火） 19:33  ［URL］  ID:REVXC8Bu sub-VV
柊さん、どうもすみません、その件については解決しました。

にゃにゃさん、わざわざどうもありがとうございます。
その通りに記述してみたたところ、ちゃんとボーダーが表示されました。




前スレッドで、内側のパディングについて、
#boxC {
width:625px;
float:left;
padding:10px;　数値は任意
}
こうアドバイスがありましたので、早速試してみたのですが
そうすると表示が狂ってしまうのです
パディングで10pxと設定したら、その分枠を広げなければならないのでしょうか？

【現在】http://romug.web.fc2.com/test/
【パディング設定後】http://romug.web.fc2.com/test/index2.html

こうすればいいのかな？と勝手に考え、修正してみたのがこれです。
【勝手に修正後】http://romug.web.fc2.com/test/index3.html
これでHTMLやCSSに問題等が無かったら、これで行こうかと思うのですが、どうでしょう？

ようやく完成の目処がつきました。
今までお付き合いくださった皆様、どうもありがとうございます。
5   名前： アヤ ： 2007/03/20（火） 19:33  ID:I/L72zbC sub-0y
前スレッドにて、padding設定したらどうでしょうと提案したものです。

#boxC {
width:625px;
float:left;
padding:10px;
}

な感じでしたが、一番大きな枠を広げたくなければ、

#boxC {
width:605px;
float:left;
padding:10px;
}

な感じでよろしいかと。
175px（#boxB：width）＋605px（#boxB：width）＋20px（#boxB：paddingの左10px＋と右10pxで20px）＝800px（一番大きな枠）
という感じで考えます。
#というか、width設定してあるの解ってたのに、全然そのへん考えて無かったです・・・。
もちろん、【勝手に修正後】のものでも、問題ないと思います。
6   名前： ジョニー ： 2007/03/20（火） 19:33  ［URL］  ID:REVXC8Bu sub-VV
なるほど、やっぱりパディング設定したらその分横幅も延ばさなきゃいけないんですね。
前スレも今スレも、どうもありがとうございました。

モノさん、にゃにゃさん、柊さんもありがとうございました。
お陰で無事完成する事が出来ました。
大変お世話になりました、本当にありがとうございました。
一覧へ戻る