![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
winでDreamweaver8で作成しています。
ロールオーバーボタンを作成したのはいいのですが、、、
一番左のボタンをクリックすると一番右のアクティブな状態のボタンが出現してしまいます。
フロートと左にしてます。
何度やり直しても解決できません(><)
宜しくお願い致しますm(_ _)m
cssコードは
body {
font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
background: #FFFFFF;
text-align: center;
margin: 0px;
padding: 0px;
}#wrapper {
margin: 0px auto;
padding: 0px;
height: auto;
width: 860px;
border-right: 1px solid #F69789;
border-bottom: 1px solid #F69789;
border-left: 1px solid #F69789;
text-align: left;
}
/*ヘッダ全体コンテナ*/
#header {
background: url(images/backheader.gif) no-repeat left top;
margin: 0px;
padding: 0px;
height: 95px;
border-bottom: 5px inset #F69789;
position: relative;
}
#header h1 {
margin: 0px;
padding: 0px;
float: left;
}
/*ヘッダ内タイトルロゴ*/
#header img {
margin: 0px;
padding: 26px 0px 6px 10px;
height: 63px;
width: 130px;
}
/*ヘッダ内ナビ*/
#header ul {
font-size: 11px;
font-weight: bold;
margin: 80px 0px 0px;
padding: 0px;
color: #666666;
float: right;
list-style: none;
}
#header li {
display: inline;
margin: 0px;
padding: 0px 10px 0px 15px;
background: url(images/tpo_button.gif) no-repeat left center;
}
#header li a {
text-decoration: none;
color: #666666;
}
#header li a:hover,#header li a:active {
color: #990033;
text-decoration: underline;
}
#header #midashi {
position: absolute;
height: 40px;
width: 400px;
left: 230px;
top: 35px;
background: url(images/midashi1.gif) no-repeat;
font-size: 9px;
}
/*メイン*/
#main {
margin: 0px;
padding: 0px;
height: 180px;
border-bottom: 1px solid #660000;
}
#topnavi {
margin: 0px;
padding: 0px;
height: 30px;
border-bottom: 1px solid #990033;
background: #666666;
}
#topnavi h2 {
margin: 0px;
padding: 0px;
font-size: 9px;
float: left;
}
#topnavi h2 a {
text-decoration: none;
display: block;
margin: 0px;
padding: 0px;
height: 30px;
}
/*1番目のボタン*/
#topnavi h2#tn1 a {
background: url(images/butoon1/tb1.gif) no-repeat;
width: 130px;
}
#topnavi h2#tn1 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb1_2.gif) no-repeat;
}
/*2番目のボタン*/
#topnavi h2#tn2 a {
background: url(images/butoon1/tb2.gif) no-repeat;
width: 130px;
}
#topnavi h2#tn2 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb2_2.gif) no-repeat;
}
/*3番目のボタン*/
#topnavi h2#tn3 a {
background: url(images/butoon1/tb3.gif) no-repeat;
width: 130px;
}
#topnavi h2#tn3 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb3_2.gif) no-repeat;
}
/*4番目のボタン*/
#topnavi h2#tn4 a {
background: url(images/butoon1/tb4.gif) no-repeat;
width: 130px;
}
#topnavi h2#tn4 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb4_2.gif) no-repeat;
}
/*5番目のボタン*/
#topnavi h2#tn5 a {
background: url(images/butoon1/tb5.gif) no-repeat;
width: 130px;
}
#topnavi h2#tn5 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb5_2.gif) no-repeat;
}
/*6番目のボタン*/
#topnavi h2#tn6 a {
background: url(images/butoon1/tb6.gif) no-repeat;
width: 210px;
}
#topnavi h2#tn6 a:hover,#topnavi h2#tn1 a:active {
background: url(images/butoon1/tb6_2.gif) no-repeat;
}
になります。
No.1ベストアンサー
- 回答日時:
コピペしたんだろうけど変更し忘れている
【誤】
#topnavi h2#tn2 a:hover,#topnavi h2#tn1 a:active
【正】
#topnavi h2#tn2 a:hover,#topnavi h2#tn2 a:active
以下、tn3,tn4,tn5,tn6も同様に修正すること。
#CSSは詳細度が同じ時は後に書かれたものが優先です。
himajin100000様
有難うございますーーーーー!!!!!
出来ましたーーーー!!
周りをクリアーしてみたり、マージン余白をいじってみたり訳分らなくなって混乱状態でした(><)
ボタンのCSSもちゃんと見たつもりだったんですが、全然見てなかったんですね。
こんな単純ミスでホントあほです・・・
大変助かりました(涙)
また行き詰ったら質問するかと思いますが宜しくお願いします(笑)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSS:animation開始位置の設定
-
Css側で、文字の位置を数センチ...
-
CSSで3分割した背景画像を配置...
-
CSSでa要素全体をリンク出来る...
-
CSSボーダーの設定(横並びボタ...
-
CSSと<dl><dd>で間隔をあけて1...
-
CSSのボタン作成の崩れ
-
ヘッダー画像を幅一杯にすると...
-
widthやheightの数値に単位(px...
-
Mozilla Firefoxで画像がちゃん...
-
今の文字を4センチぐらい下げ...
-
Media Queries 4 で 非推奨とな...
-
cssで「下よせ」ってどうやって...
-
横並びしたいのですが
-
css初心者 フレックスボックス...
-
CSSで左に画像、右にテキストを...
-
ネガティブマージン
-
【スタイルシート?】同行内で...
-
スマホで、 background-image ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
CSSで背景画像を一番下にもって...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報