いつもお世話になっております。
table-cellを使って、インターネットエクスプローラーでも
問題なく表示される方法を探しております。
ご存知の方はどうぞお知恵をお借りしたいです。
macのdreamweaverでサイトを制作しています。
添付イメージのように、
画像が等間隔に並んでいるサイトデザインの為、
最初は普通のテーブルタグで作っていたのですが、
アップをしてみると画像と画像の間の幅が均等にならなかったので、
table-cellを使用して作ってみました。
そうすると理想とする形になったのですが、
IE8で見ると崩れ正しく表示されませんでした。
そもそもこのタグを使うとIEでは表示されないのでしょうか?
もしそうであれば、添付画像のように、
画像と画像の隙間を等間隔にしたいだけなので、
その他の方法をご存知の方は教えて頂けたらとても助かります。
タグは以下のように書いています。
『CSS』
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>
思うように表示されずに大変困っています。
お力をお借りしたいのでどうぞ宜しくお願い致します。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
>目指しているのはimg同士の間隔が縦横共に等間隔で
>どのデバイスでも見ることが出来るサイトです。
それは厄介。
幅を固定して良く、かつ順番が変わってよいなら、float:left;+float:right
※幅が二種類と固定されるなど条件がある。また大きな画像が登場する順番によると、画像の抜ける場所がでてくる。
No.1
- 回答日時:
添付画像と言われるものがないので、分かりませんが
>画像が等間隔に並んでいる
の意味が不明です。隙間が等間隔なら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同士の間隔が縦横共に等間隔で
どのデバイスでも見ることが出来るサイトです。
さっそく今からお教え頂いたタグで作業に取り掛かりたいと思います。
大変恐縮ですが、もし上記のように、
同サイズの画像の中に別のサイズのものが含まれているが等間隔に調整出来る
方法をご存知でしたら教えて頂けたら嬉しいです。
どうぞ宜しくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
初心者 ロールオーバー及びイ...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
smallにtext-allignが効かない
-
改行ほどは行かないけど、若干...
-
html の divとtable の役割
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
widthやheightの数値に単位(px...
-
<h1>、<h2>と<p><div>の行間を...
-
外部css定義したclassをht...
-
リンクを知らせる手のマークが...
-
機種依存文字、m2(平方メート...
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
CSS、width100%でもできる余白
-
cnt <= (others => '0'); の意...
-
line-height指定で発生する余白...
-
ヘッダーとフッターだけ背景を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
一度で20MBくらい送信できて共...
-
HP 画像の一部にリンクでその...
-
jQuery カーソルを乗せるとタブ...
-
初心者 ロールオーバー及びイ...
-
HPビルダー16 リストの増やし方
-
ブラウザ別のマージン解消は?
-
サクラエディタの使い方について
-
HTMLやcssに詳しい方教えてくだ...
-
(CSS)table-cellをIEで表示さ...
-
ウェブサイトの作り方
-
多数の画像で商品説明する方法
-
webのナビメニューで、どうして...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
【ヒトの神秘】美男美女から何...
-
<h1>、<h2>と<p><div>の行間を...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
おすすめ情報