被らずに別々にcssを適用する方法をご存知でしたら教えてください。よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
cssが被ってしまうということは、cssのセレクタで指定しているhtmlのタグ名かclass名が被ってしまっているということだと思います。
参照されているサイトを見るとリスト囲っているdivのnav
とulのnl
というclass名が被ってしまっているようなので、簡単な修正するなら
- 横メニューのcssの
nav
をnavW
に、nl
をnlW
変更 - 横メニューのhtmlの
nav
をnavW
に、nl
をnlW
に変更 - 縦メニューのcssの
nav
をnavH
に、nl
をnlH
に変更 - 縦メニューのhtmlの
nav
をnavH
に、nl
をnlH
に変更
でいけるはずです。
横メニュー
CSS
1/* --- ナビゲーションバー --- */ 2div.navW { 3width: 100%; /* ナビゲーションの幅 */ 4background: #f9f9f9 url(hor_menu3_off.gif) repeat-x top; /* ナビゲーションの背景 */ 5border-top: 1px #cccccc solid; /* 上境界線 */ 6border-bottom: 1px #cccccc solid; /* 下境界線 */ 7font-size: 80%; 8} 9 10/* --- メニューエリア --- */ 11div.navW ul.nlW { 12width: 600px; /* メニューの幅 */ 13margin: 0 auto; /* センターに配置 */ 14padding: 0; 15background: #f9f9f9 url(hor_menu3_off.gif) repeat-x top; /* メニューの背景 */ 16border-left: 1px #cccccc solid; /* メニューの左境界線 */ 17border-right: 1px #ffffff solid; /* メニューの右境界線 */ 18list-style-type: none; 19text-align: center; 20} 21 22/* --- メニュー項目 --- */ 23div.navW ul.nlW li { 24width: 20%; /* 項目の幅 */ 25float: left; 26} 27 28/* --- リンク --- */ 29div.navW ul.nlW li a { 30display: block; 31position: relative; /* IE6用 */ 32padding: 11px 2px; /* リンクエリアのパディング(上下、左右) */ 33border-top: 1px #ffffff solid; /* リンクエリアの上境界線 */ 34border-bottom: 1px #808080 solid; /* リンクエリアの下境界線 */ 35border-left: 1px #ffffff solid; /* リンクエリアの左境界線 */ 36border-right: 1px #cccccc solid; /* リンクエリアの右境界線 */ 37text-decoration: none; /* テキストの下線(なし) */ 38} 39/* --- ポイント時の設定 --- */ 40div.navW ul.nlW li a:hover { 41background: #f9f9f9 url(hor_menu3_on.gif) repeat-x top; /* ポイント時の背景 */ 42text-decoration: underline; /* テキストの下線(あり) */ 43} 44 45/* --- clearfix --- */ 46.clearFix:after { 47content: "."; 48display: block; 49height: 0; 50clear: both; 51visibility: hidden; 52} 53.clearFix { 54min-height: 1px; 55}
HTML
1<div class="navW"> 2 3<ul class="nlW clearFix"> 4<li><a href="#">メニュー項目1</a></li> 5<li><a href="#">メニュー項目2</a></li> 6<li><a href="#">メニュー項目3</a></li> 7<li><a href="#">メニュー項目4</a></li> 8<li><a href="#">メニュー項目5</a></li> 9</ul> 10 11</div>
縦メニュー
CSS
1/* --- ナビゲーションバー --- */ 2div.navH { 3width: 180px; /* ナビゲーションの幅 */ 4font-size: 80%; 5} 6 7/* --- メニューエリア --- */ 8div.navH ul.nlH { 9margin: 0; 10padding: 0; 11border-top: 1px #c0c0c0 dotted; /* 最上部の境界線 */ 12list-style-type: none; 13text-align: left; 14} 15 16/* --- メニュー項目 --- */ 17div.navH ul.nlH li { 18padding: 3px 1px; /* 項目のパディング(上下、左右) */ 19background-color: #f9f9f9; /* 項目の背景色 */ 20border-bottom: 1px #c0c0c0 dotted; /* 項目の下境界線 */ 21} 22 23/* --- リンク --- */ 24div.navH ul.nlH li a { 25display: block; 26position: relative; /* IE6用 */ 27padding: 8px 10px; /* リンクエリアのパディング(上下、左右) */ 28border-left: 4px #c0c0c0 solid; /* リンクエリアの左境界線 */ 29text-decoration: none; /* テキストの下線(なし) */ 30} 31/* --- ポイント時の設定 --- */ 32div.navH ul.nlH li a:hover { 33border-left-color: #e0e0e0; /* ポイント時の左境界線色 */ 34} 35
HTML
1<div class="navH"> 2 3<ul class="nlH"> 4<li><a href="#">メニュー項目1</a></li> 5<li><a href="#">メニュー項目2</a></li> 6<li><a href="#">メニュー項目3</a></li> 7<li><a href="#">メニュー項目4</a></li> 8<li><a href="#">メニュー項目5</a></li> 9</ul> 10 11</div>
投稿2015/12/20 07:08
編集2015/12/20 07:58総合スコア214
0
両方ともhtmlのdiv要素のクラスがnavになっていますので、どちらかをnav2などとすればよいと思います。
たとえば縦並びのほうをnav2とするとします
html
1<div class="nav2"> 2 <ul class="nl"> 3 <li><a href="#">メニュー項目1</a></li> 4 <li><a href="#">メニュー項目2</a></li> 5 <li><a href="#">メニュー項目3</a></li> 6 <li><a href="#">メニュー項目4</a></li> 7 <li><a href="#">メニュー項目5</a></li> 8 </ul> 9</div>
CSSはこうなります
CSS
1/* --- ナビゲーションバー --- */ 2div.nav2 { 3 width: 180px; /* ナビゲーションの幅 */ 4 font-size: 80%; 5} 6 7/* --- メニューエリア --- */ 8div.nav2 ul.nl { 9 margin: 0; 10 padding: 0; 11 border-top: 1px #c0c0c0 dotted; /* 最上部の境界線 */ 12 list-style-type: none; 13 text-align: left; 14} 15 16/* --- メニュー項目 --- */ 17div.nav2 ul.nl li { 18 padding: 3px 1px; /* 項目のパディング(上下、左右) */ 19 background-color: #f9f9f9; /* 項目の背景色 */ 20 border-bottom: 1px #c0c0c0 dotted; /* 項目の下境界線 */ 21} 22 23/* --- リンク --- */ 24div.nav2 ul.nl li a { 25 display: block; 26 position: relative; /* IE6用 */ 27 padding: 8px 10px; /* リンクエリアのパディング(上下、左右) */ 28 border-left: 4px #c0c0c0 solid; /* リンクエリアの左境界線 */ 29 text-decoration: none; /* テキストの下線(なし) */ 30} 31/* --- ポイント時の設定 --- */ 32div.nav2 ul.nl li a:hover { 33 border-left-color: #e0e0e0; /* ポイント時の左境界線色 */ 34}
投稿2015/12/20 07:12
総合スコア254
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
ありがとうございました。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/12/23 08:41