• ベストアンサー

テキストボックスが選択できない

既存のウェブページのデザインを変更したところ、テキストボックスが選択できなくなってしまいました。 (クリックしても入力できる状態になりません) 思い当たるのは ・[float:left;]でDIVを二つ並べている ・ネガティブマージンを指定して(margin-right:-●●px)DIVを重ねている ・重なったとき下に来るDIVにテキストボックスがある という事です(説明下手ですみません) テキストボックスが選択できない理由は上記の点でしょうか。 どなたが御教授下さい。よろしくお願いいたします。

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

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

ご自身で書かれている通り、重ねたブロックの背面側にある部品にはイベントは発生しないものと考えたほうがいいようです。 (一部バグなのか制限なのか例外があったりもしますが。) z-indexで並び順を変えてみてはいかがでしょうか? # 参考URLのページにも書かれていますが、positionがstatic(デフォルト)以外でないと効果がないようなので注意!

参考URL:
http://www.htmq.com/style/z-index.shtml
tihaya
質問者

お礼

z-indexで解決しました! ついfloatを使う事にこだわってしまって、positionを使えば良いという事に気付きませんでした(今まで使った事なかったもので・・・) おかげさまで無事にテキストボックスが選択できるようになりました。 本当にありがとうございました。

関連するQ&A

  • IEとその他のブラウザの表示

    よろしくお願いします 現在、2段落の段組をCSSで行っています 但し、1段落目と2段落目にはマージンを指定しています そこで質問なのですが どこかのサイトでfloatとmarginは一緒に指定しないほうが良いというのを見たので --------------------------------- style.css --------------------------------- div.box_left_outer{ width: 300px; background-color: #FFF9E5; float: left; } div.box_left{ width: 260px; margin: 20px 20px 20px 20px; } div.box_right_outer{ width: 310px; float: left; } div.box_right_outer2{ width: 300px; margin-left: 10px; background-color: #FFF9E5; } div.box_right{ width: 260px; margin: 20px 20px 20px 20px; } --------------------------------- test.html --------------------------------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div class="box_left_outer"> <div class="box_left"> テキスト </div> </div> <div class="box_right_outer"> <div class="box_right_outer2"> <div class="box_right"> テキスト </div> </div> <body> </html> という風に書いているのですが IEだと意図した表示になるのですが Firefoxやその他のブラウザだと右側の段組のマージンの箇所が 1つ上のdivについている感じになります Firefoxなどでも同じ表示にするにはどうしたらいいでしょうか? よろしくお願いします

    • ベストアンサー
    • HTML
  • 並んだ2つのfloatボックス、片方を固定位置にしたい

    floatでボックスを2つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。 現在、このfloatの2つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。 また、この大きなボックスは、常にセンターにある状態です。 ・トップから常に160pxのマージンが欲しい ・左側の余白は、ブラウザの大きさに寄ってかわる(センタリングの為) ・右のボックスは自由に動く。 この状況で、左のメニューだけを固定することは可能でしょうか。 教えてください。 現在ソースは下記のようにしております。 【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box </div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }

    • ベストアンサー
    • CSS
  • divによるボックスの意図しないマージンについて

    divによるボックスの意図しないマージンについて質問致します。 よろしくお願いしますm(_ _)m 現在cssによるデザインを勉強中なのですが、「div」によるボックスを作り、センター揃えにして上下に並べようとしたら画像の矢印のような意図しないマージンができてしまいました。 divへのcssの適用の仕方がまだしっかりとわからず手探り状態で、調べてもよくわからなかったです・・・。 margin-bottom:0pxなどでもダメでした・・・。 どうか原因がわかる方がいましたらよろしくお願いします(>_<) この場合に適用しているcssは ・width:○○ ・margin-left:auto; ・margin-right:auto; だけです。 どうかよろしくお願いしますm(_ _)m

    • ベストアンサー
    • CSS
  • CSSでボックスを中央に表示させたい

    CSSでボックスを中央に表示させたいのですが、 {float:left; width: 800px; heght: 100px; height: 100px; margin: auto; text-align:left;} こんな感じでできるかと思ったのですができません。 既存の質問にもあったように margin: auto; text-align:left; と入れたのですが、左寄せのままでした。

    • ベストアンサー
    • CSS
  • inlineでテキストの入ったボックスを横に並べる

    いつもお世話になっています。 inlineでテキストが中に入った高さの違うボックスを横に並べる方法に ついてです。float1~6が題名で、あいうえお等がその下に説明文として 並ぶと思ってください。 確認ブラウザ 【OK】Win ie6、ie7、Fx3.5.2、Opera、Mac Safari 【NG】Mac Fx2.0 添付画像のように<dt>と<dd>が横に並んでしまい、<dt>の下に来てくれ ません。<dt><dd>どちらをclearしてもだめでした…。 宜しくお願いします!! <style> div.wrap { width: 600px; background: #EEEEEE; padding: 8px; border: 1px solid #333333; } div.box { display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1; width: 160px; height: 130px; margin: 8px; border: 2px solid #333333; background: #DDDDDD; vertical-align: top; padding: 8px; } div.height { height: 200px; border: 2px solid #FF9999; background: #FFEEEE; } dd{ width: 150px; float: left; } dt { float: left; clear: left; } </style> <html> <body> <div class="wrap"> <div class="box"> <dt>float 1</dt> <dd>ああああああああああああああああああああああああああああああああああああ</dd> </div><!-- --><div class="box height"> <dt>float 2</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd></div><!-- --><div class="box"> <dt>float 3</dt> <dd>うううううううううううううううううううううううううううううううううううう</dd> </div><!-- --><div class="box"> <dt>float 4</dt> <dd>ええええええええええええええええええええええええええええええええええええ</dd></div><!-- --><div class="box"> <dt>float 5</dt> <dd>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dd> </div><!-- --><div class="box"> <dt>float 6</dt> <dd>かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか</dd></div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • cssでボックスを横並びにし、横幅指定してもくっついてしまう。

    こんにちわ! 只今CSS課題に取り組んでいるのですが、 フロートを使用し、写真(A)、テキスト(B)、写真(C)、テキスト(D)、と並べたいのですが、(B)に横幅指定しているにもかかわらず、(C)がIEではOKなのですが、FIREFOXではぴたっとくっついてしまいます。 【html】 <div class="box"> <div class="photo"><img src="img/photo_01.jpg" width="132" height="85"></div> <div class="txt">第23回こまったな<br>どうしたのかな賞<br>受賞</div></div> <div class="box"> <div class="photo"><img src="img/photo_02.jpg" width="132" height="85"></div> <div class="txt">第23回どなたかー<br>助けてください賞<br>受賞</div></div> </div> .box{ width : 258 px; margin: 0px; float:left; } .photo{ width : 132 px; margin: 0px; float:left; } .txt{ width : 123 px; color: #555555; font-size: 12px; text-align: left; margin: 0px 0px 0px 3px; padding: 0px ; line-height:18px; float:left; } となっております。 何故、IEでは大丈夫でFirefoxでは内容によって横幅が変わってしまうのでしょうか? ご教授願いませんでしょうか~? 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 【至急】ボックスの高さ指定

    base(3つのボックスを包囲する)のボックスに背景画像をつけています。baseの中にboxを3つ横に並べてます。 ■box左は画像(背景黒でパディングで画像に黒枠をつけているようにみせている※アウトラインでやったらIEだと表示されなかったので) ■box真ん中は仕切り線(背景はなし) ■box右はテキスト(背景グレー)にしてます。 質問内容: box右【テキストの高さ】に合わせて、baseの【背景画像】とbox真ん中の【仕切り線】を延長させるにはどうすればいいのでしょうか? (html) <div class="base"> <div class="box1_img"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2_line"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3_text"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> (css) ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; } .base { width: 618px; height: 100%;(←分からない??) margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1_img { width: 130px; height: 97px; margin: 0; padding: 2px; float: left; background: black; } .base .box2_line { width: 2px; height: 100%;(←分からない??) margin: 0 10px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3_text { width: 450px; margin: 0; padding: 5px; float: left; text-align: left; background: #eee; } ul .list-y{ font-weight: bold; text-align: left; } とっても切羽詰まってます!! すぐに回答いただけると、とっても助かります。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSSの崩れについて

    CSSにて横2段組のボックスを組んだところ、右側の内容がなぜか左側のボックスの下にも表示されてしまいます。 **html** <!-- out_wrap --> <div id="out_wrap"> <!-- inner_wrap --> <div id="inner_wrap"> <!-- left_Contents --> <div id="left_Contents"> <p>AAAA</p> </div><!-- /left_Contents --> <!-- right_Contents --> <div id="right_Contents"> <p>A</p> </div><!-- /right_Contents --> </div><!-- inner_wrap --> </div><!-- out_wrap --> **css** @charset 'Shift_JIS'; body{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; text-align : center; background : #333333; color:#4f4d45; } #out_wrap{ margin-left : auto; margin-right : auto; width : 980px; padding-top : 20px; background-color : #FFFFFF; } #inner_wrap{ margin-left : 10px; margin-right : 10px; width : 960px; } #left_Contents{ width : 650px; float : left; margin-right :10px ; line-height : 200%; text-align : left; background-color : #000000; } #right_Contents{ width : 300px; float : right; line-height : 200%; text-align : left; background-color : #999999; } ************************************************************* 右ボックスの A と打った文字が左側下にも表示されてしまいます。 marginの計算もあっていると思うのですが、しかもIE6でこのような現象です。Firefox最新版では大丈夫です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 外側のdivの高さを入れ子のdivの高さに自動的に合わせたい

    外側のdivの高さを入れ子のdivの高さに自動的に合わせたい 添付画像のようなコンテンツを作成しています。 外側のdiv(contents_box)内にcontents_imgとcontents_textのdivを配置しています。 このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう? 高さをautoですとただの棒のようになってしまい、ダメでした。 どうぞよろしくお願い致します。 xhtml <div id="contents_box"> <div id="contents_img">ここに画像</div> <div id="contents_text"> ここにテキスト</div> </div> css #contents_box { height: auto; width: 805px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #333; } #contents_img { height: auto; width: 300px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; float: left; } #contents_text { height: auto; width: 485px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; float: right; text-align: justify; }

    • ベストアンサー
    • HTML
  • floatタグの使い方

    FOM出版 WEBクリエイター検定 初級のテキスト問題で分からないことがあります。 詳しいかたお力をおかしください。 htmlファイルの記述ーーー(少し簡略化してます) <!DOCUTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www3c.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="left"> <p>古代の七不思議</p> </div> <div class="right"> <p>古代の七不思議</p> </div> </body> </html> CSSの記述ーーー .left{color:#000000; background-color:#cccc99; padding:10px; margin-left:10px; width:300px; float:left; } .right{color:#000000; background-color:#cccc99; padding:10px; margin-left:350px; width:300px; } これが正解のようで、クラスleftの右にクラスrightが回り込みます。 しかし僕にはクラスrightに記述したmargin-left:350px;がよく分かりません。 divタグでボックスを二つ創ってあるので、.leftにfloat:left;の記述をして .rightが回り込んで.rightにmargin-left:10px;記述とかで隙間が開くのだと思っていました。 ちなみに.rightのmargin-left:350px;を10pxにして.rightにもfloat:left;とかけるとうまく回り込みます。これもよくわかりません。 つたない文章で分かりづらいかもしれませんが、どうか解説をお願いいたします。 よろしくお願いします。

    • ベストアンサー
    • HTML