テーブルレイアウトで表現するとしたら以下のようになるものを、テーブルタグを使わずに実現したいです。
試行錯誤したのですがなかなか上手くいかないのでお知恵を貸して下さい。
<style type=”text/css”>
<!--
.bg{
background: url(/bg.gif) repeat-x center;
}
-->
</style>
<table width=”100%” border=”0” cellpadding=”0” cellspacing=”0”>
<tr>
<td width=”249”><img src=”left.gif” alt=”” width=”249” height=”60” /></td>
<td class=”bg”>?</td>
<td width=”511”><img src=”right.gif” alt=”” width=”511” height=”60” /></td>
</tr>
</table>
イメージとしては、ブラウザウインドウに水平に突っ張り棒をしてるような感じの画像になります。
左右の画像はそれぞれ左右にくっついて固定で、真ん中は背景画像をX軸方向にリピートにして、ブラウザサイズに合わせて可変させたいのです。
No.1
3
0
5pt
<html>
<head>
<style type=”text/css”>
<!--
.bg{
background: url(bg.gif);
background-repeat : repeat-x;
background-attachment : fixed;
background-position : 50% 50%;
}
-->
</style>
</head>
<body>
<table width=”100%” border=”0” cellpadding=”0” cellspacing=”0”>
<tr>
<td width=”249”><img src=”left.gif” width=”249” height=”60”></td>
<td class=”bg”>?</td>
<td width=”511”><img src=”right.gif” width=”511” height=”60”></td>
</tr>
</table>
</bldy>
</html>
ですが、ブラウザによって崩れると思います。
ブラウザは上部から読み取っていきますので。もし画面幅を制限して中央部？の<td>のwidthを大きめに取れば、右の画像は端に寄っていきます。ただ、これで希望通りのレイアウトになるのはIEだけかもしれません。
また、ブラウザとtableの間の隙間が気になる場合、
<body topmargin=”0” leftmargin=”0”>
にすると良いかと。
余談ですが、設問の”マークとスペースがすべて全角だったのですが、それが原因って事は・・・ないですよねぇ。
No.2
1291
40pt
http://cubic9.com/test/hatena/tsuppari/
はてな 1099403644 CSSで突っ張り棒
美しくはないかもしれませんが、URL1のようなCSSではどうでしょうか。
Windows版のInternet Explorer, Mozzila FireFox, Operaでは期待通りの見え方をしてくれるようです。
(その他の環境ではテストしていません)
URL2は伸び縮みする画像を通常の画像とCSSで実現する例です。
回答ありがとうございます。
わざわざ作って下さったのでしょうか！？
ありがとうございます！！
実は既に似たような方法で試していたのですが、これだとウインドウ幅を小さくした時に右側の画像が左側に飛び出てしまうのです。説明がわかりにくくて恐縮ですが、作って下さったもので言うと、左側の角丸の部分がに左側が重なって見えなくなりますよね。
どこかに透明画像を入れれば良いのかとか考えたのですが、入れる場所が悪いのか効果が無くて。
2番目のURLの様に左側を通常の画像にすれば解決すると思うのですが、CSSを無効にした時に画像が表示されないようにしたいので困っています。
No.3
130
10pt
http://www.cybergarden.net/webcss/technique.html#nontable
Error 404: File not found | CYBER@GARDEN
URLは段組レイアウト解説があります。（下部）
もし、左上に固定してしまうようでしたら・・・縦線をbodyで背景として流してはいかがでしょうか？
body {
background: url(/bg.gif) repeat-x center;
}
#left {
width: 249px;
float: left;
margin: 0px
padding: 0px
}
#right {
width: 511px;
margin: 0px 0px 0px 250px;
padding: 0px;
}
</head>
<body>
<div id=”left”>
<img src=”left.gif” alt=”” width=249 height=60 />
</div>
<div id=”right”>
<img src=”right.gif” alt=”” width=511 height=60 />
</div>
回答ありがとうございます。
bodyの背景画像は既に使用しているので使えないのです。すみません。
仮に使えた場合でも、この突っ張り棒は左右にくびれがあるので、そこからbodyの背景にした棒の可変部分が見えてしまうので、それも避けたいのです。
--
2番目の回答者様、コメントにミスがありました。
>左側の角丸の部分がに左側が重なって
→左側の角丸の部分に右側が重なって
でした。失礼致しました。
No.4
6710
10pt
<html>
<head>
<style type=”text/css”>
<!--
body {
background-image: url(back.gif);
background-repeat: repeat-x;
}
.hidari {
position:absolute; top:0px; left:0px;
}
.migi {
position:absolute; top:0px; right:0px;
}
-->
</style>
</head>
<body>
<img src=”hidari.gif” class=”hidari”>
<img src=”migi.gif” class=”migi”>
</body>
</html>
うちではこれでＯＫですが、環境によっては崩れるかもしれません
回答ありがとうございます。
でも前のコメントにもありますようにbodyの背景は使えないのです。申し訳ないです。
No.5
20320
回答ありがとうございます。
わざわざサンプルをつくっていただきありがとうございます！
そして、完璧です。まさしくこのようにしたかったのです。
positionを駆使しないといけなかったのですね。勉強になりました。
助かりました。ありがとうございました！
No.6
1291
40pt
> どこかに透明画像を入れれば良いのかとか考えたのですが、入れる場所が悪いのか効果が無くて。
で気付きました！下限は固定するんですね。
一般的に使われている方法かどうかは分からないのですが、一応手直ししておきました。
よろしかったら「過程」もご覧下さい。
追加回答ありがとうございます！
あ、最小幅を設定する方法もあったんですよね。
この方法の方がスマートだし、私はSafariなのでこれで完璧！なのですが、ブラウザ対応を考えると、今は5番目の回答の方法を使いたいと思います。
でも今後の参考にさせていただきます！ ありがとうございました！
No.7
961
8pt
<head>
<title>こんなcssでいかがでしょうか？</title>
<style>
body {background: url(/bg.jpg) repeat-x center;}
.left {background-image: url(left.gif);
float: left;width: 20%;}
.main {float: left;width: 30%;}
.right {background-image: url(right.gif) ;
float: left;width: 50%;}
</style>
</head>
<body>
<div class=”left”></div>
<div class=”main”><p>コメント</p></div>
<div class=”right”></div>
</html>
body要素に割り当てる背景画像はそれとして、各div要素にも背景画像は上記cssのような方法で指定できますよ。
それと、左右にそれぞれ割り振りたい画像にも寄るのですが、そもそもpx値で横幅を固定されてしまっていると、お望みの「ブラウザサイズに合わせて可変させたい」という部分が実現されなくなってしまいます。
(横幅が249px+511px=760px以下のブラウザサイズになる場合だって多いですよね)
妥協案に近いと思いますが、%で指定するのはどうでしょうか？
画面の横幅の合計が100%になるように、各要素を配分するとたいていのブラウザで上手くいくようです。
回答ありがとうございます。
イメージの説明が下手だったかもしれません。
質問にもあるように「突っ張り棒」だったのです。どうしてもこの質問だと「段組したいのかな」と受け取られそうなのですが、そうではなくまさに「突っ張り棒」で、ウインドウの幅と連動する棒の画像を置きたかったのです。ただのシンプルな棒なら悩まなかったのですが、両端に装飾のある棒だったので。
横幅左右の画像を足して760pxになってるのは、760px以上の環境を想定しているので、それより小さい環境の場合は右側が隠れてかまわなかったのです。
とにかく、質問にあるテーブルレイアウトと同じようにしたい、というのが目的だったのです。
--
皆様、ありがとうございました！
diabah_blue
2004/11/03 14:34:31
89
89
Mars
2
1
1
回答ありがとうございます。
でもすみません、「テーブルタグを使わずに実現したい」んです。つまり、それぞれの画像をDivタグなどの背景に設定する方法になると思うのですが、そのタグの組み立て方と、CSSの設定の仕方で悩んでいるのです。
それからダブルクォーテーションが全角なのは、はてなで変換されるからなのです。なので実際は半角です。