ボックス　タグ教えてください

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

0   名前： 関　勝 ： 2006/11/14（火） 23:30  ID:FmX/oq31
こんばんは　お騒がせ致します。
早速ですが　ご質問致します。
同じ大きさのボックスを横２列
縦三段に致しています。
それを大きく、divタグでくくっています。
しかし、同じようなサイズですので
float:left;を使い　ボーダをかぶらないように
入れ使用いたしていますが、３段目　右に寄りません
三段目から、右列から始まり　最後の６個目
段落ちします。綺麗にそろえるにはどのタグを
用いたらいいですか。教えてください

#pen{
float:left;
width:175px;
height:110px;
margin-left:5px;
border-top:solid 1px #CCCCCC;
　　　border-left:solid 1px #CCCCCC;
　　　　border-bottom:soid 1px #CCCCCC;
　borde-right:solid 1px #CCCCCC;
}
#pen２{
float:left;
width:175px;
height:110px;
borde-right:solid 1px #CCCCCC;
border: 1px solid #CCCCCC;
}
繰り返し　です。
ｈｔｍｌは　divで一つずつ、くくっています。
わかる人には簡単でも　疑問だらけです。
お願い申します。
1   名前： 匿名 ： 2006/11/14（火） 23:30  ID:0CPIYqdf
htmlもソースを下さい。
2   名前： 関 ： 2006/11/14（火） 23:30  ID:FmX/oq31
ocpiyqdf様
お忙しいのにすみません
こんな感じです
以下

html
<div id="box">
<div id="box_photo1"></div>
<div id="box_photo2"></div>
<div id="box_col"></div>
<div id="pen1"></div> <!-----ここから下になります--->
<div id="pen2"></div>
<div id="pen3"></div>
<div id="pen4"></div>
<div id="pen5"></div> <！----この部分からずれ込みが始まります---->
<div id="pen6"></div> <!-----4段目に落ちます----->

</div>
宜しくお願い致します。
ごめんなさい！
3   名前： 匿名 ： 2006/11/14（火） 23:30  ID:fymDJhAJ
ｃｓｓも下さい。というべきか、自分で勉強してくださいと言うべきか

最初の説明と違うようなのですが？
この場合、最低<div id="box">のcssも大きく影響するくらいはわからないと。
説明しても理解できないのでは？本質的な部分はすごく簡単です。が、眠いの
です。そこを我慢して勉強したら、開眼しますよ。

まず、cssの基本をまず、勉強したほうがいいと思います。
html出させておいてごめんなさい。
4   名前： suzunone ： 2006/11/14（火） 23:30  ID:rTI.mjdn
関さん、奮闘しているようですね。
ちなみに、ボックスですが、大枠でdiv使っているのはいいと思います。
どのような形にしたいのかいまひとつ伝わってきませんが、□をＢＯＸとすると、

□□
□□
□□

の形にしたいのでしょうか？

それであれば大枠でdivを使っているのであれば、さらに1段ごとにdivで囲んであげればいいのではないでしょうか？

ちょっと分かりにくいかもしれませんが、

┌────┐
│┌──┐│
││■■││
│└──┘│
│┌──┐│
││■■││
│└──┘│
│┌──┐│
││■■││
│└──┘│
└────┘

こんな感じで囲ってみてください。

また、横幅によって段組が崩れます。適宜指定してください。


5   名前： 五月雨 ： 2006/11/14（火） 23:30  ID:8TmpGFs.
元のタグ構成を完全無視していますが、

> 同じ大きさのボックスを横2列縦三段に致しています。
を伺う限り、私なら以下のように書きます。

<head>
<style type="text/css"><!--

#pen > ul > li {
	list-style-type: none;
	float: left;
	width:175px;
	height:110px;
	margin-left:5px;
	border:solid 1px #ccc;
}

#pen > ul {
	clear: left
}

--></style>
</head>
<body>

<div id='pen'>
	<ul>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
	</ul>
</div>

</body>


子供セレクタはIE6では解釈できないので、CSSハック使うなり、子孫セレクタを使うなりして、適宜編集してください。
6   名前： イサ ： 2006/11/14（火） 23:30  ID:0yJG31Zh
以下のソースではダメでしょうか？


<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="text/css">
<title>テスト</title>

<style type="text/css">

<!--

.top-box-left     {border:solid 1px #000000;
                   float:left;
                   margin-right:10px;
                   margin-bottom:10px;
                   padding:5px;}

.top-box-right    {border:solid 1px #000000;
                   float:left;
                   padding:5px;}

.middle-box-left  {border:solid 1px #000000;
                   float:left;
                   margin-right:10px;
                   margin-bottom:10px;
                   padding:5px;}

.middle-box-right {border:solid 1px #000000;
                   float:left;
                   padding:5px;}

.bottom-box-left  {border:solid 1px #000000;
                   float:left;
                   margin-right:10px;
                   margin-bottom:10px;
                   padding:5px;}

.bottom-box-right {border:solid 1px #000000;
                   float:left;
                   padding:5px;}

.clear     {clear:both;}

-->

</style>

</head>

<body>

<div class="pen">

<div class="top-box-left">
１−１
</div>
<div class="top-box-right">
１−２
</div>
<br class="clear">

<div class="middle-box-left">
２−１
</div>
<div class="middle-box-right">
２−２
</div>
<br class="clear">

<div class="bottom-box-left">
３−１
</div>
<div class="bottom-box-right">
３−２
</div>
<br class="clear">

</div>

</body>
</html>





7   名前： イサ ： 2006/11/14（火） 23:30  ID:0yJG31Zh
>>6

追記です。

 width:175px;
 height:110px;



▲を忘れていました。
各ＣＳＳのボックスに、追記してください。
一覧へ戻る