ロリポブログ：デザインが崩れてしまいます

前へ 次へ
このQ&Aのポイント
  • ロリポップのブログで、３画面の配置が崩れる現象が発生しています。
  • 画面の中央にコメント入力欄が表示されると、右側の画面が下に移動します。
  • 現象はIEやルナスケープで起きますが、FirefoxやOperaでは起きません。
回答を見る
  • ベストアンサー

ロリポブログ：デザインが崩れてしまいます

ロリポップのブログで、既存の３カラム（画面というのでしょうか?）のテンプレートを借りています。 自分で壁紙やアイコンなどをカスタマイズしているのですが、何をどう失敗したのか、３画面の配置が崩れてしまいました。詳しく述べますと、 ・<div id="center">の中央画面にコメント入力欄が表示されたときに限り、一番右側の　<div id="right">　の部分がゴッソリと下のほうに移動してしまう。（フッターは正常に表示される。） ・コメント入力欄が表示されていない初期の状態では、ちゃんと右側の画面もヘッダーのすぐ下に表示されている。 ・FirefoxやOperaではこの現象は起きないが、ＩＥやルナスケープで現象が発生する。 以上のような状態なのですが、考えられる原因を教えていただけないでしょうか。どこかのタグが未完になっているのでしょうか。どのタグに問題があるのか見当が付かないので困っております。よろしくお願いいたします。

noname#25939
noname#25939

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

  • ベストアンサー
  • maho-maho
  • ベストアンサー率44% (725/1639)
回答No.1

コメント入力欄の幅を狭めてみてください。

noname#25939
質問者

お礼

