
DreamWeaverを使い始めました。
CSSの段組左にテーブルを入れると下記のようになりました。
-----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<style type="text/css">
<!--
#wrap {
width: 500px;
}
#content {
float: left;
width: 200px;
background-color: #00CCCC;
}
#main {
width: 300px;
float: left;
background-color: #99FF99;
}
#footer {
clear: both;
width: auto;
background-color: #CCFF66;
}
-->
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<table width="200px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1段</td>
</tr>
<tr>
<td>2段</td>
</tr>
</table>
</div>
<div id="main">メインメインメインメインメイン</div>
<div id="footer"> 下</div>
</div>
</body>
</html>
-----↑ここまでDreamWeaver
そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。
ブラウザプレビューでは正常ですが、編集しにくくて困ってます。
table {
border: none;
border-collapse: collapse;
}
DWでは、このようになるものなのでしょうか。
No.4ベストアンサー
- 回答日時:
#3です。
画像を入れてみたところ、おっしゃるような表示になりました。
ここからは推測ですが、Dreamweaverの表示方法の解釈によってこうなってしまったのではないかと個人的には思います。(元々デザインビューはDreamweaver独自の表示方法ですし、何かのブラウザとそっくり同じという表示はしてくれません。)
ご承知のように table の borderプロパティ は、デフォルトで 1 が設定されています。
border="0"を削除した時に、既にCSSで"0"設定されているにもかかわらず、デザインビューがそのデフォルト border="1"を確保しようと変に頑張っているのではないかと…(^_^;
だからテーブルが左右で2px分大きくなり、中身の幅が画像で固定されているのでそのしわ寄せで右ボックスが落ちた…
実際、HTMLで border="0" かつ CSSで border を 1 にすると、IEで同じような表示になります。
と言いつつ本当の所は分かりませんので、こんなことを思う人もいる、程度にお考え下さい。
たびたび、ありがとうございました。
確かにモードを「標準」から「レイアウトモード」にするとテーブルのサイズの横にカッコ書きで2px多い数字が出ています。
NowThinkingさまの説が正しいような気がします。
ずれたままではデザインビューの役目が果たせないので、とりあえずはDWの通りにして、あとから削除置換しようと思います。
ありがとうございました。
No.3
- 回答日時:
Dreamweaverのバージョンはいくつでしょうか?
少なくとも私の環境(WinXP、Dreamweaver8)のデザインビュー上では、ずれたりせず、問題なく表示されています。
この回答への補足
検証をありがとうございます。
私も同じ環境です。
が、すみません、タグの漏れがありました。
各tdにはtableの横幅サイズと同じ200pxの画像を入れています。
どうでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML tableのセルにtextareaを...
-
テーブルとテーブルの間隔について
-
同じ幅指定のつもりなのに、ブ...
-
HTMLのテーブルをExcelにCopy&P...
-
画面幅に合わせてテーブルのカ...
-
メモ帳でホームページ作成
-
HTML5で、テーブル内tdタグの高...
-
ホームページのテキストを折り...
-
<fieldset>タグについて
-
テーブルタグの中にdivを含めて...
-
tableタグとformタグの組み合わせ
-
TRタグの余白をcssで設定するには
-
テーブルの任意の列を非表示に...
-
html でのテキスト結合について
-
<TABLE>の<TD>タグの幅指定につ...
-
テーブル内に画像を表示したい。
-
テーブルのセルに画像をピッタ...
-
スクリプトを挿入後、ページデ...
-
チェックボックスが複数チェッ...
-
IE7でinputタグのtextがはみ出る
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSで特定のテーブルだけに...
-
テーブルとテーブルの間隔について
-
テーブル内のセル間にスペース...
-
<th>タグを使っても太字にしな...
-
TABLEのセルの中の文字を行単位...
-
table表を横に並べる際の間隔指定
-
HTML tableのセルにtextareaを...
-
スタイルシートで左側だけ色を...
-
同じ幅指定のつもりなのに、ブ...
-
ホームページのテキストを折り...
-
<fieldset>タグについて
-
HTML5で、テーブル内tdタグの高...
-
テーブルデータを折り返して表...
-
画面幅に合わせてテーブルのカ...
-
tableを縦に続けるとtable間の...
-
html5のテーブル内でdivのタブ...
-
HTMLのテーブルをExcelにCopy&P...
-
textareaの外側の文字が下付き...
-
<li>と<table>タグについて
-
(HTML)Tableを任意の位置に置...
おすすめ情報