ロールオーバーが上手く行きません。
-
0 名前： りえ ： 2006/02/26 01:36
- ようやく自分のイメージするレイアウトにできあがってきました。
情報を下さった皆様には、本当に感謝しております。
下記ページにつき
http://thai777.web.fc2.com/test_24feb.html
左側のメニューバーは、リンクの張られている部分に
カーソルが重なると、背景の色が黄色に変わります。
黄色い部分は、どの部分でもクリックできるよう
display:blockを指定しています。
上の9つのボックスで、テキストにカーソルを乗せると
背景に変わるのですが、テキスト以外の場所にカーソルを
持って行っても、背景の色が上手く変わりません。
他のボックスは、どの部分にカーソルを持って行っても
背景が黄色に変わり、どの部分でもクリックできるように
なるのですが、上の9つのボックスだけが、思うように
動作しないのです。
ソースを確認したのですが、原因がわかりません。
何度も恐縮ですが、是非教えて下さい。
お願いします。
-
1 名前： りえ ： 2006/02/26 01:36
- 色々と調べてみたのですが、ヘッダーの下にある、floatで横に配列した
ポップアップメニューの、ポップアップメニュー項目
が下がる位置までにあるサイドメニューの項目が、上手くロールオーバー
しないことがわかりました。
ヘッダーの下にある、ポップアップメニューのソースを修正する
必要があるのだと思うのですが、どこを修正、もしくは追加すれば良いのかわかりません。
ご存知の方がいらっしゃいましたら、是非教えて下さい。
以下、ポップアップメニューに指定した、スタイルです。
また、サイトＵＲＬは
http://thai777.web.fc2.com/test_24feb.html
になります。
以下、ポップアップメニューのスタイル
↓
.navbar {
width: 666px;
position:absolute;
top:135px;
left:0px;
border-style: none;
}
.navbar h2 {
margin:0px;
font-size: 11px;
font-family: "MS Pゴシック",Osaka,Sans-Serif;
color:#ffffff;
}
.navbar h2 a {
display: block;
text-align: center;
width:110px;
height: 30px;
line-height: 28px;
background-color:#ADD8E6;
border-style:solid;
border-width:1px 1px 1px 0px;
border-color:#000080 #191970 #191970 #ccffff;
color:#0033cc;
background-image:url(../photo/menu.gif);
}
.menu {
width:110px;
float:left;
left: 0px;
top: 135px;
}
.menu ul {
margin: 0px;
padding:0px;
list-style-type:none;
font-size: 11px;
visibility:hidden;
}
.menu li {
background-color: #00ffff;
border-left:solid 1px #CCCCCC;
border-bottom:solid 1px #999999;
border-right:solid 1px #999999;
line-height:100%;
margin: 0px 2px;
padding:2px 0px 1px 1px;
}
.menu li a {
display:block;
padding:2px;
color: #333333;
}
.menu li a:hover {
background-color:#FF9900;
color: #FFFFFF;
}
-
2 名前： ＢＢ ： 2006/02/26 01:36
- 上記のご質問には、あまり関係ないかもしれませんが、
上部のリンクメニューを、<div class=contents></div>内に
ボーダーを含め隙間なく配置を希望されていると思うのですが、
border(paddingもですが)は、各ブラウザ及び各バージョン、
Doctypeによっても解釈（レンダリング）が異なります。
あまりおすすめではないですが、現在のレイアウトをそのまま
使いたいのでは、ハックを利用するしかないと思います。
又は、ボーダーを含めた背景画像に変更すると、レイアウトは
保てると思います。
その他、IE以外で拝見するとリンクが機能しなかったり、上記の箇所以外で
レイアウトが大きく崩れていました。
もちろんjavascriptを無効にした環境でもそうでが、
先にこちらの問題を解決された方がいいかもしれません。
閲覧環境をIEのバージョン限定で製作されているのでしたら、
ごめんなさい。
とても素敵なサイトになりそうですね。
応援しています。 頑張って下さい。
-
3 名前： りえ ： 2006/02/26 01:36
- BBさん、情報ありがとうございました。
ＩＥだけでなく、他のブラウザーも対象にしたいので
ソースを修正して行こうと思います。
borderやpaddingでなく、背景に画像を使おうかと
考え直しました。
一つ教えていただきたいのですが、「あまりおすすめでは
ないハック」とはなんでしょうか？
もしご存知でしたら、最初の質問に関しても、何か情報を
いただければと思います。
ありがとうございました。
-
4 名前： ＢＢ ： 2006/02/26 01:36
- ＞一つ教えていただきたいのですが、「あまりおすすめでは
＞ないハック」とはなんでしょうか？
borderやpaddingなどその他多数ありますが、
各ブラウザ等によって、解釈が異なりますので、
それ用にＣＳＳを記述し対応させる事です。
ＣＳＳでは、各ブラウザが理解出来ない部分は、無視をします、
そして、バグもそれぞれに抱えていますので、
それを、逆手に取る方法です。
!importantやvoice-familyや(\)←バックスラッシュなどを使い、
それぞれのブラウザ等用に値を振り分けます。
以下に参考サイトを上げておきます。
http://www.tantek.com/CSS/Examples/boxmodelhack.html
http://www.info.com.ph/~etan/w3pantheon/style/abmhtest.html
http://css-discuss.incutio.com/?page=BoxModelHack
その他にも、色々なハックが考案されている様ですが、
現在・過去のブラウザ/バージョンに対しては有効ですが、
仮に今後、現在のバージョンのバグ修正が行われたり、
新しいバージョンが出た場合、ハックが逆に仇になる可能性があります。
記述方法を駆使すれば、ハックを使わずとも、
対応出来るケースがあるかもしれません。
りえさんの場合、やはり背景に画像を使うのが、いいかもしれません。
＞他のボックスは、どの部分にカーソルを持って行っても
＞背景が黄色に変わり、どの部分でもクリックできるように
＞なるのですが、上の9つのボックスだけが、思うように
＞動作しないのです。
<div class=menu></div>内の<li>が関係している様です。
うまく機能しない左上の9つのボックスの高さと、
javascriptで表示させる上部のメニューの内一番長いメニューの
高さがほぼ同じです。
仮に、<DIV class=menu></div>内の<li>を減らすと、
左のメニューは機能しました。
おそらくpositionで、<div class=menu></div>を配置している為、
下層になる<div class=menu2></div>と重なっている為でしょう。
解決策は？
ごめんなさい。思い浮かばないです。
何方かバトンを！
-
5 名前： ＢＢ ： 2006/02/26 01:36
- 追記
javascriptでのメニューを外すか、
左メニューは、javascriptで表示させるメニューの高さまでは、
アンカータグを使用しない（メニューにしない）方がいいかもしれないですね。
