ロールオーバーの挙動がおかしい

前へ 次へ
このQ&Aのポイント
  • IE8で、特定のボタンだけロールオーバーが枠にしか反応しない問題が発生しています。
  • この問題は、他のボタンでは正常に動作しているにもかかわらず、この特定のボタンだけで発生します。
  • IE8のエラー回避方法を教えてください。
回答を見る
  • ベストアンサー

ロールオーバーの挙動がおかしい

あるページに <input type="button">や<input type="submiit"> によるボタンをいくつか配置しています。 CSSでボタンのスタイルを設定しており、hoverのスタイルも設定しています。 ボタンのひとつは、クリックすると別ウィンドウでリンクが開くようにしていますが IE8で見ると、このボタンだけロールオーバーが枠(罫線)にしか反応しません。 ボタンの枠の上にマウスがあるときはhoverの状態になり、ボタン本体(テキスト部やpadding部)にマウスがあるときは無反応です。 しかしFFではボタン全体でしっかり反応していました。 その他のボタンは、IEでもFFでも正しく動いています。 IE8のエラー回避方法を教えてください。 よろしくお願いいたします。 【CSS】 .button2 { padding: 1px 10px 1px 10px ; margin: 0px 3px 0px 3px ; border-top: 2px double #55bcb8; border-left: 2px double #55bcb8; border-right: 2px double #012a29; border-bottom: 2px double #012a29; background: #449592 left bottom repeat-x; text-align: center; text-decoration: none; display: block; font-size: 12px; color: #FFF; } .button2:hover{ padding: 1px 10px 1px 10px ; margin: 0px 3px 0px 3px ; border-top: 2px double #012a29; border-left: 2px double #012a29; border-right: 2px double #55bcb8; border-bottom: 2px double #55bcb8; background: #55bcb8 left bottom repeat-x; text-align: center; text-decoration: none; } 【HTML】 <form style="float:right; margin-right:20px;"> 　　　<input name="map" class="button2" onclick="window.open('地図.html','_blank','scrollbars=no,width=550,height=500'); return false;" type="button" value="map"/> </form>

画像を拡大する
  • CSS
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

ウィンドウを開くためだけにformは使わない。 単純に <div class="menue"> 　<ul> 　　<li><a href="" onClick="window.open('地図.html','_blank','scrollbars=no,width=550,height=500'); return false;"></a></li> 　　<li><a href=""></a></li><!-- 以下省略 --> 　　<li><a href=""></a></li> 　</ul> </div> だけでよい。びっくりするほど簡単なHTMLでしょ。 そして、なによりもjavascriptやスタイルシートを読まないユーザーエージェント(携帯電話・読み上げソフト・検索エンジンなど）にも情報が伝えられる。HTMLは文書構造にしたがって正しくマークアップすること。 　その上でスタイルシートで好きなようにデザインすれば良いです。スタイルシートも簡単になります。 div.menue{position:relative;} div.menue ul,div.menue ul li{display:block;list-style:none;margin:0;padding:0;} div.menue ul li a{ display:block;width:100%;height:100%; text-align: center;text-decoration:none; border:outset 6px #55bcb8; } div.menue ul li{position:absolute;width:200px;height:80px;line-height:80px;top:5px;left:10px;} div.menue ul li+li{top:5px;left:240px;} div.menue ul li+li+li{top:5px;left:460px;} div.menue ul li a:hover{background-color:yellow;} div.menue ul li a:active{border-style:inset;background-color:red;} とかでよいです。後方互換を考慮するならliにclass名をつけるとかしてください。 補足) borderは色を指定するとoutset,insetは周囲すべて適当に配色してくれます。 補足) 同じプロパティは重複して書かない。書くのもメンテナンスも大変。必要なものだけ上書き 　　　詳細度や登場する順番、継承の有無など、カスケーディングの仕組みを理解しましょう。 　　　　そのためのカスケーディングスタイルシートですからね。【一番重要な仕組み】 補足) スタイルシートやjavascriptを外しても動作できること ★下記ソース中、タブは＿に置換してあるので、タブに戻すこと。 ☆HTML4.01strictで書かれています。 　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) 　でチェック済み ☆CSSは2.1です。 　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　でチェック済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.menue{position:relative;} div.menue ul,div.menue ul li{display:block;list-style:none;margin:0;padding:0;} div.menue ul li a{ display:block;width:100%;height:100%; text-align: center;text-decoration:none; border:outset 6px #55bcb8; } div.menue ul li{position:absolute;width:100px;height:40px;line-height:40px;top:5px;left:10px;} div.menue ul li+li{top:5px;left:240px;} div.menue ul li+li+li{top:5px;left:460px;} div.menue ul li a:hover{background-color:yellow;} div.menue ul li a:active{border-style:inset;background-color:red;} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="menue"> ＿＿<ul> ＿＿＿<li><a href="" onClick="window.open('地図.html','_blank','scrollbars=no,width=550,height=500'); return false;">地図１</a></li> ＿＿＿<li><a href="">地図２</a></li><!-- 以下省略 --> ＿＿＿<li><a href="">地図３</a></li> ＿＿</ul> </div> </body> </html>

romiromi
質問者

お礼

ご丁寧にありがとうございます。 正しくコーディングするところから改めないといけないと痛感しました、勉強になりました。

その他の回答 (1)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

input にする理由ああるのかな？ 過去互換モードだと無理かな・・・ IE6では、　:hover　も　a:hover にしか対応しないからね。 -------------------- .button2 　と　.button2:hover　の重複は不要。 ショートハンドも絡めて省略可能。 left bottom repeat-x;　これは何の為？

romiromi
質問者

お礼

さっそくありがとうございます。 前任者からの引継ぎで見直しているところなのですが、おっしゃるとおり不要な記述がありますね・・・うっかりしてました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • cssによる配置の計算が合いません

    cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>

  • text フォームに背景を設定した時の挙動

    <input type="text"> に、CSS による背景をつけました（ただの段差が付いた白い領域、というのを変更したかった）。CSS は次の通り。 .myinputtext { height: 15px; width: 57px; background-image: url(/Resource/inputtext.png); background-repeat: no-repeat; font-size: 9px; margin: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 2px; overflow: hidden; } 外観は望みどおりのものが出来たのですが、背景画像以上に幅を取る文字数を入力すると、その入力欄（背景の画像）を超えて文字が入力されてしまいます。overflow をhidden にしても回避できません。 幅を超える文字数入力があったときに、なんとかデフォルトの text input と同様に文字だけをスクロールさせたいのですが、何かうまい方法はあるでしょうか。

    • ベストアンサー
    • CSS
  • レイアウト、フッターが崩れてしまいます。

    横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">&copy;＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main　p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }

  • ホームページビルダーでスタイルシートを使ったのですが？

    今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }

  • CSS backgroundが反映されません

    CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }

    • ベストアンサー
    • CSS
  • 直接書き込むCSSを外部ファイルに設定したい

    CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>

    • 締切済み
    • CSS
  • スタイルシートの横並びリスト中央配置について

    #Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • PHPのプログラム

    初心者でPHPのプログラムを組んでもレイアウトが崩れてしまいます。 どのようにすれば直るのでしょうか？詳しい方、どうかよろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>sugoweb</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="topimg"> </div> <div id="left_navi"> <div id="menu"> <ul> <li><a href="index.html">XXXXX</a></li> <li><a href="grudge.html">当社のこだわり</a></li> <li><a href="question.html">Q&A</a></li> <li><a href="plan.html">PLAN</a></li> <li><a href="flow.html">FLOW</a></li> <li><a href="inquiry.php">問い合わせ</a></li> <li><a href="blog.html">ブログ</a></li> </ul> </div> </div> <div id="contents"> <form method="POST" action="inquiry_check.php"> <p class="form">氏名</p> <input type="text" name="name" size="40"><br> <p class="form">電話番号</p> <input type="text" name="tel" size="40"><br> <p class="form">Eメール</p> <input type="text" name="email" size="40"><br> <input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女 <textarea name="bikou" cols="50" rows="10"></textarea> <input type="submit" value="確認"> <input type="reset" value="リセット"> <form method="POST" action="inquiry_check.php"> </div> <div id="footer"> </div> </body> </html> CSS部分 *{margin:0; padding:0; } body { text-align:center; } #container{ width:900px; height:auto; margin:0 auto; text-align:left; } #header{ width:900px; height:90px; border:solid 1px gray; background-image:url("images/header/header_bg.jpg"); position:relative; } .inquiry_btn{ position:absolute; top:8px; left:660px; border:none; } .logo{ border:none; } #topimg{ width:900px; height:250px; } #left_navi{ width:180px; height:1000px; float:left; } #contents{ width:680px; float:right; padding-top:20px; padding-right:20px; } .right{ float:right; margin-left:15px; margin-bottom:20px; } .left{ float:left; margin-right:15px; margin-bottom:20px; } h2{ width:100%; border-left:solid 3px navy; border-bottom:solid 1px navy; padding-left:10px; font-size:18px; padding-bottom:3px; margin-bottom:30px; } h3{ width:100%; border-left:solid 3px navy; border-bottom:solid 1px navy; padding-left:10px; font-size:15px; padding-bottom:3px; margin-bottom:10px; margin-top:10px; } #footer{ width:900px; height:50px; border:solid 1px gray; clear:both; text-align: center; padding-top: 10px; } #footer ul{ list-style-image:url(images/listmark.gif); } #footer li{ display:inline; } #footer a{ display:inline; font-size:12px; padding:10px; text-decoration:none; color:#333; width:auto; } #footer a:hover{ color:red; } #contents p{ line-height:150%; letter-spacing:1px; font-size:13px; margin-bottom:70px; } dl.qa{ margin-bottom:20px; } dt.question{ font-size: 15px; margin-bottom:20px; font-weight:bold; border-left:solid 3px navy; border-bottom:solid 1px navy; padding-bottom:2px; padding-left:5px; } dd.answer{ margin-bottom:25px; } #menu ul{ margin; 0; padding: 0; list-style: none; } #menu li{ display: inline; padding: 0; margin: 0; } #menu a{ display: block; border-top: 1px solid #9F99A3; border-left: 5px solid blue; border-right: 1px solid #9F99A3; background-color: #EEEEEE; font-size: small; padding: 3px 10px; text-decoration: none; color: #333; width: 150px; margin: 0px; text-align: left; } #menu a:hover{ text-decoration: underline; border-top: 1px solid #8593A9; border-left: 5px solid gray; border-right: 1px solid #8593A9; background-color: pink; } #left_navi{ margin-top: 20px; } P.form{ margin-bottom:10px; }

    • ベストアンサー
    • PHP
  • この度HPを作成していて疑問に思ったのですが、imgを回り込ませたとき

    この度HPを作成していて疑問に思ったのですが、imgを回り込ませたときなどに、添付画像の様にならなくする方法はありますか？ なるべくCSSでそれを行いたいのですが、高さを指定してなどは、やりたくありません よろしくお願いします。 HTML <h2>キングギドラ公開開始 </h2> <p class="up"> <img src="file:///C:/Users/chako/Desktop/G-Works/img/lrg53616_0_357935.png" width="150" height="112" border="0"> キンブギドラ公開しました詳細はギャラリーより </p> CSS .up{ bottom : auto; line-height : 15px; border-bottom-width : 2px; border-bottom-style : dotted; border-bottom-color : #990000; } h2{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; height : 20px; border-bottom-width : 2px; border-bottom-style : dotted; border-bottom-color : #990000; bottom : auto; padding-top : 5px; font-size : 20px; } #right img{ float : left; margin-top : 0px; margin-left : 5px; margin-right : 10px; margin-bottom : 10px; }

  • Opera、ネスケでcssが崩れます

    DreamWeaverMXで作業しています。 ブラウザはLunascape（Netscapeから生まれたもの？）とIE6を使用、確認していましたが、 アップ後にOpera9、Netscape、Mozila Firefox1.5で確認したところ CSSが崩れていることに気づきました。 左右のフロートが崩れており、この回避方法を調べましたが よくわかりません。。。。 過去の教えて！から、下記URLを参考にしましたが それでも理解できません。涙 http://members.at.infoseek.co.jp/cssbug/detail/opera.html http://www.keynavi.net/ja/bugh/index.html どなたか制作に詳しい方、助けてください…！ ---------------------------------------- <link rel="stylesheet" href="web.css" type="text/css" media="screen"> --------------- #body{ margin:auto; width: 700px; padding-top: 0px; } #page{ background:#ffffff 700px; width:700px; font-size:11px; color:#585858; border-right: 1px solid #585858; border-bottom: 1px solid #585858; border-left: 1px solid #CCCCCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } #left{ width:180px; float:left; text-align:left; padding-top: 5px; padding-right: 5px; padding-left: 5px; background-color: #797979; height: 100%; padding-bottom: 10px; margin-left: 1px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFFFFF; } } #right{ width:480px; text-align:left; float: right; margin-right: 3px; padding: 15px; margin-top: 8px; } --------------------------------

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する