No.3ベストアンサー
- 回答日時:
>なぜかIEだけではできませんでした。
原因は、
ul.nav li a{display:block;width100%height:100%;}
は間違い
ul.nav li a{display:block;width:100%height:100%;}
でしたね。
IEでも問題ないはず。.という接続詞の意味わかってますか?クラスセレクタですから、HTMLで
<div class="side_navi">
<ul>
<li><a href="#"></a></li>
書かれていたら
このリスト内のa要素を指定するには
div.side_navi ul li a{}
です。こうすることでside_naviが他の要素のclass名であっても混乱しない。
接続詞は他にも
半角スペース[ ]
>
+
#
などがある。単独で指定することは少ない(#は単独で使用しても問題ないが、詳細度をあげてプロパティを書き換えるときは、要素やクラス名を書く。
ご回答ありがとうございました!
再度試してみたら無事に実現することができました。
少しの言語の間違いで動かなくなってしまうため、とても苦労します;
No.2
- 回答日時:
CSSでアンカータグにdisplay:blockと適宜width, heightを指定すれば、領域のある空のアンカーを作れるかと思います。
#といいつつ、試してないので確信は持てないのですが…できるはずです。
透明画像などは要りません。配置はpositionなどを使って指定すればOKです。
他の方法としては、JavaScriptを利用してそれっぽいものを作ることもできます。
#ただし、ステータスバーにアドレスが出る所謂「リンク」はアンカータグでしか実現できません。
htmlを以下のようにして
<div class="side_navi">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
cssを以下のようにしました。
.a ul {
display:block;
position:absolute;
width: 190px;
}
.a li {
display:block;
list-style: none;
border-bottom: 1px solid #FFF;
width:190px;
height:39px;
float:left;
}
.a li a {
display:block;
color: #FFF;
text-decoration:none;
font-weight:bold;
height:39px;
width:190px;
}
IE以外のブラウザでは見れましたが、なぜかIEだけではリンクが有効になりませんでした。
どこに不具合があるのでしょうか?
No.1
- 回答日時:
a要素をboxにしてしまえばよろしいです。
<ul class="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
なら、
ul.nav{display:block;}
ul.nav li{display:block;width:200px;height:80px;float:left;}
ul.nav li a{display:block;width100%height:100%;}
とか・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Photoshop(フォトショップ) 【至急】 ウェブサイトやアプリとかでよく見かける、添付画像のように背景にあるものをぼかしつつ透過する 2 2023/07/17 10:57
- その他(ソフトウェア) ペイントで切り抜いた画像の背景を透明に 2 2022/09/15 10:20
- Illustrator(イラストレーター) Illustratorから印刷すると画像が白くなっててきれいに印刷出来ず、透明背景効果にしてみて確認 1 2022/06/14 17:26
- Photoshop(フォトショップ) フォトショップで切り抜いた画像を透明にするには 3 2022/09/15 11:50
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- Photoshop(フォトショップ) photoshopについて このサイトにあるような方法を背景透過している画像にやると、雷を纏ったよう 1 2022/06/17 18:51
- Illustrator(イラストレーター) Illustratorで白い部分のみを透過させたいです。 2 2022/10/10 22:27
- 教えて!goo 「教えて!goo」や「Yahoo知恵袋」に投稿する際の画像についてお聞きします。 2 2023/05/23 12:53
- その他(クラウドサービス・オンラインストレージ) Canva(キャンバ サムネイル作るサイト)での加工について(人物だけ、光沢感あるグラデーション) 1 2023/04/01 22:09
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
リストの数字のフォントサイズ...
-
ボックスの幅を内容に合わせたい
-
excel vba で ulタグのなかのse...
-
正規表記について「除く」の表...
-
html <ul></ul>の並びで一行空...
-
リストの並べ替え
-
html/cssの、navを2段にする...
-
CSS質問:大手サイトを見ると何...
-
html <li>の中の文字一部に色を...
-
divタグ内のコンテンツが重なっ...
-
css li に入れ子で適用する範囲
-
htmlで鍵盤を描きたい
-
ulとliで囲った文字の一部を変...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
Tableの1セル内に画像・テキス...
-
Dreamweaverで、ul要素の下に写...
-
リストを2つに分割して、それぞ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
ポップアップメニューを表のよ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
divタグ内のコンテンツが重なっ...
-
リストを2つに分割して、それぞ...
-
複数行にまたがる括弧を表示し...
おすすめ情報