> プラグイン > 左コラム、メインコラム、右コラムの幅の拡大と位置の移動 |
プラグイン
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
ゲスト |
投稿日時: 2010/3/30 18:34
対応状況: −−−
|
左コラム、メインコラム、右コラムの幅の拡大と位置の移動 ヘッダーとフッターを自分で作成したimgファイルを埋め込みました。そのヘッダーとフッターはデフォルトのものよりも横長になっておりますので、左コラムを左へ移動、メインコラムの幅を拡大し、右コラムを右へ移動し、ヘッダーとフッターの長さに合うようにしたいと考えておりますが、どのファイルを編集すればよろしいか、どなたかご教授頂けませんでしょうか。 CSSファイルのmainの編集を試していますが、思い通りにいかず、途方にくれております。 |
|
osamusi |
投稿日時: 2010/3/30 18:46
対応状況: −−−
|
長老 登録日: 2008/11/5 居住地: 投稿: 204 |
Re: 左コラム、メインコラム、右コラムの幅の拡大と位置の移動 単純に横幅を広げたいなら、main.cssを編集すれば可能だと思います。
3カラムのようですので、div#container、div#three_maincolumnあたりを変更してみて下さい。
|
yokoshima |
投稿日時: 2010/3/30 19:42
対応状況: −−−
|
一人前 登録日: 2009/1/6 居住地: 渋谷区恵比寿西 投稿: 113 |
Re: 左コラム、メインコラム、右コラムの幅の拡大と位置の移動 このあたりは参考にならないでしょうか?
http://wiki.ec-cube.net/index.php?%B6%A6%C4%CC%2F4_%A5%C7%A5%B6%A5%A4%A5%F3%A5%AB%A5%B9%A5%BF%A5%DE%A5%A4%A5%BA%2F07_%A5%B1%A1%BC%A5%B9%A5%B9%A5%BF%A5%C7%A5%A3%2F%A5%B5%A5%A4%A5%C8%A4%CE%B2%A3%C9%FD%A4%F2%B3%C8%A4%B2%A4%BF%A4%A4
|
gyeeru |
投稿日時: 2010/4/1 16:57
対応状況: −−−
|
新米 登録日: 2010/3/13 居住地: 埼玉県 投稿: 8 |
Re: 左コラム、メインコラム、右コラムの幅の拡大と位置の移動 確認ですが、今カスタマイズしているのは、デフォルトのテンプレート上にですか?
デフォルトのテンプレート上でのカスタマイズは危険です。 仮に、デフォルトのテンプレートをダウンロードして、別のテンプレートとして任意の名前を付けて管理画面上でアップロードして、 そのアップロードしたテンプレート上でカスタマイズするのがベストです。 ご存じかもしれませんが、ちょっとした老婆心です。 お気を悪くなさらないよう・・・ ectryさんの場合なら、(任意のテンプレートでカスタマイズしているのを大前提としての説明ですが) user_data / packages のフォルダの中に任意で作ったテンプレートフォルダができていると思いますので、そこのフォルダ内の css / main.css をカスタマイズする必要があります。 投稿なさった内容では、どのぐらいの幅(ピクセル)で作りたいのか、わからないので、このぐらいの説明しかできません。(残念) また老婆心ですが、paddingとmarginによく気をつけて、バランスを計算してみてください。 うまく、バランスがとれたとして、あとは、管理画面上でデザイン管理の項目の該当する設定で微調整ですが、できるだけCSSデータ上で完結した方が、またデザインを変えるとき便利です。
|
ゲスト |
投稿日時: 2010/4/2 16:29
対応状況: −−−
|
Re: 左コラム、メインコラム、右コラムの幅の拡大と位置の移動 皆様、
皆様の有益な情報のおかげで何とか、上述しましたコラムの位置移動および、サイズの拡大を調整ができ、当初想定したデザインのページが、今後の進展は分かりませんが、できつつあるように思えます。特に、yokoshima様の情報は私の疑問点をほぼ全て網羅しているような回答でありまして、大変感謝しております。osamaushi様、およびgyeeru様も理解を得る鍵となる情報で本当にありがとうございます。 |
|
ゲスト |
投稿日時: 2010/4/11 23:53
対応状況: −−−
|
Re: 左コラム、メインコラム、右コラムの幅の拡大と位置の移動 本件に関しまして、新たな問題、そして疑問が発生致しましたので、質問させて頂きたく存じます。
現在私はこのサイト作成に際してレッツノートCF-T4というノートパソコン、OSはWindowsXP、ブラウザーソフトはインターネットエクスプローラー8を使用しております。このノートパソコンの小さな画面を基準に左コラム、メインコラム、右コラムを調整し、うまく画面に収まるように作成し、その上で解像度を1027X768、および 800X600に設定し変えながら問題のないことを確認しました。 しかしながら、例えばデスクトップなどの大きめの画面で、ブラウザーソフトがIE6などでこのサイトを開いたところメインコラム、および右コラムが下に落ちて、画面がガタガタに崩れてしまっていました。 このような問題が発生しないために、つまりどのような大きさの画面でも、どのようなブラウザーソフトを使用しても問題なくサイトが表示されるためにはどうしたら宜しいのでしょうか。 どなたかこの事に関しましてアドバイス等を頂ければ大変有難く存じます。 |
|
kaoring777 |
投稿日時: 2010/4/12 0:36
対応状況: −−−
|
一人前 登録日: 2009/7/28 居住地: 東京 投稿: 89 |
Re: 左コラム、メインコラム、右コラムの幅の拡大と位置の移動 ブラウザによってcssの解釈が違ったりバグがあったりします。
TridentやGekkoなどエンジンも違いますし。 で、デザインをする際に気をつける事はデバックというと言い過ぎかもしれませんが色んなブラウザでチェックする事です。 ユーザーによって使うブラウザは様々です。 Firefox、IE6〜8、Safari等。 どこまでのデバックを行うかは個人の判断として 今回の現象であるカラム落ちはIE6でよく見られます。 恐らくcssでどこかサイズの幅が大きい指定のものがあるか、widthというよりもpadding、marginで幅を超えている等の問題があると思います。 もう一度cssをチェックしてみてはいかがでしょうか? |
seasoft |
投稿日時: 2010/4/12 0:58
対応状況: −−−
|
神 登録日: 2008/6/4 居住地: 投稿: 7367 |
Re: 左コラム、メインコラム、右コラムの幅の拡大と位置の移動 引用:
しかしながら、例えばデスクトップなどの大きめの画面で、ブラウザーソフトがIE6などでこのサイトを開いたところメインコラム、および右コラムが下に落ちて、画面がガタガタに崩れてしまっていました。 昔からある手法としては、DIV でレイアウトせずに TABLE を使ってレイアウトする手法があります。 近年では、TABLE をレイアウト用途に使うのは嫌われる傾向にありますが・・・ 段落ちからは、開放されると思います。
|
gyeeru |
投稿日時: 2010/4/13 15:55
対応状況: −−−
|
新米 登録日: 2010/3/13 居住地: 埼玉県 投稿: 8 |
Re: 左コラム、メインコラム、右コラムの幅の拡大と位置の移動 アクセスするユーザーの環境によって、バランスが崩れてしまうことは、いささか仕方が無い部分もあります。
中には驚くような古い環境でアクセスするユーザーだっておりますから。 DIVのレイアウトを全てテーブルにするのも大変な作業になりますし・・・ 私だったら、基準として全体の幅は800×600pxぐらいを想定して、左・右のカラムは幅166〜200pxの範囲内で固定しておいて、メインを%で設定します。 だから、メインのデザインは多少狭まっても大丈夫な 幅の短いものをうまく、レイアウトしていくつもりで。 もしも、クライアントが全体を見せたいのなら、その方法をとります。 私自身が気ままにデザインする場合はキリがない部分なので800×600px前後で譲らないつくりにしてしまいます。
|
tonton |
投稿日時: 2010/4/13 20:56
対応状況: −−−
|
仙人 登録日: 2008/8/14 居住地: 投稿: 437 |
Re: 左コラム、メインコラム、右コラムの幅の拡大と位置の移動 該当部分のCSS記述を見てみないことには、なんともいえないですが、IE7やFIREFOXではちゃんと見れていますか?
IE6でカラム落ち(右カラムが下に回ってしまう)のであれば、 ブロックのくくりを間違っているのでない限り、左右marginのバグに引っかかった可能性が高いですね。 ご存知かもしれませんが、IE6では左右marginを2倍で計算してしまうバグがあります。フロートを使っている場合にはここが怪しいです。 防ぐには、スターハックを使います。 例えば、 div#rightcolumn { float:left; margin-left: 200px; } と、左マージンを200pxあけたいとします。 その場合、上記の記述に追加して、IE6用に下記のCSSを追加します。2つとも書きますが下のほうは、IE6以外のブラウザでは読み込みスルーされます。 * html body div#rightcolumn { float:left; margin-left: 100px; } これで、いかがでしょうか? これで、だめなら、該当部分のブロック構成とソースを書いていただければ、CSS関連なら大体のアドバイスはできそうな気がします。 ではでは。 |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |