absoluteがcolにはいらない？
-
0 名前： ゆうじ ： 2007/04/11（水） 06:22 ID:7jxj4mU6 sub-.G
- スタイルシート
.contents {
background-color: #FFFFFF;
border: solid 1px #CCCCCC;
width: 800px;
margin: auto;
text-align: left;
position: relative;
}
/* メイン */
.main{
width: 580px;
position: absolute;
left: 200px;
}
/* 左 */
.left{
width: 180px;
margin-left: 10px;
}
Html
<div class="contents">
<div class="main">
<h2><a href="index.html">HOME</a></h2>
<div class="left">
<h2><a href="index.html">NEWS</a></h2>
</div></div></div>
とするとabsoluteのせいか、mainがcolに入らず、背面に色がつきません。
どうしたものでしょうか？
-
1 名前： カヅサツ ◆ThCi95HEzw ： 2007/04/11（水） 06:22 ［URL］ ID:O5hEMlpW sub-r2
- colって何ですか？
-
2 名前： ゆうじ ： 2007/04/11（水） 06:22 ID:7jxj4mU6 sub-.G
- すいません。説明不足でした。colは私が勝手につけたクラスです。
その中に.mainと.leftを入れたいのですが・・
-
3 名前： ゆうじ ： 2007/04/11（水） 06:22 ID:m2y3tk9K sub-tS
- すいません。めちゃくちゃでしたね。.colじゃなくて.contentsですね。本当に申し訳御座いません。
初心者で本を見ながらなんですがなかなかうまくいきません。
-
4 名前： カヅサツ ◆ThCi95HEzw ： 2007/04/11（水） 06:22 ［URL］ ID:O5hEMlpW sub-r2
- > どうしたものでしょうか？
.contentsにheightも指定しては如何でしょうか。
-
5 名前： ゆうじ ： 2007/04/11（水） 06:22 ID:7jxj4mU6 sub-.G
- できました。できるんですが、これだとページごとに高さが違う場合に困るんよね。
こんなことって通常おこりうることなんでしょうか?
-
6 名前： カヅサツ ◆ThCi95HEzw ： 2007/04/11（水） 06:22 ［URL］ ID:O5hEMlpW sub-r2
- > こんなこと
どんなこと？
-
7 名前： ゆうじ ： 2007/04/11（水） 06:22 ID:7jxj4mU6 sub-.G
- クラスのなかにクラスを入れているのにその中に入っているように表示されないというようなことです
-
8 名前： カヅサツ ◆ThCi95HEzw ： 2007/04/11（水） 06:22 ［URL］ ID:O5hEMlpW sub-r2
- >>> こんなことって通常おこりうることなんでしょうか?
>> どんなこと？
> クラスのなかにクラスを入れているのにその中に入っているように表示されないというようなことです
そりゃあ、position: absolute にしていれば、通常はそうなるでしょう。
-
9 名前： 某制作 ： 2007/04/11（水） 06:22 ID:gFY2524F sub-Q5
- 凄くお節介なんですが
ひょっとして左右２分割のサイトの制作を
考えていらっしゃいますか？
それでしたら特別な事情が無い限り
positionよりも
float:left;や
float:right;を使ったほうが
良いかと思います。
一般的ですし。。。
余計な事いってしまってすみません。。。
.contets {
background-color: #FFFFFF;
border: solid 1px #CCCCCC;
width: 800px;
margin: auto;
text-align: left;
}
/* メイン */
.main {
width: 580px;
margin-left: 200px;
background-color:red;
}
/* 左 */
.left {
width: 180px;
margin-left: 10px;
float:left;
background-color:blue;
}
上記CSSをfloat:leftに修正してみたバージョンです
-
10 名前： ゆうじ ： 2007/04/11（水） 06:22 ID:zIgsz6zk sub-zH
- お返事遅くなってしまい申し訳ございません。
カヅサツさん、そうなんですか。初心者で一応本を見ながらやってるんですけど、それはわかりませんでした。ご迷惑おかけして本当にすいません。
某制作さん、おせっかいなんてとんでもないです。ありがとうございます。
本には私のやり方で左右分割のやり方がのってたんでそのようにしていました。
通常、皆さんはfloatを使うんですね。大変勉強になりました。
試してみたところ思うようにできました。ありがとうございました。
-
11 名前： Z ◆XTzyosZXcL ： 2007/04/11（水） 06:22 ID:XzBwlIqx sub-Cl
- >>9-10
float（浮動化）プロパティの使い方には注意が必要です(^^;。
参考・通常フローと浮動化：
http://www.kanzaki.com/book/css/3-2.html
参考・フロートの性質：
http://www.geocities.jp/multi_column/float/05.html
#プロを名乗るならば、「一般的」という言い方をするだけではなくてルールもちゃんと説明して欲しいです(^^;
