バージョン選択

フォーラム

メニュー

オンライン状況

22 人のユーザが現在オンラインです。 (19 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 22
もっと...

サイト内検索

質問 > フロント機能 > 3カラム時、メインにテーブルを入れるとカラム落ちします

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
tamahime
投稿日時: 2013/1/7 14:27
対応状況: −−−
常連
登録日: 2012/10/15
居住地:
投稿: 44
3カラム時、メインにテーブルを入れるとカラム落ちします
いつもこちらで助けられております。
初歩的なことかもしれませんが、
どなたかご指導いただければ幸いです。

タイトル通り、
3カラム時、メインにテーブルを入れるとカラム落ちします。

 ※該当ページのテーブルのみ削除すると正常に表示されます。
 ※テーブルがあるページ以外では正常に表示されます。


そこで、table.cssでテーブルのあるページのテーブル幅を
指定してみたのですが、うまくいきません。

例えば、

 div#undercolumn_xxx table {
  width: 300px;
 }

のように追記して、極端に狭い幅のテーブルにしてみてもダメです。

デフォルトのテーブル設定は以下のようになっており、
ここは触っていません。

/************************************************
tables
************************************************ */
/* デフォルトテーブル
----------------------------------------------- */
table {
margin: 15px auto 20px auto;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
width: 100%;
border-collapse: collapse;
text-align: left;
}
table th {
padding: 8px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #333;
background-color: #f0f0f0;
font-weight: normal;
}
table td {
padding: 8px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}


この幅の指定のような部分はまだ理解が足りず、
あれこれ試行錯誤してこうなるのか、と理解しつつあるところです。
何かアドバイスをいただければ助かります。
どうぞよろしくお願いします。


EC-CUBE 2.12.2
XAMPP1.7.7
OS Windows7
PHP 5.3.8
MySQL 5.0
apache2.2
Google Chrome,IE,Firefox
DELIGHT
投稿日時: 2013/1/7 15:06
対応状況: −−−
仙人
登録日: 2010/2/3
居住地: 熊本県・九州・長野県・関東甲信越
投稿: 572
Re: 3カラム時、メインにテーブルを入れるとカラム落ちします
その内容だけでは原因まで推測することはできませんでしたが、
同様の症状と解決法が過去ログから見つかりました。

http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=6036&forum=11

<!--{$arrProduct.main_comment|nl2br_html}-->
nl2br_htmlの部分で改行を改行タグに変換しているので、
商品のコメントなどに直接tableを書く時に改行をすると、


<table>
<br />
<tr>
<br />
<th>
<br />
…


不適切な場所に改行タグが入ってしまいデザインが崩れる、とのことです。

tamahime様の症状と同じものかどうかは分かりませんが、
ご参考になさって下さい。


----------------
+ DAISY inc. -------------------- +
EC-CUBE構築・カスタマイズサービス
EC・WEB構築などお気軽にご相談ください。

デイジー株式会社
http://daisy.link/

tamahime
投稿日時: 2013/1/7 23:43
対応状況: −−−
常連
登録日: 2012/10/15
居住地:
投稿: 44
Re: 3カラム時、メインにテーブルを入れるとカラム落ちします
DELIGHT様

コメントをありがとうございました!!!
過去ログは見たつもりだったのですが気付いておりませんでした。

残念ながら、私のケースとは違うようでした。
今回、管理画面からではなく直接ファイルに書き込んでおりまして、
テーブル内には改行タグは一つも入っておりませんでした。
(ページは新規に作成したものです。)

また、いろいろ調べてみて長いURLがあると似たようなことが起こることを知り、
今回の私のケースでは長い日本語の文章が入っていましたので
試しに短い単語だけ入った小さな小さなテーブルにしてみたのですが、
それでもやはり直りませんでした。

自分でももう少し調べてみますが、
もしも原因にお心当たりのある方がいらっしゃいましたら、
ヒントだけでも教えていただければありがたいです。

どうぞよろしくお願いいたします。
DELIGHT
投稿日時: 2013/1/8 14:10
対応状況: −−−
仙人
登録日: 2010/2/3
居住地: 熊本県・九州・長野県・関東甲信越
投稿: 572
Re: 3カラム時、メインにテーブルを入れるとカラム落ちします
原因の心当たりではありませんが、
firebugなどの開発ツールはご利用でしょうか?

原因の特定に役立つ場合がありますので、
もし使っていないようであれば、導入をおすすめします。
既にご利用であれば、差し出がましいことを申しました。
https://addons.mozilla.org/ja/firefox/addon/firebug/

(URLはFirefoxのアドオンですが、
IEやChrome等にも同様の無料ツールが公開されています。)


----------------
+ DAISY inc. -------------------- +
EC-CUBE構築・カスタマイズサービス
EC・WEB構築などお気軽にご相談ください。

デイジー株式会社
http://daisy.link/

tamahime
投稿日時: 2013/1/8 22:20
対応状況: −−−
常連
登録日: 2012/10/15
居住地:
投稿: 44
Re: 3カラム時、メインにテーブルを入れるとカラム落ちします
DELIGHT様

アドバイスありがとうございます!!
評判もよさそうとわかり、早速インストールしてみました!

何もかも初めてなもので、まだ少し戸惑っていますが、
以前もこちらでEclipseをご紹介いただき、
もうこれなしでは無理というほど活用させていただいています。

Firebugも、もっと勉強して使いこなしてみたいと思っております。
こうして情報をいただけるのは本当にありがたいです。

スレの問題につきましては、
いろいろと試行錯誤してみてもなかなかうまくいかず、
せっかくご助言も頂いたのに恐縮ですが、
今回は期限が迫っているためテーブルを使わない別の表現を検討中です。

解決にはなっていないのですが、まずはお礼申し上げます。
kato-sc
投稿日時: 2013/1/30 9:34
対応状況: −−−
一人前
登録日: 2013/1/15
居住地:
投稿: 87
Re: 3カラム時、メインにテーブルを入れるとカラム落ちします
tableの前の要素に、floatを指定したりしていないでしょうか?
直前の要素にfloatが指定されていた場合、回り込みが解除されずに、その後の要素のレイアウトを崩す事があります。
心当たりがある場合、CSSにclear:both;を追加してみて下さい。

また、HTMLの閉じタグが正しく書かれていない場合も、カラム落ちなどのレイアウト崩れが発生する事があります。

上記が当てはまるかは分からないのですが、ご参考になればと思います。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,939名です
総投稿数は110,016件です

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2313
5
umebius
2085
6
yuh
1819
7
h_tanaka
1646
8
red
1570
9
mcontact
1296
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.