【最大10000ポイント】当たる!!質問投稿キャンペーン!

メニュのナビを下記のHTML及びCSSで表現しています
私のパソコンでは問題なく表示しました
OS:WinXP
Chrome/firefox/IE8

先日友達のパソコンで見るとこのメニューナビが右に長いのです
「お問合わせ」の横にもメニューナビの背景色が続いています
友人のパソコンは
OS:WinVista
IE7

他の条件では検証してないのでわかりませんが…
OS:WinVista が問題なのか?
IE7 が問題なのか?

例えば問題であれば解決策はあるのでしょうか?

アドバイスいただけないでしょうか?

----------------------------------------------------------

<div id="menu">

<ul class="menu_navi">

<li><a href="./index.php">ホーム</a></li>

<li><a href="./tv.php">テレビ番組</a></li>

<li><a href="./info.php">いろいろな情報</a></li>

<li><a href="./mail.php">お問合わせ</a></li>

</ul>

</div>

----------------------------------------------------------

#menu {
width: 100%;
border-left: 1px solid white;
overflow: hidden;
}

ul.menu_navi{
height: 50px;
margin: 0px;
position: relative;
float: left;
left: 50%;
color: white;
border-bottom: 5px solid black;
background-color: red;
}

ul.menu_navi li{
float: left;
position: relative;
float: left;
right: 50%;
border-right: 1px solid white;
display: block;
}

ul.menu_navi li a{
height: 40px;
width: 239px;
padding: 10px 0px 0px;
color: white;
border-bottom: 5px solid black;
font-size: 18px;
font-weight: bold;
text-decoration: none;
display: block;
text-align: center;
background-color: red;
vertical-align: middle;
line-height: 140%;
}

ul.menu_navi li a.nowthis{
border-bottom: 5px solid white!important;
}

ul.menu_navi li a:hover{
padding: 10px 0px 0px;
border-bottom: 5px solid red;
color: red;
background-color: white;
}

このQ&Aに関連する最新のQ&A

A 回答 (5件)

幅固定中央合わせなら、下記のスタイルでもいけますよ。


liタグは改行などでバグが出やすいので、
aタグをブロックにすることで回避します。
また、positionは不安定なのでIE6、7などが対象に残っている間は、
使わなくて済むなら使わないほうが無難ですね。

<style type="text/css">
#menu {
width:100%;
margin: 0 auto;
border-left: 1px solid white;
overflow: hidden;
}

ul.menu_navi{
width: 960px;
height: 50px;
margin: 0 auto;
color: white;
}

ul.menu_navi li{
float: left;
display: inline;
}

ul.menu_navi li a{
display: block;
height: 35px;
width: 239px;
padding: 10px 0px 0px;
color: white;
border-right: 1px solid white;
border-bottom: 5px solid black;
font-size: 18px;
font-weight: bold;
text-decoration: none;
text-align: center;
background-color: red;
vertical-align: middle;
line-height: 140%;
}

ul.menu_navi li a.nowthis{
border-bottom: 5px solid white !important;
}

ul.menu_navi li a:hover{
color: red;
background-color: white;
border-bottom: 5px solid red;
;
}
</style>
    • good
    • 0
この回答へのお礼

ありがとうございました
うまく表示できました
解決です!!

お礼日時:2011/07/03 21:11

書き漏らしたので・・来客だったので急いで送信してしまった。


可能な限りハックは使わない。プレゼンテーションのためにHTMLを弄ることはしない!!何のためのスタイルシート??
 HTMLを書き直さなければならないとしたらHTMLが間違っている。今回のものはそれはない(正統なHTML)です。

CSSを読まれるとわかりますが、小細工も裏技も一切ありません。単に
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification ( http://www.w3.org/TR/CSS2/ )
REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
をそのまま素直に適用しているだけです。それ以外の資料は見てません。

メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/ より引用)
    • good
    • 0
この回答へのお礼

ありがとうございました
色々な方の意見を取り入れながらCSSを書いたのでわかりづらくなってしまいました
もう少し整理してシンプルを心がけます

お礼日時:2011/07/01 14:24

次に文字が続くことを考えると下記セレクタの宣言を変更したほうが良い


div.nav ul{
list-style:none;
width:95%;
margin:0 auto;
height:50px;/* 変更 */
line-height:50px;
text-align:center;
font-weight:bold;
}
div.nav ul li{
height:100%;/* 変更 */
width:24%;
float:left;
}
    • good
    • 0

長々したCSSはくたびれます。

簡潔に書きましょう。
幅広のディプレイをお使いですか?、私の画面からははみ出る。可能なものはリキッドスタイルで
一画面で何をしているかわかるようにまとめないとメンテナンス不能になり、色々な調整ができません。
★継承されるものは親要素に
★継承されないが共通するものはセレクタをグループ化する。

※背景が見えたらまずいものには背景色を付けなきゃ良いです。

▲<div class="nav">名は、構造を示すため(SEO)。HTML5では、そのまま<nav id="menue">にできる。
▲ウィンドウ幅に依存しません、i-phoneでもOKです。
とにかくHTMLは文書構造に従ってシンプルに、そうしておくとCSSもシンプルでメンテナンスしやすくなる。このままプルダウンメニューも追加できます。

下はサンプル全文です。HTML4.01strictです。CSSを使うときはstrictのほうが良い。

Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
でテスト済み
IE5以降でOK,Opera,firefox,safariOK
タブは、__に置換してあるので戻すこと。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
__<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
__<title>サンプル</title>
__<meta name="author" content="ORUKA1951">
__<meta http-equiv="Content-Style-Type" content="text/css">
__<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
__<link rel="START" href="../index.html">
__<style type="text/css">
<!--
div.nav ul,div.nav ul li,div.nav ul li a{
/* 継承しないプロパティは一括指定 */
display:block;
padding:0;margin:0;
}
div.nav ul{
list-style:none;
width:95%;
margin:0 auto;
/* 継承するものは親要素に */
line-height:50px;
text-align:center;
font-weight:bold;
}
div.nav ul li{
height:50px;width:24%;
float:left;
}
div.nav ul li a{
width:100%;height:100%;
color:white;
border-style:solid;
border-width:1px 1px 5px 1px;
border-color: white;
background-color:red;
text-decoration:none;
border-bottom-color:black;
}
div.nav ul li a:visited{
color:rgb(180,0,0);
}
div.nav ul li a:hover{
color:red;
border-bottom-color:red;
background-color:white;
}
div.nav ul li a:active{
background-color:yellow;
}
-->
__</style>
</head>
<body>
__<h1>サンプル</h1>
__<div class="nav" id="menu">
____<ul>
______<li><a href="./index.php">ホーム</a></li>
______<li><a href="./tv.php">テレビ番組</a></li>
______<li><a href="./info.php">いろいろな情報</a></li>
______<li><a href="./mail.php">お問合わせ</a></li>
____</ul>
__</div>
</body>
</html>
    • good
    • 0

IE7ではdisplay: block;で、あり得ないmargin-bottomが出現するので、


HTML側で、全liを一行設定にする。
例:
<li><a href="./index.php">ホーム</a></li><li><a href="./tv.php">テレビ番組</a></li><li><a href="./info.php">いろいろな情報</a></li><li><a href="./mail.php">お問合わせ</a></li>

一行の意味がわかりますか?


または、IE7ハック
*:first-child+html #side li{ float:left;}
*:first-child+html #side li{ zoom:1;}

その他の対応もありますが、
ハックを使うよりも、HTML側で、全liを一行にする方が良いかも

画像の場合は、vertical-align
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング