IEのレイアウト崩れについて 助けてください
- IEのみ配置が異なる検索フォームのレイアウト崩れに困っています。CSSを変更しても他のブラウザのように表示されません。
- IE11でのハック方法がわからず、助言が欲しいです。
- 検索フォームのレイアウト崩れは.search_inputのheightを広くすると発生します。解決方法を教えてください。
- ベストアンサー
IEのレイアウト崩れについて 助けてください
いつもお世話になっております。 実はブログを作成していて一部、IEのみ配置が違っている部分（検索フォーム部分のみ）がございました。 どのようにCSSを変更しても他ブラウザのように表示されず困っております。 そこでIEハックをして修正しようと思いました。 IE11でのハック方法が分からず、どなたかご教示頂けませんでしょうか。 また、CSSなど修正可能な方がいらっしゃいましたら助言頂けると嬉しいです。 【HTML】 <!-- コンテンツ部分 --> <div id="contents"> <a href="#" title="トップページ"><div class="btn">Home</div></a> <a href="#" title="当サイトについて"><div class="btn">about</div></a> <a href="#" title="写真・画像置き場"><div class="btn">Photo</div></a> <a href="#" title="ツイッター - Twitter -"><div class="btn">Twitter</div></a> <a href="#" title="お問い合わせ"><div class="btn">Mail</div></a> <!-- 検索フォーム --> <div class="search" align="right"> <form action="./" method="get" >サイト内検索 <input class="search_input" type="text" name="q" maxlength="200" value="<%search_word>"> <input class="search_btn" type="image" src="pngファイル(15px*14px)"> </form> </div> </div> 【CSS】 /***** ボタン部分 *****/ #contents{ width: 1200px; height: 35px; margin-bottom: 25px; } .btn{ float: left; width: 100px; height: 33px; padding-left: 20px; padding-right: 20px; border: 1px solid #15aeec; background-color: #49c0f0; background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3); background-image: linear-gradient(to bottom, #49c0f0, #2cafe3); color: #fff; -webkit-transition: none; transition: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); line-height: 33px; } /* マウスオーバー */ .btn:hover{ border:1px solid #1090c3; background-color: #1ab0ec; background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2); background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2); } /* クリック */ .btn:active { background: #1a92c2; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2); color: #1679a1; text-shadow: 0 1px 1px rgba(255, 255, 255, .5); } /***** 検索部分 *****/ .search{ /*float: left;*/ height: 33px; margin-left: auto; border: 1px solid #15aeec; background-color: #49c0f0; color: #fff; -webkit-transition: none; transition: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); line-height: 33px; } .search_input{ width: 220px; padding: 5px 35px 5px 6px; border:1px solid #333; } /* 可能であれば:root .search_btnを共通で使用したいです */ :root .search_btn{ position: relative; top: 3px; left:-30px; } /* まだIE10の配置修正はしていません */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .search_btn{ position: relative; top: 0px; left:-30px; } } 動きを確認したところ .search_inputのheightをデフォルトより広くとるとIEのレイアウトのみ崩れるようになりました。 何卒、ご返事よろしくお願い致します。
- webyou
- お礼率43% (7/16)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシートに取り掛かる前に、HTMLを根本から学びなおす必要があります。 ・・・厳しいですが、そのほうがはるかに早く上達できます。・・・ a要素--行内要素--内にDIVは置けません!! ★今のページをAnother HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )でチェックしたらよいです。 ★スタイルシートを使ってデザインする最大の目的は 1) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる 2) 豊富なプレゼンテーション スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 上記のリンク先は必ずしっかり読んで理解すること ★DIVの使い方も含めHTMLの基本が出来ていません。 デザインを目的にHTMLが書かれていますが、HTMLは文書構造をマークアップするものです。出生はSGMLです。 『プレーンテキストのみを用いて、「タグ」を使うことによってデータに意味を持たせることが考えられた。( http://ja.wikipedia.org/wiki/SGML#.E8.83.8C.E6.99.AF )』 <h1>は見出し)heading>、<p>は段落(Paragrph)、<li>はリストのアイテム(List Item) それで足りないときにDIVやSPANを使って 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 (ここが理解され難かったためHTML5では新しく構造を示す要素が追加されて、DIVやSPANは原則使わなくなります。) Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element ) 適切な要素がないときの最後の最後の手段としてdivを使うことを強く推奨する。--とね また、スタイルシートのセレクタも基点となるセレクタを書かれていませんが、本来は書くべきです。 と全般的に基礎が全く出来てない上にCSS3などを積み上げてらっしゃる。それでは崩れ落ちます。 IE11は、他のウェブ標準ブラウザと同じでハックは必要ありません。もしIE11で崩れるならfirefoxやChromeでも崩れるはずです。 標準モードで動作するようにDOCTYPEを記述し、HTML/CSSが正しければIE8以降のブラウザでは崩れはないはず。 HTMLは文書構造しか書きませんから・・こんなシンプルなものでよい。 class名などもデザインではなく文書構造を示すようにする。もちろん無駄なものは書かない。書く必要はない。 <!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"> <!-- --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/" title="トップページ">Home</a></li> ＿＿＿＿<li><a href="/about" title="当サイトについて">about</a></li> ＿＿＿＿<li><a href="/album" title="写真・画像置き場">Photo</a></li> ＿＿＿＿<li><a href="/twiter" title="ツイッター - Twitter -">Twitter</a></li> ＿＿＿＿<li><a href="/contact" title="お問い合わせ">Mail</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="form"> ＿＿＿<form action="./"> ＿＿＿＿<h2>サイト内検索</h2> ＿＿＿＿<p> ＿＿＿＿＿<input type="text" name="q" maxlength="200" value="%search_word"> ＿＿＿＿＿<input type="image" src="pngファイル(15px*14px)"> ＿＿＿＿</p> ＿＿＿</form> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
関連するQ&A
- cssのボタンについて（IEで背景が表示されない）
リンク先を表示するためにcssでボタンを以下のように作製しました。 FireFoxでは正常にきちんと表示されるものの、 IE10で確認したところ、IEでは背景色が表示されませんでした。 そこでzoom: 1;などを足すなどしてみたのですが やはり表示されません。どうしたらいいのかご指南いただけませんか？ どうかよろしくお願いいたします。 a.btn { position: relative; background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 2px solid #FFF; color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); text-shadow: 0px 0px 3px rgba(0,0,0,0.5); padding: 10px 10px; margin: 4px 2px 4px 2px; ｝
- ベストアンサー
- CSS
- monacaで使うcssの釦の色を変えたい
現在monacaのiOSのアプリ作成の練習しています。掲載したようなボタンのCSSを並べてみました。 <a class="button--large" href="mentenance_index.html">テスト1</a> <a class="button--large" href="mentenance_index.html">テスト2</a> <a class="button--large" href="mentenance_index.html">テスト3</a> このときにこのボタンの色を変えたいと思うのですが、 "css/style.css" このファイルのbutton--largeクラスのどの部分を修正すれば色は変わりますでしょうか？ ちなみに、 .button--large { .....（中略）...... background-color: #1284ff; .....（中略）...... } この部分だと自分は思い、 background-color: #00008b; というダークブルーのような設定に変更してiphoneでデバッグしてみたのですが、色が変わってくれませんでした。 この button02--large クラスの内容も掲載させて頂きます。 どうぞ、ご教示の程よろしくお願い致します。 .button--large { text-align: center; position: relative; display: inline-block; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: none; font-family: 'Helvetica Neue', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: auto; text-decoration: none; padding: 4px 20px; font-size: 16px; line-height: 36px; letter-spacing: 0; color: #fff; text-shadow: 0 1px none; vertical-align: middle; background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; border: none; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -moz-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -o-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; font-weight: 400; font-size: 16px; font-weight: 500; line-height: 36px; padding: 4px 20px; display: block; width: 100%; } .button--large:active { background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; color: #fff; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; opacity: 0.6; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:disabled { opacity: 0.3; cursor: default; pointer-events: none; } .button--large:hover { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:focus { -webkit-box-shadow: none; box-shadow: none; outline: 0; }
- ベストアンサー
- CSS
- ギザギザボーダーの向きを下向きにしたいのですが
CSS3初心者です。宜しくお願いします。 Jagged Border http://codepen.io/SomeStuffer/details/uwstc ヘッダーとフッターに配置したいのですが、 ヘッダーでギザギザが逆にならなくて困ってます。 画像のようにしたいのですが、CSSのどの部分を変更したらよいでしょうか。 宜しくお願いします。 .jagged-border { position: relative; width: 100%; height: 50px; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px); filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px); } .jagged-border:before { content: ""; display: block; position: absolute; top: -10px; width: 100%; height: 10px; } .lightgray-bg { background: #ECF0F1; } .lightgray-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%); -webkit-background-size: 20px 40px; background-size: 20px 40px; } .white-bg { background: #FFF; } .white-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%); -webkit-background-size: 20px 40px; background-size: 20px 40px; } .darkgray-bg { background: #C3C9CC; } .darkgray-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%); -webkit-background-size: 20px 40px; background-size: 20px 40px; }
- 締切済み
- CSS
- CSS3グラデーションで、右端だけフェードする線を
CSS3グラデーションで、右端だけフェードする線を作成したいのですが、どうすれば良いでしょうか？ ・下記リンク先では、中央に位置した線の両端がフェードアウトしているのですが、 これを左端に位置させ、線の右端部分だけをフェードアウトさせたいのですが、どうすれば良いでしょうか？ ▽[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック | コリス http://coliss.com/articles/build-websites/operation/css/css-tutorial-fading-dark-gradient-by-cyberap.html できれば、この部分を解説して欲しいのですが、アレでしたら、完成形だけでもどこかに上げていただけないでしょうか？ background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)), radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%); background-image: -o-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), -o-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)), -o-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%); background-image: -ms-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), -ms-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)), -ms-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%); background-image: -moz-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), -moz-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)), -moz-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%); background-image: -webkit-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), -webkit-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)), -webkit-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);
- ベストアンサー
- CSS
- IE9でa:hoverが効かない
IE9でa:hoverが効かなくて困っています。 droppy.jsというJavaScriptを使ってドロップメニューにしているのが原因でしょうか？ 以下ソースです。 html <div id="navi"> <div class="inner"> <ul> <li><a href="サイトトップのURL">トップ</a></li><!-- ←ここのa:hoverは正常に動作する --> <li> <a href="メニュー1のURL">メニュー1</a><!-- ←ここのa:hoverは正常に動作する --> <ul> <li><a href="メニュー1-1のURL">メニュー1-1</a></li><!-- ←ここのa:hoverが効かない --> <li><a href="メニュー1-2のURL">メニュー1-2</a></li><!-- ←ここのa:hoverが効かない --> </ul> </li> </ul> </div> </div> ｃｓｓ #navi { background: url(naviの背景画像のURL) repeat-x left top #000000; border-bottom: 1px solid #000000; -moz-box-shadow: 0 0 3px #484848;/* Firefox用 */ -webkit-box-shadow: 0 0 3px #484848;/* Safari,Google Chrome用 */ box-shadow: 0px 0px 3px rgba(0,0,0,0.5); } #navi .inner { margin: 0 auto; width: 940px; } #navi .inner ul li { float: left; margin: 15px 0; padding: 0 10px; position: relative; } #navi .inner ul li a { padding: 5px 11px; color: #ffffff; text-decoration: none; } #navi .inner ul li a:hover { border: 1px solid #ffffff; padding: 5px 10px; color: #333333; background: #ffffff; background:linear-gradient(#eaeeee, #e2e3e3); background: -moz-linear-gradient(top, #eaeeee, #e2e3e3);/* Firefox用 */ background: -webkit-gradient(linear, left top, left bottom, from(#eaeeee), to(#e2e3e3));/* Safari,Google Chrome用 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3);/* IE6,7 */ -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3)";/* IE8 */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; behavior: url(/PIE.htc); } #navi .inner ul li ul { position: absolute; top: 39px; left: 0; zoom: 1; display: none; background: #dae4d7; border: 1px solid #8db0a0; border-top: none; border-bottom: none; font-size: 85%; width: 150px; } #navi .inner ul li ul li { float: none; padding: 0; margin: 0; background: none; } #navi .inner ul li ul li:hover { background: none; } #navi .inner ul li ul li a { color: #2d595f; text-align: left; display: block; background: url(icon画像のURL) no-repeat 5px center; border-top: 1px solid #ffffff; border-bottom: 1px solid #8db0a0; padding: 5px 5px 5px 20px; } #navi .inner ul li ul li a:hover { background: url(hoer用icon画像のURL) no-repeat 5px center #2d595f; color: #ffffff; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-top: 1px solid #2d595f; border-bottom: 1px solid #2d595f; border-left: none; border-right: none; padding: 5px 5px 5px 20px; margin: 0; } どこがおかしいのかわからないのでnaviv部分全体を載せます。 宜しくお願いします。
- ベストアンサー
- CSS
- CSS見出し 文字大きさ
CSSまったくの素人です。 こちらのサイトからコピペした https://jajaaan.co.jp/css/css-headline/ 上下線グラデーションの見出しの文字の大きさを変更したいのですが 方法がわかりません。 HTML <h3>CSS見出しデザイン</h3> CSS h3 { position: relative; padding: 1.5rem 2rem; color: #000000; text-shadow: 0px 15px 10px #ff8c04; -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1); box-shadow: 0 2px 14px rgba(0, 0, 0, .1); } h3:before, h3:after { position: absolute; left: 0; width: 100%; height: 4px; content: ''; background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); } h3:before { top: 0; } h3:after { bottom: 0; } font-size:をどこへ記載すれば良いのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- ウインドウサイズを小さくしてもレイアウトが乱れないようにする方法
下のHTMLとCSSに、何を追加すればウインドウサイズを変更しても、レイアウトが乱れないようにすることができるでしょうか？ div { float: left } div.Kukaku1 { background-color:blue; width: 900px; height: 150px; } div.Kukaku2_1 { background-color:green; width: 300px; height: 25px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 25px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 25px } div.Kukaku3_1 { background-color: black; width: 250px; height: 200px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 50px } div.Kukaku4_Ga { width: 450px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 450px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 450px; height: 70px } div.Kukaku4_3 { background-color: red; width: 450px; height: 150px } <div class="Kukaku1"></div> <div class="Kukaku2_1"></div> <div class="Kukaku2_2"></div> <div class="Kukaku2_3"></div> <div class="Kukaku3_1"></div> <div class="Kukaku3_2"></div> <div class="Kukaku3_3"></div> <div class="Kukaku4_Ga"> <div class="Kukaku4_1"></div> <div class="Kukaku4_2"></div> </div> <div class="Kukaku4_3"></div> 回答よろしくお願いします。
- ベストアンサー
- HTML
- 縦型 レスポンシブ対応 多階層プルダウンウンリスト
www.oct.ac.jp こちらの専門学校と同じ体裁のサイトを作りたいです。 左は固定（可変でも可）、右は可変 にしたい。 ＜HTML＞ <div class="content"> <div class="frame-left"> <div class="aaa"> <ul class="nav"> プルダウンリスト </ul> </div> </div> <div class="frame-right"> メイン記事内容 </div> </div><!--.content--> ＜ＣＳＳ＞ ここでつまずきました。 .content{ display: -webkit-flex; display: flex;} .frame-left{ width:20%; } .frame-right{ width:80%; } .aaa { overflow: hidden; width: 750px; height: 300px; margin: 0 auto; padding: 0; box-sizing: border-box; display: flex; } .nav { width: 150px; margin: 0; padding: 0; } .nav li { position: relative; width: 150px; height: 40px; } .nav > li { border-bottom: none; } .nav li:last-child { border-bottom: none; } .nav li:hover > ul > li { border-bottom: none; } .nav li > ul > li:last-child { border-bottom: none; } .nav li a { display: block; width: 150px; height: 40px; color: #fff; font-size: 14px; line-height: 2.8; padding: 0 5px; background: #9fb7d4; border-bottom: 1px solid #eee; box-sizing: border-box; text-decoration: none; transition: 0.5s; } .nav > li:hover > a {/*layer-1*/ color: orange; background: #afc6e2; transition: 0.5s; } .nav > li li:hover > a {/*layer-2*/ color: olive; background: #afc6e2; } .nav li:hover > ul > li { overflow: visible; top: -40px; left: 110px; height: 40px; } .nav li ul li { overflow: hidden; height: 0; left: 110px; list-style: none; transition: 0.2s; } .nav li ul li a { background: #9fb7d4; transition: 0.5s; } .nav li ul:before { position: absolute; content: ""; top: 14px; left: 140px; border: 5px solid transparent; border-left: 5px solid #fff; } 1）これだと2階層目が上から下までの全幅にならない 2）画面を縮小すると、プルダウンメニューがはみ出す width:auto; などにしてみましたが、上手くいきませんでした。 やり方を教えていただきたく、よろしくお願い致します。 ※できればＣＳＳだけでなんとかしたいですが、無理ならJavaScriptや jQueryなどを使って実現したいです。
- ベストアンサー
- CSS
- CSSのカスタマイズについて
ライブドアブログを最近始めたのですが、 素人にも関わらずカスタマイズしたいと思っています。 タイトル部分を中央に揃えたいと思っているのですが どのようにしたらいいかさっぱりわかりません。 カスタマイズのページをコピペします。 よろしくお願いします。 /* ブログのヘッダー、タイトル、説明 ----------------------------------------------- */ #blog-header { margin-bottom: 40px; position: relative; } #blog-header-inner {} #blog-header-image { height: 400px; width: 100%; background-color: #287cba; background-image: -webkit-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -moz-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -ms-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -o-linear-gradient(#57bef5 0%, #287cba 100%); background-image: linear-gradient(#57bef5 0%, #287cba 100%); } #blog-title { font-size: 40px; font-weight: bold; line-height: 1.4; margin: 30px 0; } #blog-title a { color: #000; } #blog-description { color: #979797; font-size: 14px; font-weight: normal; line-height: 1.6; margin: 30px 0; } #blog-description a { color: #979797; }
- 締切済み
- SE・インフラ・Webエンジニア
- レイアウトが崩れます
汚いソースで失礼します。 メニューとコンテンツとサブメニューがありますが この３つの高さを保つにはどうしたらいんでしょうか？ コンテンツ部分の高さが長いと メニューとサブメニューの高さは短いままで ダサい感じなんです。 なんとご説明したらいいのやら（汗 コンテンツ部分が長くてもメニューとサブメニューの高さを自動に設定させるようにするには、どうしたら良いのでしょうか？ ご教授願います HTMLのソース＋CSSです↓ <html> <body> <div class="wrapper"> <div class="header"> ヘッダーになります<br> </div> <div class="main"> <div class="menu"> menu<br> menu<br> menu<br> menu<br> menu<br> menu<br> </div> <div class="contents"> コンテンツになります<br> コンテンツになります<br> コンテンツになります<br> コンテンツになります<br> </div> <div class="submenu"> サブメニューはこちらです<br> サブメニューはこちらです<br> </div> </div> <div class="footer"> フッター<br> </div> </div> </body> </html> CSS .wrapper { width: 900px; margin: 0 auto; line-height: 1.5; } /* メイン*/ .main { width: 900px; } /* ヘッダ*/ .header { width: 900px; height: 200px; background-color: #66FFFF; background:url(img/top2.jpg) ; } /* Menu*/ .menu { width: 150px; float: left; background-color: #FFFF99; } /*コンテンツの設定*/ .contents { float: left; width: 600px; background-color: white; } /*SubMenuの設定*/ .submenu { float: left; width: 150px; height: 300px background-color: #66FF66; } /* 下の設定 */ .footer { clear: both; width: 900px; border-top: 1px dotted gray; height: 20px; text-align: center; font-size:0.7em; background-color:black; }
- ベストアンサー
- HTML
お礼
なるほど・・・ありがとうございます。 HTML部分ですがブログのテンプレートをそのまま引用してクラスを追加したのみです。 しかしIE11含めてIEのみ形が崩れるのは直りませんでした。 形が崩れている部分ですが、pngファイルとサイト内検索部分のみで他は上手く表示されているんですよね。 原因は.search_input paddingの縦ラインの調整部分で不具合が起きているということは確認できています。
補足
問題の部分を各自別のボックスにセットしてレイアウト崩れを回避することができました。 原因はやはりHTML部分ではなくCSS部分のテキストボックスのサイズ調整でIEでは全体のレイアウトが崩れていました。 修正に合わせてHTML文も修正しました。 <!-- コンテンツ部分 --> <div id="contents"> <ol> <li class="btn" href="#" title="トップページ">Home</li> <li class="btn" href="#" title="当サイトについて">about</li> <li class="btn" href="#" title="写真・画像置き場">Photo</li> <li class="btn" href="#" title="ツイッター - Twitter -">Twitter</li> <li class="btn" href="#" title="お問い合わせ">Mail</li> <form action="./" method="get" > <li class="leftbox">サイト内検索</li> <li class="search"><input class="search_input" type="text" name="q" maxlength="200" value="<%search_word>"></li> <li class="rightbox"><input class="search_btn" type="image" src="アイコン"></li> </from> </ol> </div> 無事にレイアウトを完成することができました。 ありがとうございました。