- 締切済み
(CSS)table-cellをＩＥで表示させる
いつもお世話になっております。 table-cellを使って、インターネットエクスプローラーでも 問題なく表示される方法を探しております。 ご存知の方はどうぞお知恵をお借りしたいです。 macのdreamweaverでサイトを制作しています。 添付イメージのように、 画像が等間隔に並んでいるサイトデザインの為、 最初は普通のテーブルタグで作っていたのですが、 アップをしてみると画像と画像の間の幅が均等にならなかったので、 table-cellを使用して作ってみました。 そうすると理想とする形になったのですが、 ＩＥ8で見ると崩れ正しく表示されませんでした。 そもそもこのタグを使うとＩＥでは表示されないのでしょうか？ もしそうであれば、添付画像のように、 画像と画像の隙間を等間隔にしたいだけなので、 その他の方法をご存知の方は教えて頂けたらとても助かります。 タグは以下のように書いています。 『ＣＳＳ』 nav.global-navi ul { border: none; text-align: left; width: 880px; margin-left: 180px; display: table; table-layout: fixed; } nav.global-navi ul li { display: table-cell; } nav.global-navi ul li:last-child { border-right: none; } nav.global-navi ul li a { font-weight: bold; text-decoration: none; margin: 3px 4px; display: block; } nav.global-navi ul li a:hover { background:#FFFFFF; } 『html』 <nav class="global-navi"> <ul> <li>画像1</li> <li>画像2</li> <li>画像3</li> <li>画像4</li> </ul> </nav> 思うように表示されずに大変困っています。 お力をお借りしたいのでどうぞ宜しくお願い致します。
- hen_zel
- お礼率96% (31/32)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞目指しているのはimg同士の間隔が縦横共に等間隔で ＞どのデバイスでも見ることが出来るサイトです。 それは厄介。 幅を固定して良く、かつ順番が変わってよいなら、float:left;+float:right ※幅が二種類と固定されるなど条件がある。また大きな画像が登場する順番によると、画像の抜ける場所がでてくる。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
添付画像と言われるものがないので、分かりませんが ＞画像が等間隔に並んでいる の意味が不明です。隙間が等間隔ならmargin:0 20px;でよいはずですし、間隔が同じならwidth:でよいはずです。 ざっと思いつく方法は・・ ・画像間隔が等間隔 ・リンクが等間隔(table風) ・画像の横サイズを固定して等間隔 ・画像の縦サイズ固定で画像間等間隔 あたりですね。いずれも簡単です。 IE8はHTML5の<nav>は理解できないので、javascriptを使用しますが、古いIEも考慮するならjavascriptが無効でも利用できるようHTML4.01strict!!で製作しましょう。strictなら、そのまま将来HTML5に移行出来る。<div class="header"></div>→<header></header>など、section,footer,navも同様。 ★リキッドですら、スマホも幅広ディスプレイもOK!、(ウィンドウ幅を変えてみること) ★印刷用はリストですが、URLが印刷される。 ★<ul></ul>内はすべて同じなので省略 ★画像は適当なサイズを用意すること200×150,150×200,200×200など ★タブは＿に置換してあるので戻す。 ★HTML4.01strict+CSS2.1 ウェブ標準 ★IE7以降対応 <!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" media="screen"> <!-- a img{border:none;} div.nav{width:90%;min-width:700px;margin:10px auto;text-align:center;} div.nav ul:after{content:"";display:block;clear:left;} div.nav ul{list-style:none;margin:0;padding:0;background-color:gray;} div.nav ul li{display:block;float:left;height:220px;position:relative;margin:5px;} div.nav ul li img{margin:10px;} div.nav ul li a{display:block;width:100%;height:100%;background-color:silver;} div.nav ul li a:hover{background-color:white;} div.section.type1 div.nav ul li{width:220px;} div.section.type2 div.nav ul li img{display:block;width:160px;height:auto;margin:auto;} div.section.type3 div.nav ul li a{padding:2px;} div.section.type3 div.nav ul li img{display:block;width:auto;height:150px;margin:auto;} --> ＿</style> ＿<style type="text/css" media="print"> <!-- a img{border:none;} div.nav ul{list-style-type:none;} div.nav a{text-decoration:none;} a:after{ content:" "attr(title)" URL:http://hoge.com"attr(href); } div.section{page-break-inside:avoid;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1 id="title">Title</h1> ＿</div> ＿<div class="section"> ＿＿<div class="nav"> ＿＿＿<h3>画像間隔が等間隔</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="/" title="トップ"><img src="./images/01.jpg" width="200" height="150" alt=""></a></li> ＿＿＿＿<li><a href="/Products" title="製品"><img src="./images/02.jpg" width="150" height="200" alt=""></a></li> ＿＿＿＿<li><a href="/news" title="ニュース"><img src="./images/03.jpg" width="200" height="200" alt=""></a></li> ＿＿＿＿<li><a href="/manual" title="マニュアル"><img src="./images/04.jpg" width="150" height="200" alt=""></a></li> ＿＿＿＿<li><a href="/downLoad" title="ダウンロード"><img src="./images/05.jpg" width="200" height="150" alt=""></a></li> ＿＿＿＿<li><a href="/help" title="ヘルプ"><img src="./images/06.jpg" width="200" height="150" alt=""></a></li> ＿＿＿＿<li><a href="/contact" title="問合せ"><img src="./images/07.jpg" width="200" height="150" alt=""></a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section type1"> ＿＿<div class="nav"> ＿＿＿<h3>リンクが等間隔(table風)</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="/" title="トップ"><img src="./images/01.jpg" width="200" height="150" alt=""></a></li> ＿＿＿＿<!-- 省略 --> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section type2"> ＿＿<div class="nav"> ＿＿＿<h3>画像の横サイズを固定して等間隔</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="/" title="トップ"><img src="./images/01.jpg" width="200" height="150" alt=""></a></li> ＿＿＿＿<!-- 省略 --> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section type3"> ＿＿<div class="nav"> ＿＿＿<h3>画像の縦サイズ固定で画像間等間隔</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="/" title="トップ"><img src="./images/01.jpg" width="200" height="150" alt=""></a></li> ＿＿＿＿<!-- 省略 --> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h3>A nice footer</h3> ＿</div> </body> </html>
お礼
お早いご回答をありがとうございます。 わざわざタグまでご記入頂いて感激しております。 また、いずれも簡単、というお言葉とても勇気が沸きました。 画像の添付が出来ていなかったようで 大変失礼致しました。 まさしく仰る通り、 ・画像間隔が等間隔 ・リンクが等間隔(table風) を求めております。 ややこしいことになってしまったのは、 添付ファイル画像二行目の、サイズの違うimgが上手く タグで表現出来なかった為でした。 目指しているのはimg同士の間隔が縦横共に等間隔で どのデバイスでも見ることが出来るサイトです。 さっそく今からお教え頂いたタグで作業に取り掛かりたいと思います。 大変恐縮ですが、もし上記のように、 同サイズの画像の中に別のサイズのものが含まれているが等間隔に調整出来る 方法をご存知でしたら教えて頂けたら嬉しいです。 どうぞ宜しくお願い致します。