winIE6では正常に表示されるのですが、
safariだとまったくcssが無視され、横並びにもならない始末です(^_^;)
どなたかご教授お願いいたします。
■html
<div id="header">
<ul id="headerMenu">
<li id="home"><a href="index.html">ホーム</a></li>
<li id="sitemap"><a href="sitemap.html">サイトマップ</a></li>
<li id="recruit"><a href="recruit.html">リクルート</a></li>
<li id="contact"><a href="contact.html">お問合せ</a></li>
</ul>
</div>
■css
#header
{
width:100%;
height:107px;
margin:0px;
padding:0px;
position: relative;
font-size:12px;
background:url("img/top.gif") no-repeat;
}
#headerMenu{
list-style-type:none;
padding:0px;
margin:6px 0px 0px 532px;
}
#headerMenu li {
display:inline;
padding:0;
margin:0px;
float:left;
}
#headerMenu a {
display:block;
text-decoration:none;
text-indent:-5000px;
height:25px;
}
#home {
display:block;
background-image: url("img/topmenu_01.gif");
background-repeat: no-repeat;
width:63px;
background-position:0px 0px;
}
#home a:hover {
background-image: url("img/topmenu_01.gif");
background-repeat: no-repeat;
background-position:0px -25px;
}
#sitemap {
background-image: url("img/topmenu_02.gif");
background-repeat: no-repeat;
width:90px;
background-position:0px 0px;
}
#sitemap a:hover {
background-image: url("img/topmenu_02.gif");
background-repeat: no-repeat;
background-position:0px -25px;
}
#recruit {
background-image: url("img/topmenu_04.gif");
background-repeat: no-repeat;
width:82px;
background-position:0px 0px;
}
#recruit a:hover {
background-image: url("img/topmenu_04.gif");
background-repeat: no-repeat;
background-position:0px -25px;
}
#contact {
background-image: url("img/topmenu_05.gif");
background-repeat: no-repeat;
width:82px;
background-position:0px 0px;
}
#contact a:hover {
background-image: url("img/topmenu_05.gif");
background-repeat: no-repeat;
background-position:0px -25px;
}
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
これで行けますかね?
■html
<div id="header">
<ul>
<li id="home"><a href="index.html">ホーム</a></li>
<li id="sitemap"><a href="sitemap.html">サイトマップ</a></li>
<li id="recruit"><a href="recruit.html">リクルート</a></li>
<li id="contact"><a href="contact.html">お問合せ</a></li>
</ul>
</div>
■css
#header {
width:100%;
height:107px;
margin:6px 0px 0px 532px;
padding:0px;
position: relative;
font-size:12px;
background-image:url("img/top.gif") ;
background-repeat: no-repeat;
}
#header ul {
list-style-type: none;
list-style-position: inside;
padding: 0px;
border: 0px;
}
#header li {
padding:0px;
margin:0px;
float:left;
}
#header a {
background-repeat: no-repeat;
display:block;
text-decoration:none;
text-indent: -5000px;
height:25px;
background-position: center center;
}
#header a:hover {
background-position: center -25px;
}
#home {
background-image: url("img/topmenu_01.gif");
width:63px;
}
#sitemap {
background-image: url("img/topmenu_02.gif");
width:90px;
}
#recruit {
background-image: url("img/topmenu_04.gif");
width:82px;
}
#contact {
background-image: url("img/topmenu_05.gif");
width:82px;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
divの中にspanを右寄せにするに...
-
画像イメージの上下左右、欲し...
-
CSS:animation開始位置の設定
-
余分な縦スクロールバーが出て...
-
日本地図(白地図的)にリンク...
-
CSSで「overflow:scroll」をしてい
-
CSSでiframe要素の編集
-
widthやheightの数値に単位(px...
-
div領域をウインドウサイズに合...
-
ライトボックスでスクロールバー
-
firefoxにてページ内リンク時、...
-
フロートするとIE7だけレイアウ...
-
CSSで微妙にずれる
-
ウインドウを小さくするとbody...
-
イラレで作った画像がぼやけて...
-
IEとFireFoxでの指定位置のズレ...
-
画像と一緒にスライドするリン...
-
スクロールボックスを中央に配...
-
CSS(0の単位)について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
余分な縦スクロールバーが出て...
-
<div>と<div>の間の10px程の...
-
【CSS】ヘッダーの高さが不明の...
-
CSSでボックスのheightが0になる
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
Media Queries 4 で 非推奨とな...
-
【HTML&CSS】フッター下部の余...
-
初心者html・CSS ウィンドウを...
おすすめ情報