• ベストアンサー

スライスが崩れてしまい、困っています。

HPを作っています。 fireworksで全体のレイアウトを作りスライスをテーブルで書き出しています。 左側にメニューが縦並びになり、右側のセル(htmlのスライス)に記事が入るデザインです。 横幅は固定ですが、記事が長くなったら下に伸びて欲しいと思っています。 ところが、右の記事が長くなると、上下にぴったりくっついていて欲しい各メニューの間に空白が開いてしまいます。 私としてはメニューの下にひとつ空セルがあるので、そこだけ伸縮して欲しいのですがうまくいきません。 1.tdにwidthを入れる。 2.spaserで固定する。 は試してみましたが、1は全く改善されず、2は後から記事の増減があると不具合が出るようです。 どーしてもだめならメニュー部分だけ別tableにして入れ子にしようかとも思っているのですが…他にシンプルで良い解決方法がありましたらお教え下さい。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • tsuruco
  • ベストアンサー率75% (3/4)
回答No.2

>右の記事が長くなると、上下にぴったりくっついていて欲しい各メニューの間に空白が開いてしまいます。 右の記事に合わせて左メニューのheightが変わっているせいでしょうか。 左メニューのheightを固定するか、おっしゃるとおりメニューと記事は別テーブルにして、その二つのテーブルを大きなテーブルで固定するなどしたら安定するかもしれないですね。 質問を取り違えていたらごめんなさいですが・・・

ririkkko
質問者

お礼

取り違えていないです!その通りです。 左メニューのheight(あ、widthと間違えていました!恥ずかしー)も指定してみたのですが、なぜか改善されず。 スライス使いつけないので、実は他にいい方法があるのではないかと思って聞いてみました。 納期も短いのでシンプルにテーブル別に作ってみます。 ご助言ありがとうございました。

その他の回答 (1)

  • Ken-G
  • ベストアンサー率39% (13/33)
回答No.1

メニューを1つのテーブルで作り、そのテーブルが入っているセルのtdの属性にvalign="top"を入れる。 これでメニューのテーブルが上に引っ付くと思います。 こんな感じでどうでしょうか?

ririkkko
質問者

お礼

わ、早い回答、ありがとうございます。 やはり別テーブルが一番ラクに直せそうですね。 あんまりあれこれ考えすぎず、その方向で直してみようと思います。ありがとうございました。

