分からない部分が出た際にいつもお世話になっております。
今回もどなたかご回答頂けますと幸いです。
グローバルナビゲーションを中央揃えにして表示させようとしているのですが、
IE6と7で確認したときになぜか下部分が途切れてしまいます(1pxくらい?)
高さは指定している筈なのですが…
【html】
<div id="global-nav">
<ul>
<li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li>
<li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="191" height="43" /></a></li>
<li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li>
<li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li>
<li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="193" height="43" /></a></li>
</ul>
</div>
【css】
div#global-nav {
position:relative;
height: 43px;
background:url(../common/navi_bg.jpg) repeat-x center bottom;
overflow:hidden;
}
div#global-nav ul {
position:relative;
left:50%;
float:left;
list-style-type:none;
}
div#global-nav li {
position:relative;
left:-50%;
float:left;
}
宜しくお願いします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
意味不明ですね、No1の内容(^^)自分で読んで笑ってしまった。
そのうえで、スタイルシートをデザインしますが、あなたのサンプルでは、ディスプレイ幅が狭いと5つのうち4つしか表示されませんし、画像を読み込めないユーザーエージェントや読み上げソフト、点字端末、携帯電話、ディスプレイの狭い端末、もちろん検索エンジンも内容を理解できます。
★そのうえで、スタイルシートでデザインします。
★あなたリサンプルでは、ディスプレイ幅が狭いと5つのうち4つしか表示されません。
★デザインを考えずに意味(文書構造)にしたがってHTMLを書けば、画像を読み込めないユーザーエージェントや読み上げソフト、点字端末、携帯電話、ディスプレイの狭い端末、もちろん検索エンジンも内容を理解できます。
基本はデザインを考えてHTMLは書かない。
No.2
- 回答日時:
スタイルシートは下のようになるかな?
IE5以降、Opera,Safari,Firefox,googleChromeすべて同じように見えるはず、もちろんi-phone,i-padも・・。携帯電話・検索エンジンだとシンプルなHTMLとして認識される。
変な小細工もしていませんから、CSSも空(そら)出かけるレベルじゃないかと。
<style type="text/css" media="screen">
<!--
div#global-nav{
position:relative;
height: 43px;line-height:43px;
background:url(../common/navi_bg.jpg) repeat-x center bottom;
width:100%;
}
div#global-nav ul,
div#global-nav ul li,
div#global-nav ul li a{
display:block;
list-style:none;
margin:0;paddin:0;
}
div#global-nav ul{
width:90%;
padding-left:5%;
}
div#global-nav ul li{
width:18%;
float:left;
background-image:url(images/navi/test.png);
margin-left:1%;
}
div#global-nav ul li a{
width:100%;
height:100%;
text-decoration:none;
text-align:center;
overflow:hidden;
}
/* 文字を消す場合はコメントマークを取り除く */
/* div#global-nav ul li a span{
visibility:hidden;
}
*/
-->
</style>
No.1
- 回答日時:
そもそもどのように表示させたいかが不明です。
ブラウザによってまるで違う表示になる。適当な画像を用意してテストすると・・・
HTMLは、下記のようなWeb標準な物にします。文字を画像に置き換える方法は本来の方法ではありません。
テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
_<div id="global-nav">
__<ul>
___<li><a href="test1.html"><span>テスト1</span></a></li>
___<li><a href="test2.html"><span>テスト2</span></a></li>
___<li><a href="test3.html"><span>テスト3</span></a></li>
___<li><a href="test4.html"><span>テスト4</span></a></li>
___<li><a href="test5.html"><span>テスト5</span></a></li>
__</ul>
_</div>
そのうえで、スタイルシートをデザインしますが、あなたのサンプルでは、ディスプレイ幅が狭いと5つのうち4つしか表示されませんし、画像を読み込めないユーザーエージェントや読み上げソフト、点字端末、携帯電話、ディスプレイの狭い端末、もちろん検索エンジンも内容を理解できます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数行にまたがる括弧を表示し...
-
divタグ内のコンテンツが重なっ...
-
ol要素の番号とリスト項目の離...
-
HTMLで組織図を作成する方法
-
リストマーカーをボックス内に...
-
HTMLのdlとul どちらが正しいと...
-
<table>の高さ固定。情報増加時...
-
navの横並びにsnsアイコンを付...
-
ulタグやliタグの中でbrタグ...
-
アコーディオンメニューがかく...
-
「olタグ」内に「hタグ要素」...
-
左メニューをCSSで固定したい
-
<ul><li></li></ul>にするメリ...
-
HTML5のfooterに見出しを付けて...
-
CSS質問:大手サイトを見ると何...
-
レスポンシブWebデザインでリン...
-
横並びのリストで左端がはみ出る
-
li 長さ指定
-
ページを開いているときのリン...
-
3番目のBoxだけずれる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
リンク文字同士の間隔を開ける...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報