![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、
前のulタグで使った背景画像がずっと継承されて困っております。
当方の内容です↓
【CSS記述】
-----------------------
#manu-nanyo{
display: block;
position: absolute;
background-image: url(fu/area_nanyo.png);
background-repeat: no-repeat;
background-position: center top;
color: black;
width: 200px;
height: 40px;
}
.job-menu ul{
display: block;
list-style-type: none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 10px;
padding-bottom: 10px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: silver;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: silver;
text-decoration: none;
}
.job-menu li{
margin: 0;
padding: 0;
background: url(img/migi_aka.png) left no-repeat;
}
.job-menu a{
display: block;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 14px;
color: black;
font-size: 15px;
text-decoration: none;
}
.job-menu a:hover{
background-color: rgb(204, 204, 204);
color: red;
}
#newshop_bunner{
frot: left;
width: 200px;
padding-top: 10px;
text-align: left;
background-position: top left;
}
.newshop-banner ul{
margin-top: 20px;
margin-left: 0;
padding-left: 0;
}
.newshop-banner li{
text-decoration : none;
text-align : right;
font-size: 12px;
}
.newshop-banner a{
margin-top: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
color: blue;
font-size: 12px;
text-decoration: none;
text-align: right;
}
.newshop-banner a:hover{
background-color: white;
color: lime;
}
ul.sample{
width:100%;
margin-top:20px;
font-size:10px;
padding-left:0;
margin-left:0;
}
ul.sample li{
list-style-position: outside;
background-color: transparent;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: auto auto;
background-origin: padding-box;
background-clip: border-box;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
width: 120px;
float: left;
border-width: 2px;
border-color: rgb(255, 238, 219);
border-style: ridge;
}
.list-test1{
float: left;
list-style-type: none;
margin-top: 40px;
padding-top: 40px;
color: orange;
}
【HTML記述】
-----------------------
<div id="manu-nanyo">
<div class="job-menu">
<ul>
<li><a href="*">野球</a>
<li><a href="*">サッカー</a>
<li><a href="*">テニス</a>
<li><a href="*">ゴルフ</a>
<li><a href="*">バスケ</a>
</ul>
</div>
<div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗">
<ul class="newshop-banner">
<li><a href="*"><img src="#">店名○○○○○お店ネーム</a>
<li><a href="*"><img src="#">店名○○○○○お店ネーム</a>
</ul>
<ul class="sample">
<li><a href="#">テスト1</a>
<li><a href="#">テスト2</a>
<li><a href="#">テスト3</a>
<li><a href="#">テスト4</a>
<li><a href="#">テスト5</a>
</ul>
<ul class="list-test1">
<li><a href="#">トップページ</a>
<li><a href="#">テストページ1</a>
<li><a href="#">テストページ2</a>
</ul>
</div>
-----------------------
.job-menu li で使った背景画(矢印)・スタイルが、その後 li を使う度に継承されてしまいます。
クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・
(ul属性・a属性で分けても継承されてしまいます)
試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。
ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか?
それとも根本的な何かを履き違えしているのでしょうか?
宜しくお願い致しますm(_ _)m
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
根本なのですが、こちらにあげられているソースは実際に使っているものでしょうか。
もし実際につかっているものでしたら、タグの閉じ忘れが原因かと思います。
もし違うようでしたら実際に使っているソースを上げていただけますでしょうか。
また、確認されているブラウザも教えてください。
No.1
- 回答日時:
上記見ましたが、
テストしてないので何とも言えないのですが、
.job-menu li{
上記のクラス指定を固定する。
↓
#manu-nanyo .job-menu ul li{
に変えてみてはいかがでしょうか?
ソースを見たのですが、
reset.cssを使ってみてはいかがですか?
この回答への補足
ご回答ありがとうございます。
クラス指定の固定、シートを別に作成、両方ともダメでした・・・
一応記述を
#manu-nanyo .job-menu ul li{
.job-menu ul li #manu-nanyo{
.job-menu ul #manu-nanyo{
.job-menu li #manu-nanyo{
もやってみたのですが・・・
どうしたらいいものでしょう(汗)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
htmlの文字が縦書きになる
-
HRタグ 枠線を透明にするには?
-
form input テキストを上下中央...
-
含む含まないという概念自体の...
-
textareaの幅を画面と合わせたい
-
htmlのolやulなどlistにtitleや...
-
CSS:animation開始位置の設定
-
<div id="container">の使いか...
-
【ヒトの神秘】美男美女から何...
-
ラジオボタンの装飾(色の違う2...
-
favicon.ico はもういらない?
-
smallにtext-allignが効かない
-
tdに対してmin-heightの定義、...
-
VBAでの素数の求め方
-
訪問済のリンク色を変えない方法
-
「・」(黒い点)を非表示にした...
-
1サイト内にHTML5とXHTMLが混在...
-
<table>の高さ固定。情報増加時...
-
idの中のid指定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
ドリームウィーバーでリスト作...
-
リストの画像をくっつけたい!
-
ホームページビルダー14でメニ...
-
CSSのどの部分を変更すると...
-
光沢のあるボタンの作り方について
-
IEの時に空白ができてしまします。
-
CSSの外部参照について。
-
CSSの継承について...
-
箇条書きで表される点がずれる...
-
Firefoxだとメニューバーが崩れ...
-
CSSのposition指定で親要素の背...
-
SEO対策について
-
階層型ドロップダウンメニュー...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
【ヒトの神秘】美男美女から何...
-
<h1>、<h2>と<p><div>の行間を...
おすすめ情報