- ベストアンサー
バナーとバナーとの微妙な空白
http://storeuser8.auctions.yahoo.co.jp/jp/user/jewelry_avenue このサイトの右サイドメニューのバナーの微妙な空白があるのとないのが見られます。ＨＴＭＬでどのように違いを記述するのでしょうか？たとえば、サイドメニューの最上部”オススメ商品”と”新品未使用”の間には空白がなく、その下の”アイテム別検索”と”リング”の間には空白があります。ネックレスとペンダントトップというバナーにも空白があるように。ソースを見たのですが、違いがみつけられません。どなかたよろしくお願いします。
- rubyman
- お礼率9% (24/247)
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こちらのサイトではtableをつかってレイアウトされているようですね。 問題の箇所（右サイドメニューではなく左？）のソースを確認しましたが、記述に原因があるようです。 <tr><td> <img SRC=***.jpg WIDTH=** HEIGHT=** BORDER=0></td></tr> ↑下に空白がない記述 <tr><td> <img SRC=***.jpg WIDTH=** HEIGHT=** BORDER=0> </td></tr> ↑下に空白ができている記述 分かりますでしょうか？ 「</td></tr>の前に改行してるかどうか」が原因となっています。 （firefoxでは空白は出来ませんが） ちなみに、これは有名ですが <a href="">1</a><a href="">2</a><a href="">3</a> と <a href="">1</a> <a href="">2</a> <a href="">3</a> とでは、同じ内容でも記述方法によってレイアウトが変わります。
その他の回答 (1)
確認していませんが、アンカーで囲っているかいないかの違いではないでしょうか？ IEのみで起こるようです。 問題の部分に<img src="画像へのリンク" style="display:block;"> とすると直るかもしれません。 あと、知識として空白等の見た目を制御するのはHTMLではなくCSSの扱う範囲ですので覚えておくと良いと思います。 おせっかいついでに、このような画像のメニューにはimg要素に対してalt属性をつけてやったほうが親切です。
関連するQ&A
- 縁起の悪い質問で気がひけますが、お葬式に出席する時、女性は、パールをつ
縁起の悪い質問で気がひけますが、お葬式に出席する時、女性は、パールをつけますよね。 この間、たまたまパールのジュエリーを見ていたら、ネックレスや、ピアス・イヤリングは、パールだけのが売っていましたが、リングには全て、ダイヤがついていました。お葬式では、確か、光り物はダメなはず。 お葬式の時は、ネックレスとピアスかイヤリングだけで、リングはつけないものなんですか？
- ベストアンサー
- その他(恋愛・人生相談)
- 持っているジュエリーの数など教えてください
こんばんは。 ジュエリー（シルバー・ゴールド・プラチナなどで、メッキは除く）はアイテム（リング・ネックレス・ブレスレットなど）それぞれでどれくらいの数をお持ちですか？ また、好きなブランドはありますか？ 現在私（２０代後半）が所有しているのは・・・ リング：ピンクシルバー１個、シルバー１個、ピンクゴールド１個。 ピンキーリング：シルバー１個、ダイヤとピンクサファイヤ付き１個づつ。 ネックレス：ムーンストーン付きシルバー１本、ジルコニアシルバー１本、イエローゴールド１本。 ブレスレット；シルバー１個。 好きなブランドは４℃とアガット、ノジェスです。 みなさんがどれくらい所有しているのか気になり、質問させていただきました。 差し支えなければ、回答お願い致します。
- ベストアンサー
- アンケート
- スタイルシートでのレイアウトについて
スタイルシートでレイアウトしたく、フリーのテンプレートからソースをもってきました。 -HTML- <div id="outline"> <div class="main"> メイン上部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド上部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="main"> メイン下部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド下部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="footer"> フッター部分 </div><!-- end footer --> </div><!-- end outline --> -CSS- #outline{ width : 750px ; text-align : left ; border : solid 1px #000000 ; } .main { width : 200px ; background : #ebebeb ; margin-bottom : 10px ; float : left ; } .side { width : 540px ; background : #ebebeb ; margin-bottom : 10px ; float : right ; } .c-both { clear : both ; } .footer{ width : 100% ; background : #ebebeb ; } そこで、"上部コンテンツ部分"と"下部コンテンツ部分"の高さを、それぞれ違う高さにしたいのですが、どうしたら良いでしょうか？ あと、メイン上部コンテンツ部分・サイド上部メニュー部分、メイン下部コンテンツ部分・サイド下部メニュー部分の下に、同じように行を追加したいのですが、どうしたら良いでしょうか？ スタイルシートの段組みで、非常に困っています。 助けて下さいm(_ _)m
- 締切済み
- その他（プログラミング・開発）
- アクセサリ、何を選びますか？
こんにちは。 ２６歳女です。 私は、今まで数千円程度、高くても１万円位で買える、 ジャラッとしたチープでジャンクなアクセサリーが好きだったのですが、 歳とともに、本物ジュエリーが欲しいなぁ、と思うようになってきました。 そこで、夏のボーナスで何か買おうかな、と思っています。 皆さんなら、どんなアクセサリーを選びますか？ 教えてください。 似たような質問は過去にもありますが、「今」の情報が知りたいです。 カテゴリ違いでしたらすみません。 ・予算４～５万「まで」 ・リングか、ネックレスか、イヤリングで ・「とっておき」アクセサリよりも、「毎日」アクセサリで できれば、ブランド名（シリーズ名）、価格、素材なども教えて頂けると幸いです。
- ベストアンサー
- レディース服・下着・水着
- JAVAスクリプトが表示されない
こんばんわ。 http://e-238.hp.infoseek.co.jp/ ここのサイトなのですがIEで見るとバナーとTOPメニューの間にタイプライターのようなスクリプトが見えるのですがFirefoxで見てみると表示しません。この違いは何なのでしょうか？また解決方法もお分かりになればお教え頂きたいのですが。 よろしくお願い致します
- ベストアンサー
- ブラウザ
- amebaブログの画面がおかしい
amebaブログをデザインをカスタマイズして利用しているのですが、 添付画像のように読者登録、新着ニュースへのバナーボタンがうまく表示しないのです。 もちろんCSSでは、バタンはきちんと設定しております。 どこに問題があるのでしょうか。 CSSは、テンプレートをネット上で購入して利用しております。 右サイドには問題なく表示しております。 画面中央の上部（メニューの下）とフッターの上のところがおかしいのです。
- ベストアンサー
- ブログ
- vaio fit15 パソコン画面表示について
以前まではDELLのstudio15を使っていたのですが vaio fit15に替えました。 画面サイズは変わらないのですが インターネット画面の小ささがどうにかならないものかと思っています。 １００％表示だと 真ん中に小さく表示される感じなので １５０％表示で見ています。 １５０％表示でちょうど yahooのトップ画面がきっちり画面に収まる感じです（１００％だと両サイドの空白がかなり目立ちます） ただ、IE8を使っていますが 画面上部のメニューバーやお気に入り一覧の表示などは 拡大はされないため、小さく見づらいです。 同じくタスクバーも全体的に小さいです。 これは設定でどうにかなるものでしょうか？
- ベストアンサー
- ノートPC
- ブログ内の空白を削除したい
ブログ内のタイトル画像とその下のラインの間の空白が1行程度空いており、その空白をどうしても埋めたいのですが、テンプレートをいじってもなかなか上手く行きません。テンプレートは以下のような記述になっています。是非ご教授ください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://※※.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <link href="<%css_link>" type="text/css" rel="stylesheet"> <link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml"> <title><%blog_name> <%sub_title></title> </head> <body> <!--アクセス解析タグ ここから--> <script language="JavaScript" src="http://※※※"></script><noscript><div align="right"><a href="http://※※※/" target="_blank">アクセス解析</a></div></noscript> <!--アクセス解析タグ ここまで--> <a name="top"></a> <div class="container"> <!-- ヘッダー部 ここから --> <IMG SRC="http://※※※.jpeg" width="※" height="※" alt="※.jpg" border="0"></a></h1> <div class="banner"> <div class="banner_title"> <h2 class="intro"><%introduction></h2> </div> </div> <!-- ヘッダー部 ここまで --> <!-- 左メニュー ここから -->
- ベストアンサー
- ブログ
- CSSで謎の空白ができてしまいます。
最近CSSでサイトの構築をしているのですが↓のように途中で navi（パンくずリンク）とmenu＆main（メニューとメイン記事）の間に空白が出来てしまいます。 menuとmainにmargin: 0px;とpadding 0px;をしても駄目でした。 どうすれば良いかご指導お願いします。 http://blog-imgs-16.fc2.com/t/e/s/testestes0101/test.png 以下ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> <!-- body{/* 全体の要素 */ margin: 0px; color: #555555; background-color: #E3E5E6; } .layout{/* 全体を決める要素 */ margin: 0px auto 0px auto; width: 850px; } .header{/* ヘッダー部分 */ padding: 35px 0px 0px 50px; height: 65px; background: url("title_bg.png"); background-repeat: no-repeat; } .navi{/* サイト内のナビゲーション */ height: 40px; padding: 13px 0px 0px 60px; font-size: 14px; background: url("menu_bg.png"); background-repeat: no-repeat; } .navi a:link{/* ナビゲーション内のリンクの色 */ color: #555555; } .navi a:visited{/* ナビゲーション内の訪問済みリンクの色 */ color: #555555; } .menu{/* メニュー部分 */ background-color: #FFFFFF; width: 215px; float: right; } .main{/* メイン部分 */ background-color: #FFFFFF; width: 635px; float: right; } .footer{/* フッター部分 */ background-color: #FFFFFF; clear: right; height: 40px; } --> </style> </head> <body> <div class="layout"> <div class="header"> <a href="index.html"><img src="title.png" border="0"></a> </div> <div class="navi"> <a href="index.html"> トップページ </a> </div> <div class="menu"> </div> <div class="main"> </div> <div class="footer"> </div> </div> </body> </html> ※タイトル画像は消してあります。
- ベストアンサー
- レンタルサーバ・ASP
- アサヒコムのような表示方法andタグの応用について
こんばんは。 自分なりにHTMLを勉強してきまして、CSSも少し勉強し始めましたという状況です。 そこで２つほど質問があります。 １，アサヒ．コムのように上２割部分をサイトタイトル画像＋メニュー欄で、下８割部分を表示部分のように分けて、メニューからコンテンツをクリックすると、下８割の部分だけ変える（変えたように見せる）には、具体的にどのような方法が考えられるのでしょうか。 今までフレームを使ってやってきたのですが、解像度の違いによって崩れてしまうので、基本的な８００・６００固定でやりたいと思っています。 ソフトは使う気はないので、必要な言語（具体的に教えてもらえると嬉しいです）、参考になるようなサイトを教えて欲しいです。 ２，コンテンツの表示方法は１のような感じでやりたいとおもっているんですが、例えば http://www.sky.sannet.ne.jp/masapine/homepage/ ここのページのように、左側にリンクバナー欄、右側にメイン、上部にタイトルといった感じでわかれてますよね？ これって、テーブルを使ってるんですか？ なんか、私はもしかしたらテーブルタグは、データをまとめる（エクセルのような）時だけ表にして使うと思ってたんですが、大きな勘違いですかね？ 基本的なことは理解したつもりですが、まだまだ初心者なため、それをつかった応用が出来ていない気がするんです。 宜しくお願いします。
- ベストアンサー
- CSS
