いつもおせわになります。
cssで横並びのリンクバーがmap、予約、menuとかあり、
(1)デフォルト(2)カーソルを合わせた時(3)現在のページはココですよ、
の状態を1枚の画像で作り、positionで各ごとの表示ができるよう、下記のように指定をしました。
htmlの方のテキストリンクは表示してません。
デフォルト時の画像と、オンマウスの表示はIE・operaともに可能なのですが
肝心の、(3)のクリックした時(それ以降もずっとそのままで希望)。
がきちんと表示されません。
厳密には・・
IE→一瞬中途半端に表示されるが、次のクリックをすると消える。
opera、firefox→クリックした瞬間のみ一瞬表示。
疑似クラスが
"link", "visited", "hover", "active" などあると思いますが
(記載方法に順番があることは知っています)
もしかしてもしかして・・・・・・・
クリックした現在のページの表示指定は、"active" ではないのでしょうか。
"active"はクリックした瞬間?だけ?それ以降もずっとそのままでいてよ~~
と思うのですがそんな設定はないのでしょうか。
"visited"だと、全部のリンクに訪問すると、全部変化してしまうわけですよね?
いまちょっとやってみましたが、思ったものではないですし・・
自分なりに調べて、楽チンな気もして、
cssで1枚画像でリンク、というのををやってみたかたったのですが
むしろ逆に面倒なことになってしまいました・・・・
これでだめだったら、普通にオンマウスオーバーとかで行うので
なぜ表示できないのか、解決方法があるのか知りたいです・・・
長くなって恐縮です。navbar部分のみですが下記に記述しますので
もしよかったら、ご覧いただけますか?
どなたか、改善方法、アドバイスなどありましたらご教授ください!!
----------------------------------------------------------------------------------------------
◆html◆
----------------------------------------------------------------------------------------------
<ul id="navbar">
<li><a href="#"class="map"><span>地図</span></a></li>
<li><a href="#" class="res"><span>ご予約・貸切</span></a></li>
<li><a href="#" class="manu"><span>メニュー&料金</span></a></li>
<li><a href="#" class="about"><span>○○について</span></a></li>
</ul></div>
----------------------------------------------------------------------------------------------
◆CSS◆
----------------------------------------------------------------------------------------------
ul#navbar {
position:absolute; /* ▼ここでコンテナの枠起点左からを起点に指定 ▼ */
top: 100px;
left: 300px;
padding: 0px;
width: 476px;
height:50px;
}
ul#navbar li{
float:left;
width:119px;
}
ul#navbar a{
display:block;
width:119px;
height:50px;
background-image:url(bar_all.gif);
background-repeat: no-repeat;
}
ul#navbar li a span{
display: none;
}
/* デフォルト
-------------------------------------------*/
a.map{
background-position: 0px 0px;/
}
a.res{
background-position: -119px 0px;
}
a.manu{
background-position: -238px 0px;
}
a.about{
background-position: -357px 0px;
}
/* オンマウス
------------------------------------------ */
a:hover.map{
background-position: 0px -50PX;
}
a:hover.res{
background-position: -119px -50px ;
}
a:hover.manu{
background-position: -238px -50px;
}
a:hover.about{
background-position: -357px -50px;
}
/* アクティブ
-------------------------------------------*/
a:active.map{
background-position: 0px -100px;
}
a:active.res{
background-position: -119px -100px;
}
a:active.manu{
background-position: -238px -100px;
}
a:active.about{
background-position: -357px -100px;
}
No.2ベストアンサー
- 回答日時:
>mapとstayの間の「.」はいるんでしょうか。
html側では複数のクラスを指定する際、半角スペースで区切ります。
cssの書き方はまた意味合いが違ってきています。
.mapはmapというクラス名が指定された要素をさします。
なので
a.map
とすると、a要素でmapというクラス名が指定された要素という意味になります。
その要領でmapとstay両方を指定したものを選びたい時は
a.map.stay
とします。こうするとa要素でmapとstayのクラス名が指定された要素という意味になります。
実質的にはa.stay.mapでも良いのですが、管理の面からa.map.stayと指定したサンプルを推奨しました。
ちなみにa.map stayとすると、a要素でmapというクラス名が指定された要素の子要素のstay要素という意味になります。
実際には存在しませんが、あえてHTMLを書いてみると
<a href="#" class="map"><stay>サンプル</stay></a>
こういう感じになります。
この回答への補足
再度の回答ありがとうございます!
すばらしい・・詳しい説明で、よく分かりました!
おかげさまで、まだすべて試してないのですが
なんとか思ったように出来そう、と思ったのですが・・・・
opera、firefoxだと大丈夫なのですが
IE(6.0)で見ると、ああ、a.map.stayの部分はa.about.stayの表示になっているのです!!(号泣)
調べたらIEに複数class指定するとバグが、と言う情報もありましたが、そんな難しいことじゃあないような気もしますので
また引き続き調査してみます。
まだ完成では無いのですが、せっかく2回も投稿してくださったので、取り急ぎ補足いたしました!
ありがとうございました。
No.1
- 回答日時:
:activeで指定するのはクリックした時のスタイルだけです。
私なら適当なclassを追加して現在地用のスタイルをあてます。
軽く読んだ程度なので間違っているかもしれませんが
a:active.map{
background-position: 0px -100px;
}
というのがページの現在位置を表すためのスタイルなら
a.map.stay {
background-position: 0px -100px;
}
a.res.stay {
background-position: -119px -100px;
}
a.manu.stay {
background-position: -238px -100px;
}
a.about.stay {
background-position: -357px -100px;
}
のような感じにしてhtmlの方はこのスタイルを適用したいボタンに、追加でclassを指定するだけです。
<a href="#"class="map stay"><span>地図</span></a>
画像を1枚でやろうとするとこういう感じになるとは思いますが、ホバー時のちらつきが無くなるので良い試みだと思いますよ。
この回答への補足
早速の回答ありがとうございます!!
回答遅くなりすいませんでした。
いただいたこちらの
<a href="#"class="map stay"><span>地図</span></a>は
htmlの中での該当ページの、ところのみに記述しますよね?
そしてcssなんですが、ここの
a.map.stay {
background-position: 0px -100px;
}
mapとstayの間の「.」はいるんでしょうか。
ちょっと試してみたのですがわたしのhtml・cssへの理解が浅く
いつも難しく考えすぎ、いろいろためしてしまい
苦戦しております・・・明日また試してみます!
a:activeはやはりクリックした時のスタイルのみというのは分かったので
よかったです。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSS、width100%でもできる余白
-
CSSでボックスのheightが0になる
-
定義リストに下線をつけたいと...
-
【CSS】ヘッダーの高さが不明の...
-
CSSでborderの長さを指定、また...
-
余分な縦スクロールバーが出て...
-
widthやheightの数値に単位(px...
-
【HTML】【CSS】【Swiper】 元...
-
li 黒丸含んで移動する方法
-
webサイト作りが上手くいきません
-
HTMLで文字が重なって表示されます
-
横並びしたいのですが
-
初心者html・CSS ウィンドウを...
-
cssで「下よせ」ってどうやって...
-
W3Cのソースコードの検証サービ...
-
CSS3で角丸写真にシャドーを付...
-
【スタイルシート?】同行内で...
-
ネガティブマージン
-
ライトボックスでスクロールバー
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報