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

CSSの質問です。
テーブルレイアウトで表現するとしたら以下のようになるものを、テーブルタグを使わずに実現したいです。
試行錯誤したのですがなかなか上手くいかないのでお知恵を貸して下さい。
<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軸方向にリピートにして、ブラウザサイズに合わせて可変させたいのです。

●質問者: wintarsnow
●カテゴリ:ウェブ制作
✍キーワード:AT-X background CSS GIF URL
○ 状態 :終了
└ 回答数 : 7/7件

▽最新の回答へ

1 ● kai_ex
●5ポイント

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

にすると良いかと。

余談ですが、設問の”マークとスペースがすべて全角だったのですが、それが原因って事は・・・ないですよねぇ。

◎質問者からの返答

回答ありがとうございます。

でもすみません、「テーブルタグを使わずに実現したい」んです。つまり、それぞれの画像をDivタグなどの背景に設定する方法になると思うのですが、そのタグの組み立て方と、CSSの設定の仕方で悩んでいるのです。

それからダブルクォーテーションが全角なのは、はてなで変換されるからなのです。なので実際は半角です。

?の部分もスペース文字を入れたのですが、?に変換されてしまった様です。実際は半角スペースです。


2 ● diabah_blue
●40ポイント

http://cubic9.com/test/hatena/tsuppari/

はてな 1099403644 CSSで突っ張り棒

美しくはないかもしれませんが、URL1のようなCSSではどうでしょうか。

Windows版のInternet Explorer, Mozzila FireFox, Operaでは期待通りの見え方をしてくれるようです。

(その他の環境ではテストしていません)

URL2は伸び縮みする画像を通常の画像とCSSで実現する例です。

http://homepage.mac.com/eijiiio/golive/igocs322.html

◎質問者からの返答

回答ありがとうございます。

わざわざ作って下さったのでしょうか!?

ありがとうございます!!

実は既に似たような方法で試していたのですが、これだとウインドウ幅を小さくした時に右側の画像が左側に飛び出てしまうのです。説明がわかりにくくて恐縮ですが、作って下さったもので言うと、左側の角丸の部分がに左側が重なって見えなくなりますよね。

どこかに透明画像を入れれば良いのかとか考えたのですが、入れる場所が悪いのか効果が無くて。

2番目のURLの様に左側を通常の画像にすれば解決すると思うのですが、CSSを無効にした時に画像が表示されないようにしたいので困っています。


3 ● mizunoto
●10ポイント

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番目の回答者様、コメントにミスがありました。

>左側の角丸の部分がに左側が重なって

→左側の角丸の部分に右側が重なって

でした。失礼致しました。


4 ● sandaler
●10ポイント

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

うちではこれでOKですが、環境によっては崩れるかもしれません

◎質問者からの返答

回答ありがとうございます。

でも前のコメントにもありますようにbodyの背景は使えないのです。申し訳ないです。


5 ● Mars
●100ポイント

http://mars.jpn.org/md_samples/h1099403644/

条件を満たしているか不安もありますが、とりあえずサンプルを作ってみました。

◎質問者からの返答

回答ありがとうございます。

わざわざサンプルをつくっていただきありがとうございます!

そして、完璧です。まさしくこのようにしたかったのです。

positionを駆使しないといけなかったのですね。勉強になりました。

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


1-5件表示/7件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



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