• 締切済み

画像の様なテーブルレイアウトにするには？

画像の様なテーブルレイアウトにするにはどうすればいいのでしょうか IE9なら正しく表示されます。 何処を修正したかも教えて下さい ＊＊＊＊＊＊＊＊＊＊＊＊＊＊index.html＊＊＊＊＊＊＊＊＊＊＊ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ（商品リスト）--> <div id="main"> <ul id="products-list"> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> </ul> <!-- /#main--></div> <!--メインコンテンツ（商品リスト）--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> ＊＊＊＊＊＊＊＊＊＊＊＊＊base.css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ width:840px; height:380px; margin:10px; padding-left:0; background:#690; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ list-style-type:none; float:left; width:130px; margin:10px 0px 0px 10px; padding:0px; height:170px; background:#F3F59C } .product-img{ margin:0px; padding:0px; width:50px; height:50px; text-align:center; border:none; } #products-list{ margin:0px; padding:0px; }

画像を拡大する
  • CSS
  • 回答数4
  • ありがとう数1

みんなの回答

  • ok-rjak
  • ベストアンサー率52% (70/134)
回答No.5

No.1です。 いまいち希望が汲めないので、これで合っているかどうかもわかりませんが、HTML、CSS両方に手を加えています。 見やすいように、変更点のみ記載します。 <!-- HTMLのLIST内のみ変更 --> <li class="products"> 　　<p class="alignCenter"><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></p> 　　<h3>商品名</h3> 　　<p>価格：&yen;200,000</p> 　　<p><a href="#">商品詳細ページ</a></p> 　　<p class="alignCenter"><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></p> </li> /* CSSの変更点 */ .products{ 　　list-style-type: none; 　　float: left; 　　width: 120px; 　　padding: 5px; 　　height: 170px; 　　background: #F3F59C; 　　margin-top: 10px; 　　margin-right: 0px; 　　margin-bottom: 0px; 　　margin-left: 10px; } .products p { 　　padding: 0px; 　　margin-top: 0px; 　　margin-right: 0px; 　　margin-bottom: 5px; 　　margin-left: 0px; } .products h3 { 　　padding: 0px; 　　font-size: 1em; 　　margin-top: 0px; 　　margin-right: 0px; 　　margin-bottom: 5px; 　　margin-left: 0px; } .alignCenter { 　　text-align: center; }

  • katokundes
  • ベストアンサー率22% (492/2217)
回答No.3

プログラムを作るときに後で修正するときにわからなくなるから、見やすく誰にでもわかるようにといわれました。 回答者さんの例のように 「★タブは＿に置換してあるので戻すこと」 することで見やすくなりますね、回答するほうも質問のｈｔｍｌが見やすくなりますからＴｅｒａｐａｄなどの置換できるものを使って質問されると見やすいです。 私はネット上のものは看板と同じで日頃手入れが出来、より新しいものでなくてはいけないと思っているので、誰でも更新できるもの、単純なものと思い見栄え関係なくつくっています。 回答者さんの例も完全に理解していませんし 質問者さんの質問が1品でなくて、多品陳列の場合どのような表示がよいのか、 表示能力の弱い携帯にどこまで対応するかなど、 質問サンプルがネット上だと見やすいかもしれません。 私自身があまり理解していないのですみません。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

前の質問と回答を読まれてないのでしょうね。 　となると説明するのもおっくうになりますが。 　HTMLはもっとシンプルに、文書構造が分かるように書きましょう。いちいちクラス名をつける必要はありません。 <div class="productList"> 　<ul> 　　<li></li> や <ul id="productList"> 　<li></li> とさえなっていれば、class名をliにつける必要はありませんね。 div.productList li{}--[詳細度0012]--で製品リストの項目だと分かりますし、 div.productList li li{}--[0013]--でそのサブ項目だということが分かります。 div.productList li li img{}--[0014]--で、製品リストのサブ項目の画像だと分かります。 　そのうえで、後方互換が必要なとき--例えば兄弟セレクタを理解しないブラウザを対象とするときにliにclass名をつければよいですね。 div.productList li li.basket{}--[0023] 　そのためには、HTMLをシンプルに書いておくべきです。 注) class名は、「文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」ためにあるのですから!! 　それを書いたために煩雑になるような使い方はしない。 　floatで配置されていますが、floatで配置するとclearすると、それより前のfloatもclearされますから、大変ややこしくなります。コマ割り/段組にはfloatを使わないほうが良いです。floatを使用すると、floatさせる要素は、回り込む要素よりも必ず前に書かなければならなくなります。これは、スタイルシートを利用できない--利用しないユーザーや検索エンジンに対して不利になります。デザインするほうも大変になります。 　段組をabsoluteで行い。リスト項目をfloatで並べると楽です。そのfloatされた要素をstatic以外にしておくと、その中で自在にデザインできるはずです。 　先の例で言うと div.section ol.ProductList li ol li{ float:none; width:auto;height:auto; background-color:transparent; border:none; } を書き換えて、いくつか追加するだけです。

  • ok-rjak
  • ベストアンサー率52% (70/134)