関連するQ&A

  • Fireworksのスライスとスペーサーについて

    Fireworksでスライスをするときにスペーサーを入れる設定にすると 元の画像が300ピクセルとすると width="300" のテーブルが書き出されます。 しかし、よく見るとテーブル中にはスライスされた元画像の合計300ピクセルと スペーサー1ピクセルの合わせて301ピクセルの画像が入っています。 この場合、Fireworksの設定で回避する方法は無いのでしょうか? このまま使って悪さをしないでしょうか? また、私はこの書き出されたテーブルを更に別のテーブル(これは自分でコーディングした物) にネストしたいのですが、このテーブルを入れる <td> を  width="300" にして大丈夫なのでしょうか? サイズに間違いがあるとブラウザがリロードするのではと思うと心配です。 スライスのテーブルをシングルにすると崩れるといわれていますが、本当にシングルで 使わない方がいいのでしょうか? どなたかご指導くださいませ。

  • CSSで「継承しない」という指定はありますか

    tableを入れ子にして td {width:200px;} とすると、すべてのtdに適用されますよね。 tdの中の入れ子になっているテーブルでは width指定はしたくない=200pxを継承したくないのです。 width:inherit; という属性はありますが、「継承しない」という値はありませんか? ちなみに、table>td {width:200px;}はIE非対応なので使用不可です。

    • ベストアンサー
    • HTML
  • HTML テーブルに画像を貼り付けるときのサイズ

    ページいっぱいに広がるテーブルをひとつ用意し、 それを横に3等分して、それぞれのセルの下部に画像を表示しようと思いました。 しかし、表示してみると、テーブルは画面の横幅よりも広がってしまい、思うとおりに表示できません。 画像の代わりに文字を表示してみると、思った位置に表示できているのですが・・・。 画像を、画面の横幅を3等分したセルいっぱいに表示するにはどうしたらよいのでしょうか? 現在のソース: <TABLE WIDTH="100%" HEIGHT="100%">  <TR ALIGN="center" VALIGN="bottom">    <TD WIDTH="33%">     <IMG SRC="~~" WIDTH="100%">    </TD>    <TD WIDTH="33%">     <IMG SRC="~~" WIDTH="100%">    </TD>    <TD WIDTH="33%">     <IMG SRC="~~" WIDTH="100%">    </TD>   </TR> </TABLE>

  • Photoshop7.0スライスの順番をかえたい

    Photoshop7.0を使用しているのですが、 画像をスライスツールで分割して、web用に保存、 この時にテーブルのセルを左列セルから下へ、そして左列下までいってから右(スライス画像A)の列へ、としたいのですが、 スライスが左、右(スライス画像A)、左セルへ戻り下へ、とよんでしまいます。 これは、スライス画像の順番と同じなので、そのせいだと思うのですが、その原因となっているスライス画像Aの順番(数字)をもっと後ろにするにはどうすればいいのでしょうか? スライスの順番を、スライスを引き直さず修正する方法を教えて下さい。

  • CSSでtdの横幅の片方だけを指定したい

    横2列の table を配置して、一方の tdのみ 120px で強制的に確保したいです。 <table style="width:100%"> <tr> <td style="width:120px;">120pxで固定したい</td> <td>残りスペース全て使う </td> </tr> </table> ※ここに記載するため、styleで表記しています。 上記でCSS指定すると、ブラウザの横幅に合わせて伸縮してしまい120pxの幅より大きくなってしまいます。 伸縮せず120pxで強制する指定方法がございましたら教えてください。

  • HTMLのレイアウト

    HTMLのテーブルである列だけ伸縮を自由にしたいです。 ほかの列は画面を延ばしても固定で動かない状態です。 イメージ的には以下のように2番目の列だけ幅を動かしたいのです。 <table> <tr> <td height="100%" width="200">aaa </td> <td height="100%" width="100%">bbb </td> <td height="100%" width="100">ccc </td> </tr> </table> 何か方法はないでしょうか。

    • ベストアンサー
    • HTML
  • HTMLの表で幅を指定しても折り返すことは無理なのでしょうか?

    以下のHTMLの表は横幅を指定していますが、 すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか? <html> <head> <title>table</title> </head> <body> <table width="570" border="1"> <tr><td width="130"> test1</td> <td bgcolor="#CCCCCC" width="440"> oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </td></tr></table> </body> </html>

    • ベストアンサー
    • HTML
  • テーブルを使用してレイアウトしている場合の表示順序

    テーブルを使用してレイアウトしている場合、例えばテーブルAにはメニュー(PHPスクリプト無し)、テーブルBとテーブルCにはPHPスクリプトを使用した場合 <html> <head> <title>例</title> </head> <body> <table border="0"> <tr> <td>テーブルA</td>//メニュー(入れ子) <td>テーブルB</td>//テーブルB内にPHPスクリプト使用(入れ子) <td>テーブルC</td>//テーブルC内にPHPスクリプト使用(入れ子) </tr> </table> </body> </html> テーブルAとテーブルBとテーブルCが同時に表示されるのではなく、最初にテーブルAを表示したあと、その後、テーブルB,テーブルCを処理後、テーブルB,テーブルCを表示という順序にしたいのですが、CSSでテーブルAに、table-layout:fixed;を使用した(横幅も指定)のですがうまくいきません。もしこの方法でOKでしたら指定の仕方が間違っているのでしょうか?よろしくお願い致します。

    • ベストアンサー
    • PHP
  • テーブルの幅

    tableのwidth指定についての質問です。 同じレイアウトで複数のhtmlファイルを作るのですが、その中のテーブル及びセルの幅をwidthで固定してあるのにも関わらず、セル内のテキストの長さによって各ファイルごとのテーブルのセルの幅が、IEでの表示で変わってしまいます。 <table width="450" cellspacing="0" cellpadding="2" border="1"> <tr> <th bgcolor="#ffcccc" width="150">aaaaaaaaa</th> <th bgcolor="#ffcccc" width="286">\100,000</th> </tr> <tr> <td colspan="2">ここには商品説明が入ります。ああああああああああああああああああああああああああああああああああああ</td> </tr> </table> 上記のaaaaaaaaaの部分がファイルによって長さが違うのですが、それによってセルの幅が変わってしまいます。 IE6でプレビューすると変わりますが、firefoxでは変わりません。 <th>を<td>に変更すると、幅は固定され変わりません。 IEの場合、thでwidth指定が出来ないのでしょうか。 なぜ変わってしまうのでしょうか?どこかに記述の問題があれば教えていただければありがたく思います。

  • テーブル<TD>の幅の固定

    テーブルのTD幅をWIDTHで指定しているのですが、入力するテキストによって幅が動いてしまいます。 例) <table width="50">  <tr>   <td width="10">AAAAAAAAAAAAAAAA</td>   <td width="40">AA</td>  </tr> </table> というような場合、幅の狭い方のセル幅が広くなってしまいます。 また逆に広い方が何度も改行させられて出力されたり、出力させたいテキストによって、いかようにも幅が変更されてしまいます。 他のサイトなども色々調べてみて、半角英数字の場合は特に顕著ということも書かれてあったのですが、半角英数字の出力は必須なんです。 (全角文字の場合でも、完全に固定とはなりませんでした) やっぱり完全にテーブルのセル幅を固定するのはムリなのでしょうか? 何か解決方法はありますでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML