• 締切済み

勝手にスタイルが追加される

２カラムで右に320px左にcalc(100% - 320px)で幅を設定したページを作ったのですが、ブラウザの幅を縮めると勝手に右カラムがdisplay:none;になり、そこからブラウザの幅を広げると右カラムにはdisplay:block;左カラムにはwidth:100%;という、element.styleが勝手に指定されてしまいます。 情報が少なく申し訳ございませんが、どなたか利用がわかる方はいらっしゃいませんでしょうか。

  • CSS
  • 回答数1
  • ありがとう数1

みんなの回答

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.1

javascriptが動いている。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • アメブロcss 3カラムを2カラムに変更の仕方

    アメブロカスタマイズについて。 現在アメブロの3カラムをcssを編集し2カラム右メニューにしようとしているのですが、 上手く2カラム右メニューに表示出来ません。 まずサイドバー項目を右に全てずらし、左は空とし、 #sub_a{display:none;}として、 #mainの幅を拡大し2カラム左メニューは問題なく出来たのですが、 メニューを右にずらす事が出来ておりません。 感覚としては#mainは動かせているのですが、#sub_bがびくともしないような感覚です。 現在のcssは以下のようになっており、表示としては#sub_bも#mainも左に寄っており、 #sub_bの下に#mainが表示されている状態です。 具体的にどの点を修正すれば2カラム右メニューとなりますでしょうか？ #main{ float:left; width:673px; left: 0px; top: 0px; } #sub_main{ width:100%; overflow:hidden; } #sub_a{ display:none; } #sub_b{ float: right; width:200px; margin-left: 688px; top: 0px; z-index: 100; }

  • ブログを３カラム右右から左右両サイドにしたい。

    現在CSSは下記のようになっています。 どこをいじれば右右から左右両サイドにできるのか教えていただけたら嬉しいです。 宜しくお願い致します。 /** 03. Layout - レイアウトの設定 */ /* ----------------------------------------------- */ body { margin: 0; padding: 0; min-width: 960px; text-align: center; background-image: none; background-repeat: repeat; background-position: 50% top; } div#containerWrap { width: 960px; margin: 0 auto 5px; } div#container {} div#content { padding: 10px 0; border-width: 1px; border-style: solid; } div#main , div#sub , div#extra { overflow: hidden; } div#main { float: left; display: inline; width: 538px; } div#main div.column-inner { padding: 0 10px 10px; } div#sub { float: left; display: inline; width: 210px; } div#sub div.column-inner { padding: 5px 10px 0; overflow: hidden; border-width: 1px; border-style: none none none solid; } div#extra { float: left; display: inline; width: 210px; } div#extra div.column-inner { padding: 5px 10px 20px; overflow: hidden; border-width: 1px; border-style: none none none solid; }

    • ベストアンサー
    • HTML
  • スタイルシートのpositionでフッターを位置指定するには

    こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか？ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }

  • 横並びリスト　ブラウザ縮小 カラム落ち

    よろしくお願いします。 ulとliで横並びの商品リストの様なものを作成していて、 ようやく完成したと思っていたのですが、 ブラウザの拡大/縮小機能を使って、 少しでも縮小するとカラム落ちが発生してしまいます・・・。 完成したと思っていたので焦っております(汗) 簡単にソースを記載しますので、 原因と対策がわかりましたら、どうか回答宜しくお願いします。 ul{ width:720px; list-style:none; } li{ width:142px; border:1px solid #000; float: left; } このような感じで、ulには別にクラスを指定して、clearfixも指定しています。 .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ ulの全体720pxを5個のliで割って、144pxとなり、 そこからborder両サイド1pxづつを引いて142pxをliに指定しているのですが、 間違っているのでしょうか？ liの幅を144pxにしてborderを指定しない場合は、 縮小してもカラム落ちは起こりません。 初歩的なことかもしれませんが、 どうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • スタイルシート　float

    スタイルシートを使って左右分割のページを作ろうと思っています。 #left{ width:170px; float:left; } #right{ float:right; } としたところ、 ブラウザ（IEです）を余裕を持たせているときは正常表示されますが、 左画面　｜　右画面 ウインドウ幅を狭くすると、 右側にくる部分が、画面上に、 左側にくる部分が、画面下に、 右画面 -------- 左画面 上下に分割された画面となってしまいます。 これを、ウインドウ幅を狭くしても 左右分割に保つようにするにはどうしたら良いのでしょうか？

  • document.getElementById( ).style.displayについて

    「document.getElementById( ).style.display」を使って スタイルシートを書き換え、画像とテキストの表示替えをしています。 Firefoxでは正常に動作するのですが、 IEでは「displayプロパティ」を取得できずに動作しません。 htmlは以下のとおりです。 どなたかお分かりになる方、教えていただけないでしょうか？ よろしくお願いします。 ★javascriptの内容 function toggle(Aid,Bid,Cid,Did,Eid) { document.getElementById(Aid).style.display = 'none'; document.getElementById(Bid).style.display = 'inherit'; document.getElementById(Cid).style.display = 'inherit'; document.getElementById(Did).style.display = 'none'; document.getElementById(Eid).style.display = 'none'; } ★スタイルシートの内容 #page {width: 910px;} #ai{height: 33px;display:inherit;} #kaki{ height: 33px;display:none;} #img_ai{margin: 0px;float: left;display:none;} #img_kaki{margin: 0px;float: left;display:inherit;}

  • ２段組レイアウトのCSSについて。左幅：可変/右幅：固定

    http://desperadoes.biz/style/dan/1-g.html こちらのような２段組を想定しています。 （ブラウザウィンドウのサイズを変えたりして、スタイルの効き方を確認してみて下さい。） 上記ページの例ですと、左幅：固定、右幅：可変となっていますが、 私が希望するのは、その逆です。 つまり、左幅：可変、右幅：固定です。 どのようなスタイルを指定すれば良いか、どなたか教えて下さい。 --------------------------------------------- ちなみに、上記ページのスタイルは、 http://desperadoes.biz/style/dan/ で確認できます。 「TYPE C-4 左ボックスのみ幅固定。幅 : 100%」のタイプになります。 --------------------------------------------- 私の考えでは、右と左を逆にすれば、目的を達成できるのかな？ なんて思い、下のように記述してみましたが、ダメでした。 #my_navigation {margin-right: 150px;} #my_contents {float : right ; width : 150px ;}

    • ベストアンサー
    • HTML
  • style="displey:none"ができない

    まず、このソースを見てください。 <html><head><base target="migi"></head> <body style="margin-top:3px;margin-left:3px;margin-right:3px;"> <div onmousedown="fmenu1()" style="cursor:hand;">メニュー表示</div> <table id=menu1 style="displey:none" border=0> <tr><td>あいうえお <br>かきくけこ <br>さしすせそ </td></tr></table> <SCRIPT language="JavaScript"> function fmenu1(){ if( menu1.style.display == "none") menu1.style.display = "block"; else menu1.style.display = "none"; } </SCRIPT> </body></html> これを表示すると、最初から「あいうえお」「かきくけこ」「さしすせそ」が出ている状態になります。 style="displey:none" というのは間違っているでしょうか？ 回答お願いします。

    • ベストアンサー
    • HTML
  • スタイルシートのwidthについて

    <style type="text/css"> #hoge{border:solid 1px black;width:100px;margin:0;} </style> <div id="hoge> </div> このようにdivタグにスタイルシートをつけるとなぜか縦の幅ができてしまいます。 width:100をなくせばただの線になるのですがwidthをつけるとどうして 縦幅ができてしまうのでしょうか？ hightをつけてるのはまだしもwidthをつけただけじゃ横の長さが決まるだけで縦は0だと思ったのですが違うのでしょうか？ ブラウザはIE6で見ました。

    • ベストアンサー
    • HTML
  • CSS スタイルを子要素の子要素に継承させたくない

    スタイルシートについてまだ初心者なため質問させてください。 以下のようにテーブルのボーダーのスタイルを子要素（<table><td>）にスタイルを継承（？）させているのですが、この方法だと子要素の子要素（<table><td><table><td>）に対しても継承されてしまいます。 table.border { border-style:solid; border-width: 1px 1px 1px 1px; border-collapse: collapse; } table.border td { border-style:solid; border-width: 1px 1px 1px 1px; } table.border > td {…}　という指定の方法もあるようですが、こちらは対応しているブラウザが乏しいようで事実上使用できません。 子要素の子要素に対して以下のクラスを指定しても継承が優先されるためか反映されませんでした。 table.none { border-style:none; } table.none td { border-style:none; } HTMLタグに直接以下のように指定しても同様でした。 <table style="border-style:solid;"> どこかのサイトでは継承をリセットする必要があるような事が書いてあったような気がします。 もちろん継承を利用せず<table>および<td>個々にクラスを指定すれば（不必要なタグには指定しなければ）可能だと思いますが、これだと大きなテーブルの場合に非効率で悩んでいます。 どのようにすれば子要素の子要素にスタイルを継承させないようにできるでしょうか？

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する