通常状態で画像の上半分を、マウスを画像上に持ってきたときにCSSで下半分を表示させています。
【CSS】
a:hover{
background-position: 0px 20px;
}
a{
background-position: 0px 0px;
height:20px;
width:100px;
display:block;
}
a.header_top{ background-image:url(./image/top.gif);}
a.header_link{ background-image:url(./image/link.gif);}
【HTML】
<a href="index.html" class="header_top" title="トップページへ"></a>
<a href="link.html" class="header_link" title="リンク"></a>
これだと縦にリンクを並べるのはいいのですが、横一列にしたい場合はどうすればいいでしょうか。
テキストのリンクだとdisplayをinlineにすればよいかと思うのですが、画像の場合、実体がないのでblockにしないときちんと表示されません。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
floatを使用する方法はいかがでしょうか?a要素のスタイルシートを
a{
background-position: 0px 0px;
height:20px;
width:100px;
display:block;
/*** ここを追加 ***/
float : left;
}
にすればOKです。しかし、このままですとその後の要素も横に並んでしまいますので最後のa要素を
<a href="link.html" class="header_link" title="リンク" style="clear : left;"></a>
のように「style="clear : left;」を追加する必要があります。
御回答ありがとうございます。
そっくりそのままというわけにはいきませんでしたが、無事に思ったとおりの表示ができました。
本当に助かりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
画面の分割
-
widthやheightの数値に単位(px...
-
W3Cのソースコードの検証サービ...
-
css初心者 フレックスボックス...
-
CSS:animation開始位置の設定
-
横並びリスト ブラウザ縮小 カ...
-
div内に外部のurlを表示させたい
-
表示倍率を変えるとレイアウト...
-
【HTML】【CSS】【Swiper】 元...
-
li 黒丸含んで移動する方法
-
メイン画像とグローバルメニュ...
-
HTMLでCSSでボーダーが表示され...
-
CSSがなぜかfont-sizeだけ効か...
-
大きな画像の上にメニューを画...
-
どう変更してもIE6だけCS...
-
CSSでhover時に画像変更したい
-
インラインフレーム内の表示位...
-
CSSでborderの長さを指定、また...
-
safariだけ、cssが効きません!
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS:animation開始位置の設定
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
CSSで背景画像を一番下にもって...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報