CSSのボタン作成の崩れ
winでDreamweaver8で作成しています。
ロールオーバーボタンを作成したのはいいのですが、、、
一番左のボタンをクリックすると一番右のアクティブな状態のボタンが出現してしまいます。
フロートと左にしてます。
何度やり直しても解決できません（＞＜）
宜しくお願い致しますm(_ _)m
cssコードは
body {
font-family: "ＭＳ Ｐゴシック", 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;
}
になります。