アドバイスのとおり、コメント入力欄の横幅を400px→350pxにしてみたところ、無事に解決いたしました！　本当に助かりました。ありがとうございます。

  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • cssに関する質問です。

    cssに関する質問です。 フッターをbodyタグの直後に置きたいのです。 そうするとフッターはbodyタグの直後に表示されてしまいます。 cssでフッターだけをホームページの最後に表示する方法はありますか。 <body> <div id="footer">フッター　ホームページの一番下に表示したい。</div> <div id="content>ホームページの内容　フッターよりも上に表示したい。</div> </body> ＣＳＳハックのような方法でも構いませんが、実現方法があれば教えてください。 よろしくお願いします。

  • CSSで「float: left;」の次にフッタをうまく表示させるには？

    http://okwave.jp/qa5450892.html にて、CSSの段組に関する疑問が無事に解決されました。 が、実はもう一つ、新たに表示に際して困ったことが起きています。 現在のデザインは、<div id="menu">の右側に<div id="contents">を表示させるようになっておりまして、メニューブロック及びコンテンツブロックは、コンテンツブロックの表示法をもう少し改良するくらいで大丈夫な段階まできました。 さて。 このページに、新たにフッタを追加したいと考え、<div id="contents">の下に、幅100%のフッタを、<div id="head">のような感じでつけてみたいと考えているのですが、実際にそのようにしてみようとしたところ、 <div id="contents">のさらに右側にfooterが表示されるようになります。 この状態を、コンテンツブロックそのものに<br>が入るような感じでフッタを表示させようとする場合、スタイルシートでは、どのように記せばいいのでしょうか。 もちろん、フッタを排除してヘッダ部分にいろいろと書いておくのが簡単な方法ではあるのですが。 ご指導、よろしくお願いします。

  • HTML5　footer　固定の仕方

    ホームページを作っています。 ページはタブで切り替えられるようになっています。 footerを常に表示させたい（画面の下部に固定）と色々やってみましたがうまくいかないので質問します。 <div id="footer"></div> (1)CSS #footer{ position:fixed; } CSSで上のように書いてみました。 文章が少ないときは上に上がり(画面の下に固定されない)、 文章が多くてスクロールが必要なときは、footerが表示されません(要素としては存在しているがつぶれている状態)。 (2)footerFixed.js ページの一番下に表示される（スクロールしないとfooterを見ることが出来ない） という状態です。 なぜなのでしょうか？ 他に方法はないでしょうか？ 教えてください。

  • HTML5コメント欄の<article>について

    現在HTML5でブログテンプレートをコーディングしています。 その中で、<article>について調べるとコメント欄にも<article>を使うと良い、といった記述をよく見かけます。 導入しようと思ったのですが、私のサイトは3カラムの幅固定floatで構築してあり ソースの記述順序上、メインカラムの中にコメント欄が入りません。 簡単に構造を書くと <div id="wrapper"> <div id="main"> //メインカラム ～～ </div><!-- #main--> <div id="left"></div> <div id="right"></div> <div id="comment"></div> </div><!-- #wrapper--> こんな感じになっており、#main,#left,#rightの3つをfloatさせて横並びにしています。 このサイトバー2つを"div#comment"の下にしてしまうと3カラムが崩れてしまいます。 (勉強不足かもしれませんが、どうCSSで弄ってもコメント欄より上にサイドバーが上がらなくなります) なので、<article>でメインカラムを囲みたいのですがコメント欄が<article>に入らない。 かといって、<article>で全体を囲むとサイドバーまで<article>に含まれてしまう、という状況です。 このような状況の上で、コメント欄を<section>で括り、コメント1件1件を<article>で括るのは間違いでしょうか？ http://www.w3.org/TR/html5/sections.html#the-article-element ここにあるコード例ではまず<article>で記事全体を囲み(コメント欄も含み) コメント欄にきたら<section>に入り、<article>で1件1件を囲っていますね。 その<article>に<hn>タグがないことが疑問に思わせた発端なのですが 恐らく、<article>内<article>は親の<article>(記事全体)に関連した独立コンテンツ、という名目があるので <hn>タグをつけていないのだと思われます。 だけど私の場合、<article>でまず記事があって、それとは離れてコメント欄があり 記事<article>とは親子関係のない<section>の中に<article>が来ることとなります。 これが合っているのかどうか、調べてもよく分からなかったので質問させて頂きました。 どなたかご教授宜しくお願い致します。

    • ベストアンサー
    • HTML
  • footerのclear:bothが効きません

    教えてください。 コーダー初心者です。 タイトルどおりフッターで指定したクリアーが聞きません。 上ヘッダーで、左にナビ、右にコンテンツ 右コンテンツ内に右幅いっぱいの文章をその下に右コンテンツを二段組した文章をいれました。 フッターは現在右コンテンツ側によってしまい。 左ナビしたまできてくれません。 右コンテンツを幅一列で組んでいたのですが、二段組のレイアウトを追加指定したあたりから フッターがおかしくなりました。 原因は何でしょうか？ 教えてください。 下記はhtmlです。 <div id="wrapper"><!--全体囲み --> <div id="head">ヘッド</div> <div id="left">ナビ</div> <div id="right">コンテンツ<!--右側 --> <div id="section01"> <div class="section01" > 横一文章 </div> <div class="section01" id="Benefits"> 右文章 </div> <div class="section01" id="Lose"> 左文章 </div> </div><!--右囲み終わり --> <div id="footer"><!--フッター --> </div><!--フッター終わり --> </div><!--wrapper終わり --> </body> </html>

    • ベストアンサー
    • CSS
  • [CSS]　常にフッターは下部に表示　IE7

    常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。 内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。 ---------------------------- 内容 ---------------------------- フッター部 ---------------------------- 【HTML側】 <body> 　　　<div id="container"> 　　　　　<div id="main"><p>内容</p></div> 　　　　　<div id="footer">Copyright</div> 　　　</div> </body> 【CSS】 body,html{height:100%;} #container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;} body > #container {height: auto;} #main {background:#f00;padding-bottom: 100px;} #footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;} IE9などですと、最初に画面を開いて一番下にいたフッターが、 画面サイズを広げると一緒にくっついて一番したのままでいるのですが、 IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げると その場所のままです。更新をかけると一番下に移動するのですが、 これはIE7では無理なのでしょうか？ 広げたら一緒にフッター部がくっついていってほしいのですが、わかる方が いらっしゃいましたら、ご教授お願いいたします。

    • ベストアンサー
    • CSS
  • inline-blockをネストすると表示がずれる

    DIVタグをベタベタならべて、あとはcssでサイズや属性を指定してページをレイアウトしようとしています。しかし、inline-block指定をネストすると表示が急にずれることに気づきました。 まず３つのdivタグを並べます。inline-blockを指定することで横に並べます。 例えば次のようなものです。 ■■■▲▲▲●●● ■■■▲▲▲●●● ■■■▲▲▲●●● 後の説明の都合上、３×３の大きさで描いていますが、■/▲/●がそれぞれ一つのDIVに対応していて <DIV id="■"></DIV> <DIV id="▲"></DIV> <DIV id="●"></DIV> となっていて、cssで適当なサイズが指定されていると考えてください。 ここで、▲を縦に３つに分けるために、<DIV id="▲"></DIV>のなかにネストしたDIVタグを３つ挿入します。 <DIV id="■"></DIV> <DIV id="▲"> 　　<DIV id="□"></DIV> 　　<DIV id="△"></DIV> 　　<DIV id="○"></DIV> </DIV> <DIV id="●"></DIV> ■■■□□□●●● ■■■△△△●●● ■■■○○○●●● このように▲の中に□/△/○の３つのdivを置いて分割します。縦に並べるため、今度は□/△/○にinline-blockを指定していません。 更にこの△の部分を、今度は横に３分割することを考えます。つまり、<DIV id="△"></DIV>の中に <DIV id="◆"></DIV><DIV id="◇"></DIV><DIV id="▼"></DIV> を挿入します。今度は横並びにしたいので、◆/◇/▼はcssファイルでinline-blockを指定します。 期待している表示は、 ■■■□□□●●● ■■■◆◇▼●●● ■■■○○○●●● なのですが、実際には ■■■＿＿＿●●● ■■■□□□●●● ■■■◆◇▼●●● ＿＿＿○○○＿＿＿ （＿＿＿は空白） のように真ん中のDIVが下にずれて表示されてしまいます。 試行錯誤した結果、どうやら外側のinline-blockの底辺と、内側のinline-blockの底辺とを一致させようとするロジックが働いているように見えます。 この現象はchrome/firefox/safariのいずれでも同じでした。 ということは、この動作はhtml/cssで規定されている動作でしょうか？ それとも、たまたますべてのブラウザで同じような実装上の不具合がある、と考えるべきでしょうか？ ちょっと分かりにくいかも知れませんが、ご存じの方、コメントをよろしくお願いします。

    • 締切済み
    • CSS
  • 開始タグと終了タグについて

    開始タグと終了タグについて ものすごく初歩的な質問で失礼します。 <div id="container"> <div id="header"> </div> <div id="menu"> </div> <div class="main-top-img"> </div> <div class="main-middle-img"> <div id="main-contents"> <div class="text"> <h2 class="title"></h2> <p class="text"></p> <h3 class="subtitle"> <p class="text"></p> </div> </div> <div class="main-bottom-img"> </div> <div id="footer"> </div> </div> などいのように開始タグと終了タグの間に、他の多くの<div>要素がある場合、どこがその要素の終了タグなのか分からなくなります。 それぞれの開始タグが、それぞれの終了タグと対応するのは、どのようなルールのもとに決定されているのですか？？

    • ベストアンサー
    • HTML
  • フッター固定時のdivの背景について

    フッターを画面下部に固定するため以下のようなHTMLを書きました。 フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。 コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; text-align: center; } #container { min-height: 100%; height: auto !important; height: 100%; position: relative; } #screen { width: 100%; text-align: left; padding-bottom: 100px; } #contents{ margin: 0 auto; width: 50%; background:Khaki; } #footer { height: 100px; width: 100%; position: absolute; bottom: 0; background-color: #7EC4E6; } --> </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • ホームページでフッターの表示ができない

    ホームページの一番下にフッターをつけるべく -------------------------------------------------------- <div id="footer"> <!-- footer section start --> <!--#include file="./common/footer.htm" --> <!-- footer section end --> </div> ----------------------------------------------------------- っという記述をしています。 もちろんcommonというフォルダの舌にはfooter.htmというファイルを入れてあります。 ところがフッターは表示されません。 会社の先輩から引き継いだのですが、私では解決できずどなたかご教授お願いできないでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する