回答No.1

いくつか質問をさせて下さい。 これは、HTMLもCSSも手を加えてもいいのでしょうか？ 少なくとも、<dl>内のいくつかのddにクラスを与えないと難しいと思います。 それと、具体的にどこをどうしたいのか？ 商品画像が中央揃えになっていないのと、「価格：¥200,000」が横並びになっていないこと以外は、普通に表示されているようですが・・・

tkwavek
質問者

お礼

ご回答ありがとうございます HTMLとｃｓｓ両方に手を加えて構いません 画像の様なテーブルレイアウトは商品一覧の各商品のデータを表示する部分を 画像のようにしたいんです 商品画像を中央ぞろえにして 商品名や価格、商品詳細へのリンクは左揃えに各１行きれいに収まればと思っています そして最後の段にカートへという画像を中央ぞろえで表示させたいと思っているのですが liタグのmarginが邪魔をしているようでうまくレイアウトをデザインすることができません 他にも何が問題でレイアウトが崩れるかわかっていません 私は仕事でHTMLやCSSをいじったことがなく勉強のために独学を始めた初心者で スキルがなく質問させていただきました。 もし、ご回答できるようでしたらおしえて下さいお願い致します。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ＣＳＳレイアウトの配置ずれについて

    本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。 以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--2ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--3ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }

  • IE7で表示すると画像に隙間があきます。

    WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }

    • ベストアンサー
    • HTML
  • アップロードするとレイアウトが崩れる

    前にも質問させていただいたのですが、まだ解決していません。 FC２でアップロードはできたのですが、HTMLがデスクトップ上ではちゃんとみれたのに、 サーバーにアップしたら表示されません。 FFFTPでアップロードする際になにか作業をしないといけないことがあるのかわからないのですが・・・。HTMLのどこを変えたら他の方からもホームページが見れるのかわからないので、 HTMLの中身を一部追記するので、どの部分を変えたらいいのか教えて下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="root/css/top.css" rel="stylesheet type="text/css"> <title>パーティ専門アイス本舗</title> </head> <body link="#61503e" vlink="#61503e" alink="#aaaa"> <div id="wrapper"> <div id="header"> <p>パーティ専門アイス本舗は、パーティや記念日などに便利な2リットルサイズの業務用アイスを販売しています。数あるフレーバーからお好きなセットをお選びください。</p> <h1><img src="root/images/logo_ice.gif" width="450" height="60" /></h1> <p id="kaimono"><a href="#"><img src="root/images/idx_btn_cart.gif" width="180" height="30" alt="kaimono" /></a></p> <ul id="menu_navi"> <li><img src="root/images/gnavi_btn01.jpg" width="158" height="25" alt="home" /></li> <li><img src="root/images/gnavi_btn02.jpg" width="158" height="25" alt="syouhin" /></li> <li><img src="root/images/gnavi_btn03.jpg" width="159" height="25" alt="kaimono" /></li> <li><img src="root/images/gnavi_btn04.jpg" width="159" height="25" alt="shiharai" /></li> <li><img src="root/images/gnavi_btn05.jpg" width="158" height="25" alt="faq" /></li> <li><img src="root/images/gnavi_btn06.jpg" width="158" height="25" alt="mailmagazine" /></li> </ul> </div><!-- //header --> <div id="page_body"> <div id="side"> <div id="kensaku"> <form method="post" action="http://test.com/text.cgi"> <p>商品名や種類で検索</p> <p><input type="text" name="kensaku" size=20"></p> <p id="kensaku_form"><input type="submit" value="検索"></p> </form> </div> <p id="tokushu"><a href="#"><img src="root/images/Untitled-5_03_03.jpg" width="180" height="120" alt="tokushu" /></a></p> <div id="prodact_side"> <div class="section1"> <p><img src="root/images/idx_menu_ph01.jpg" width="63" height="35" alt="apple" /></p> <p class="right"><a href="#"> ストロベリー</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph02.jpg" width="63" height="35" alt="ugi" /></p> <p class="right"><a href="#"> 宇治抹茶</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph03jpg.jpg" width="63" height="35" alt="chocoship" /></p> <p class="right"><a href="#"> チョコチップ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph04.jpg" width="63" height="35" alt="berugi" /></p> <p class="right"><a href="#"> ベルギーチョコ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph05.jpg" width="63" height="35" alt="cookie" /></p> <p class="right"><a href="#"> キャラメルクッキー</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph06.jpg" width="63" height="35" alt="banira" /></p> <p class="right"><a href="#"> バニラ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph07.jpg" width="63" height="35" alt="pain" /></p> <p class="right"><a href="#"> パイナップル</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph08.jpg" width="63" height="35" alt="apple" /></p> <p class="right"><a href="#"> アップル</a></p> </div> <div class="section1"> <

  • レイアウトが崩れてしまう原因を教えて下さい。

    添付データのようなデザインをtableを使わずに作りたいのですが、 テキスト数の増減やphotoのmarginをいじるとレイアウトが崩れてしまいます。 テキストが増えても減ってもレイアウトが崩れない方法はありますか？ <style type="text/css"> .contents{ width: 650px; margin-right: auto; margin-left: auto; } .contents ul{ list-style: none; } .contents ul li.photo{ float: left; border: 1px solid #ccc; padding: 5px; } .contents ul li.text, .contents ul li.title{ margin-left: 200px; } .contents ul li.title{ margin-top: 20px; margin-bottom: 10px; color: #111; } .contents ul li.text{ font-size: 14px; } .contents ul li.photo a img{ border-style: none; outline: none; } .contents ul li.title a:hover{ color: #ccc; } </style> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div>

    • ベストアンサー
    • HTML
  • FireFoxでのレイアウト表示崩れについて

    現在ホームページを作成しています。 CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。 IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。 よろしくお願いします。 以下ソース ◇HTML部分◇ <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <u class="hnavi"> <li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li> <li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li> <li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li> <li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li> <li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li> <li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li> </u> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS部分◇ body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } .hnavi { margin: 0; padding: 0; } .hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; } 以上です。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • CSS画像・文字混在縦メニュー

    画像と文字使った縦メニューを作成しています。 レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。 どうぞお知恵をお貸しください。 よろしくお願いいたします。 【CSS】 @charset "utf-8"; /* CSS Document */ /* ナビ設定 */ #navi1 { margin: 0px; padding: 0px; position: relative; right: 10px; width: 200px; float: right; } #navi1 li { margin: 0px; padding: 0px; position: relative; width: 200px; float: right; } #navi1 #navi1_title { width: 200px; position: relative; } .sub_menu { width: 190px; position: relative; float: right; left: 5px; } .sub_menu ul { list-style: none; border-top: 1px solid #CCCCCC; width: 190px; position: relative; } .sub_menu li { border-bottom: 1px dashed #CCCCCC; background: #F3F0EA url(img/xx.jpg) no-repeat left center; width: 190px; } .sub_menu a { display: block; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 180px; /*Window IE5用の値を指定 */ color: #666; text-decoration: none; font-size: 11px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 10px; background-color: #F3F0EA; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; left: 3px; } .sub_menu a:hover { color: #666; width: 180px; background-color: #E4DECF; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; } 【HTML】 <div id="navi1"> <h2><img src="img/menu1_title.png" width="200" height="50" alt="qqq" /></h2> <ul> <li><img src="img/menu_y.png" width="200" height="32" alt="zzz" /></li> </ul> <ul class="sub_menu"> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> </ul> <ul> <li><a href="#"><img src="img/menu_a.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_b.jpg" width="200" height="32" alt=xxx" /></a></li> <li><a href="#"><img src="img/menu_c.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_d.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_e.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_f.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_g.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_h.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_i.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_j.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_k.jpg" width="200" height="32" alt="xxx" /></a></li> </ul> </div>

    • ベストアンサー
    • HTML
  • HPがFirefoxでは問題ないのに、IEだと画像に空白ができます。

    DreamWeaver8を使いHPをさわってるんですが、IE6で見ると、TOPページの画像と画像の間に空白ができて見えます。DreamWeaver上でもFirefoxでも問題なく表示されるんですが、原因がわかりません。 （当方初心者で、このHPももともと業者さんが作ったものを、途中から簡単な更新等のみを知人からお願いされてしておりますので、CSSやらタグやら勉強中で、まだまだよく解ってないような感じです。そんな人間がHPを触るな！という意見がごもっともだとは思いますが、知人も周りに頼めるような人間もなく私にお願いしてきておりますので、なんとか綺麗に見えるようにしたいのです。） これだけの説明では解りにくいと思いますので、以下におかしいと思われる個所を載せます。 <div class="top-h-left"></div> <div class="top-h-right"> <div class="t-sub-navi"> <ul> <li class="h-home"><a href="../index.html"><img src="../img/top_h_home.jpg" alt="HOME" width="53" height="20" class="imgover" /></a></li> <li class="h-inquiry"><a href="../info/inquiry.html"><img src="../img/top_h_inquiry.jpg" alt="お問い合わせ" width="81" height="20" class="imgover" /></a></li> <li><a href="../info/sitemap.html"><img src="../img/top_h_sitemap.jpg" alt="サイトマップ" width="82" height="20" class="imgover" /></a></li></ul><br clear="all" class="partition" /></div><img src="../img/top_img1.jpg" alt="○○○」" width="410" height="160" /></div> <span class="top-h-left"><a href="http://www./○○○"><img src="../img/logo_top.jpg" alt="○○○" width="340" height="180" /></a></span><br clear="all" class="partition" /> <img src="../img/top_img2.jpg" alt="" width="340" height="209" /><img src="../img/top_img3.jpg" alt="" width="410" height="209" /><br /> <div class="top-global-navi"> この画像のimg1とimg3の間に空白が現れてしまいます。 （○の部分はHPのアドレスや店名等が表示されていましたので、略させて頂きました）

  • フルスライドの画像上に文字を入れたい

    すみません、初心者です。 htmlは、 <div id="container"> <div class="fullSlideShow"> <ul> <li><a href="#1"><img src="img/photo01.jpg" alt=""></a></li> <li><a href="#2"><img src="img/photo02.jpg" alt=""></a></li> <li><a href="#3"><img src="img/photo03.jpg" alt=""></a></li> <li><a href="#4"><img src="img/photo04.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo05.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo06.jpg" alt=""></a></li> </ul> </div> <div class="helo"> <h1>site title</h1> <p>abcdefg</p> </div> と書いてみました。CSSですが、 .fullSlideShow h1 { position: absolute; z-index:500; left: 40px; top: 40px; padding-right: 40px; font-size: 2em; line-height: 1.20; } .fullSlideShow h1 a.textlink { color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-decoration: none; } としてみましたが表示されません。まだサイズや位置は気にせず表示されるように試してみているのですが、どうも文字が画面上に現れてくれません。 とりあえず、h1とpだけでも表示させたいのですが、教えて頂けないでしょうか。 どうぞ宜しくお願いします。

    • ベストアンサー
    • CSS
  • cssスプライト　positionが効かない

    現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？ どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div><!--gnav--> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }

    • ベストアンサー
    • CSS
  • IE6、7で途切れてしまう画像

    分からない部分が出た際にいつもお世話になっております。 今回もどなたかご回答頂けますと幸いです。 グローバルナビゲーションを中央揃えにして表示させようとしているのですが、 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; } 宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する