人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

参考画像の様なレイアウトのサイトを制作しているのですが、table抜きで、divとCssで組もうとするとどうも上手くいきません。

一番右側にある灰色の四角を白い部分が大きくなっても、それに合わせて、一番下まで届くようにしたいのです。
※参考画像では、中途半端な大きさになってしまっています。

対策はありませんでしょうか?

1152202081
●拡大する

●質問者: makocan
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS サイト レイアウト 中途半端 制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● wizemperor
●23ポイント

私は左右のDIV要素の下に背景画像を指定する方法をよく使います。これだとどのブラウザでも比較的安定して表示されます。

画像の白色の要素=main、灰色の要素=sub、赤色の要素=footerという識別子(ID)を割り振っている場合には、


<div id="wrapper">

<div id="main">

白い部分

</div>

<div id="sub">

灰色の部分

</div>

</div>

<div id="footer">

赤色の部分

</div>

などとして、mainとsubをDIV要素でグルーピングします。

次にスタイルシートで、wrapperに左右の区切りをつけた背景画像を縦にリピートして表示させます。

mainとsubの背景色は透明色にしておきます。

#wrapper {

width: 760px;

background-image: url(bg.gif);

background-repeat: repeat-y;

}

#main {

float: left;

width: 600px;

color: #000;

background-color: transparent;

}

#sub {

float: right;

width: 170px;

color: #000;

background-color: transparent;

}

#sub {

clear: both;

}


上の例では、背景画像として左の600pxが白、右の170pxが灰色になっている横幅760pxの画像(縦幅は適当に64px程度とかでよいと思います)をwrapperに背景画像として指定します。

これで見た目は下までつながっているように見えるようになります。


ダミーURL: http://yahoo.co.jp/


2 ● noko-noko
●23ポイント

左右の内容の量にかかわらず、左は白、右は灰色とするためには、左の div、右の div とその両方を含む div をつくって、その全体の方に背景画像(灰色を描いたもの)を縦方向にだけ繰り返しで設定するのがいいように思います。

下のリンクは参考までにどうぞ。

http://desperadoes.biz/style/dan/index.php

◎質問者からの返答

やはり、それしか方法はないですかね(^^;

こう考えると、tableは邪険に扱われてますが、結構使い勝手の良いものだったと思えますね。


3 ● ElekiBrain
●22ポイント

http://q.hatena.ne.jp/1152202081


以下のソースを見てください。

(xxxは任意の数字やピクセル)

.

.

#contents{

position: absolute ; _position : fixed ;

width : xxx.px ;

height : xxx.px ;

display : block ; //ただし、元々ブロック要素の場合指定しない。

}

.

.

<span id="contents">トップページ</span>


このようにすることによって、

移動しないフローティングボックスが出現するはずです。

ポイントは position: absolute ; _position : fixed ;

です。

本来ならば本来ならば top や background-color(またはimage) が必要ですが見易さを考慮して書いていません。

ただし、この方法はややクロスブラウザ対策に難があります。

特に古いブラウザには注意すべきでしょう。

一応対策として、ボックスが動いても、問題のないレイアウトをしておくことをお勧めします。


4 ● ElekiBrain
●22ポイント

ダミー:http://q.hatena.ne.jp/1152202081


前回、自分で動かしてみて結構動かない部分がありましたので、訂正いたします(そもそも、質問の趣旨とずれている可能性がありますが、こういう方法でもメニュー部分などが途切れていないように見せかけることはできます。強引ですが)。

以下訂正したソースを記述します。

============================================================

<?xml version="1.0" encoding="Shift_JIS"?>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

<title>Fixed_test</title>

</head>

<style type="text/css">

<!??

*{

margin:0px;

}

body{

_overflow:hidden;

}

div#Fixed_test{

position:fixed;

_position:absolute;

top:0px;

left:0px;

overflow:hidden;

width:200px;

height:500px;

padding:10px;

background:#AAAAFF;

}

div#contents{

margin-left:250px;

top:0px;

left:100%;

width:100%;

height:1000px;

overflow:scroll;

padding:20px;

background:#FFAAAA;

}

??>

</style>

<body>

<div id="Fixed_test">

このブロックが止まったままになります。

</div>

<div id="contents">

このブロックが動きます。(任意の長文を挿入)<br />

</div>

</body>

</html>

============================================================

現時点での動作確認は、FirefoxとIEのみです。

こんなものでよろしければ……。

◎質問者からの返答

ありがとうございました!

試して見たいと思います。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