- ベストアンサー
掲示板のスレッドとスレッドの間に画像を表示する方法
- 掲示板のスレッドとスレッドの間にライン画像を入れる方法について調べています。
- 現在、画像を表示するためにdiv要素を使用していますが、縦に少しだけ重なってしまう問題が発生しています。
- 代わりにtable要素を使用することで、問題なく画像を表示することができます。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- CSSで、リストでGlobalNavigation(画像ボタン)を作り、CSSでのRollOverと上下の隙間を消す方法
CSSでのWebサイト制作するのは二度目なので壁ばかりです。 リストでGlobalNavigation(画像ボタン)を作ります。 このとき、 [1] CSSでのRollOverをさせる方法(JavaScript非使用) [2] GlobalNavigation画像ボタンとボタンの間の隙間を消す方法(左に縦にボタン群を並べるので) を探しております。どのようにすればいいでしょうか？ ネットサーフして片っ端から現在調べ中ですがなかなかありそうで無く・・・ 以下、ソースです。 HTML】 <div id="wrapper"> <div id="hdr-all"> <div id="hdr-area"> <div id="hdr-vi"> <h1><img src="../img/share/hdr_vi.gif" alt="サイト名" /></h1> </div> ヘッダーエリア</div> <div id="hdr-line"></div> </div> <div id="main-all"> <div id="main-area"> <div id="nv-global"> <ul> <li><a href="index.html"><img src="../img/share/nv_lft01.gif" alt="ホーム" width="177" height="55" id="Image1" /></a></li> <li><a href="../corp/index.html"><img src="../img/share/nv_lft10.gif" alt="会社情報" width="177" height="55" id="Image10" /></a></li> </ul> </div> <div id="main-area-cts"> <table width="557" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="../img/share/cts_frm_top.gif" width="557" height="21" /></td> </tr> <tr> <td width="21" background="../img/share/cts_frm_lft.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td> <td width="515" height="500" valign="top" bgcolor="#F6F6F6">コンテンツエリア</td> <td background="../img/share/cts_frm_rht.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td> </tr> <tr> <td colspan="3"><img src="../img/share/cts_frm_btm.gif" width="557" height="21" /></td> </tr> </table> </div> </div> <div id="main-line"></div> <div id="ftr-all"> <div id="ftr-area">フッターエリア</div> <div id="ftr-line"></div> </div> </div> </div> 【CSS】 body { margin: 0 auto; background: #5ca786; font-family: "Osaka"; font-size: 12px; letter-spacing: 1px; line-height: 150%; color: #333333; } #wrapper { margin: 0px auto 0px auto; width: 100%; height: 100%; background: #333333;/*Total BG Color*/ text-align: left; } #hdr-all { margin: 0px 0px 0px 0px; width: 100%; height: 112px; background: #a2d8c0; } #hdr-area { margin: 0px 0px 0px 0px; width: 749px; height: 112px; background: url(../img/share/bg_hdr.jpg) no-repeat; float: left; } #hdr-line { margin: 0px 0px 0px 0px; width: 1px; height: 112px; background: url(../img/share/line_rht.gif); float: left; } #main-all { margin: 0px 0px 0px 0px; width: 100%; height: 100%; background: #5ca786; } #main-area { margin: 0px 0px 0px 0px; width: 749px; height: 100%; background: #266e4e; float: left; overflow: auto; } #main-line { margin: 0px 0px 0px 0px; width: 1px; height: 100%; background: url(../img/share/line_rht.gif) repeat-y; float: left; } #nv-global { top: 5px; left: 0px; margin: 5px 0px 0px 5px; width: 177px; padding-bottom: 30px; background: #7bb395; float: left; } #nv-global ul { } #nv-global li{ } #main-area-cts { top: 5px; left: 187px; margin: 5px 0px 0px 0px; width: 557px; padding-bottom: 30px; background: #266e4e; float: left; } #ftr-all { margin: 0px 0px 0px 0px; width: 100%; height: 150px; background: #FFFFFF; } #ftr-area { margin: 0px 0px 0px 0px; width: 749px; height: 150px; background: #FFFFFF; float: left; } #ftr-line { margin: 0px 0px 0px 0px; width: 1px; height: 150px; background: url(../img/share/line_rht.gif) repeat-y; float: left; }
- ベストアンサー
- HTML
- htmlで画像の上にテキストを表示したが、ブラウザーによって見え方が違う
ホームページの制作で 部分的に画像の上にテキストをつけようと <DIV STYLE="position:absolute;"> を使って作ってみました。 IEで見るとちゃんとできているんですが、 サファリ、Firefoxで見ると当該箇所が左にずれてしまいます。 ・画像の上にテキストをつける ・その画像の中に部分リンクをつける ・どのブラウザーで見てもずれない 以上の条件を満たせば、やり方を問いません。 どなたか教えていただけませんでしょうか？ どうぞよろしくお願いいたします。 素人なので見づらく、変に複雑になっているかもしれませんが 以下ソースの一部です。 <style type="text/css"> div.先頭画像 { background-image:url(./images/先頭画像); background-position: top center; background-repeat:no-repeat; margin:0; } div.サイド { background-image:url(./images/サイド画像); background-position: top center; margin:0; background-attachment:fixed; } table.Goo{ color:#000; } </style> </head> <body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <div class="サイド"> <center><img src="./images/リンク画像" width="794" height="662" border=“0” usemap="#top"/><br /> <map name="top"> <AREA SHAPE=rect COORDS="610,0,755,30" HREF="リンク先"> </map></center> <center><IMG SRC="images/white2.gif" width="794" height="1840" border=“0”><br /></center> <!--当該箇所> <DIV STYLE="position:absolute; top:662px; left:58px"> <IMG SRC="images/背景画像" border=“0” usemap="#first"/><br /> <map name="first"> <AREA SHAPE=rect COORDS="633,18,776,228" HREF="リンク先"> </map> <DIV STYLE="position:absolute; top:165px;left:125px"> テキスト </DIV> <DIV STYLE="position:absolute; top:570px;left:125px"> テキスト </DIV> </DIV> <!--当該箇所 ここまで> <center> <table class="Goo" width="756" cellpadding="0" cellspacing="0" border=“0”> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> <img src="./画像" width="416" height="53" alt="" border=“0”/> <br /> <br /> </td> </tr> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> <img src="./画像" width="369" height="15" alt="" border=“0”/> <br /> <br /> </td> </tr> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> テキスト <br /> </td> </tr> </table> </center> </div> </body>
- 締切済み
- その他([技術者向] コンピューター)
- 画像の表示方法について
画像の表示方法について 画像に関してですが、HTMLの中にimgでマークアップするより、cssで画像を指定した ほうがいいとある書籍に書いてありました。しかし、実際の方法が具体的に記載されて いませんでした。 それで考えたのですが、以下のように<div></div>で範囲を決めて、その背景画像に 画像を指定すればよいと思いました。 その際に、<div>と</div>の間には何も入らなくてもいいのでしょうか？ つまりこういうことです。 <div id="photo"></div> css #photo { background-image: url(image/photo01.gif); background-repeat: no-repeat; width: 240px; height: 180px; } これで240×180の写真が出せると思いますが、中に何も入らないのは文法上 いいのかどうか分かりません。 知人に聞いたら、適当にテキストを入れて、それをcssのtext-indentで表示を 消したらいいと言われました。つまり下記の通りです。 <div id="photo">photo1</div> css #photo { background-image: url(image/photo01.gif); background-repeat: no-repeat; text-indent: -9999px; ←これでテキストをかなたに飛ばす width: 240px; height: 180px; } HTML、cssについては、独学で本などで学んでいるため、聞きたいことが聞けずに 困る時があります。上記のものもその一つです。 この質問と共に、ついでで申し訳ありませんが、伺いたいのですが、Webマスター たちが集まって、お互いに質問したり答えあったりするサイトや掲示板などが あったらお勧めのものを教えてください。何卒、よろしくお願いいたします。
- ベストアンサー
- HTML
- マウスをクリックで画像・・・
マウスをクリックすると画像が飛び散る素材(?)を頂いてきたのですが、 以下の通りにUPすると「エラー」が出てしまいます。 どこが悪いのか解らないので よろしくお願いします。 <SCRIPT language="JavaScript" src="ht://xxx/xx.js"></SCRIPT> <BODY onload="initMouseEvents()"> <DIV id="sparks"> <DIV id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/1.gif" width="15" height="16"></DIV> <DIV id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/2.gif" width="15" height="16"></DIV> <DIV id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/3.gif" width="15" height="16"></DIV> <DIV id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i4.gif" width="15" height="16"></DIV> <DIV id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i5.gif" width="15" height="16"></DIV> <DIV id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i6.gif" width="15" height="16"></DIV> <DIV id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/7.gif" width="15" height="16"></DIV> <DIV id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/8.gif" width="15" height="16"></DIV> <DIV id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/9.gif" width="15" height="16"></DIV> <DIV id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/10.gif" width="15" height="16"></DIV> </DIV>
- 締切済み
- JavaScript
- 画像の縦サイズが小さいと隙間が・・・
縦のサイズが小さい画像を縦に並べると、隙間ができてしまいます（IE6）。 隙間を空けずに、縦方向にぴったりとくっつけたいので困っています。 ネットで調べて色々な方法で試してみましたが、解決しません。 IE6ではあきらめるしかないのでしょうか。 どなたか解決策があれば知恵をかしてください。よろしくおねがいします。 （例） <div style="width:100px; background-color:red;"> <img src="image.gif" width="100" height="5" style="vertical-align:bottom; border:0;"> <img src="image.gif" width="100" height="5" style="vertical-align:bottom; border:0;"> </div>
- ベストアンサー
- HTML
- CSSでのマウスオーバーの画像切り替えについて
現在横型のメニューをCSSで作成しています。 配置はうまく出来たのですが、ロールオーバーがうまくいきません。 マウスオーバーしても画像が切り替わりません。 CSSの記述をどのようにすればいいでしょうか？ 以下ソース ◇HTML <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <ul id="hnavi"> <li id="hnavili1"><a href="#"><img src="img/top-menu-1.gif" width="149" height="60"></a></li> <li id="hnavili2"><img src="img/top-menu-2.gif" width="150" height="60"></li> <li id="hnavili3"><img src="img/top-menu-3.gif" width="151" height="60"></li> <li id="hnavili4"><img src="img/top-menu-4.gif" width="149" height="60"></li> <li id="hnavili5"><img src="img/top-menu-5.gif" width="150" height="60"></li> <li id="hnavili6"><img src="img/top-menu-6.gif" width="151" height="60"></li> </ul> </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; } #hnavili1 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili1 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili2 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili2 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili3 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili3 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili4 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili4 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili5 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili5 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili6 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili6 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } 宜しくお願いします。
- 締切済み
- HTML
- ディスプレイサイズにあわせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************
- 締切済み
- Visual Basic
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？ もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>
- ベストアンサー
- HTML
- CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。
CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。 スタイルシートで、画像の縦サイズに合わせて中央揃えで文字を表示したいのですが、 どのように記述したら良いのかわかりません。 下記のようにテーブルを使えば簡単に出来るのですが、 これをスタイルシートのみで表現するにはどのように記述すればいいのでしょうか？ ちなみに左側画像の縦サイズは変わります。 よろしくお願いします。 ------------------------------------------------------------------- <html> <head> <title>CSS</title> <style type="text/css"> <!-- #waku { width: 451px; margin: 0; padding: 6px 8px 6px 8px; background-color: #008837; } --> </style> </head> <body> <div id="waku"> <table width="435" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="80"><img src="hoge.gif" width="80" height="変わります"></td> <td width="355" valign="middle">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</td> </tr> </table> </div> </body> </html> -------------------------------------------------------------------
- 締切済み
- HTML
- 画像を二枚使ったロールオーバーについて質問をさせて頂きたいのでお願いし
画像を二枚使ったロールオーバーについて質問をさせて頂きたいのでお願いします。 画像が二枚あり一枚は通常時に表示されるようにしたと考えております。参考までにその画像は以下になります。よろしければ見てみてください。なお一枚目の画像ファイルは img/1.gifといいます。 http://desktop10.web.fc2.com/1.gif 次にマウスを重ねたときに表示されるようにしたい画像が以下になります。 なお二枚目の画像ファイルはimg/11.gifといいます。 http://desktop10.web.fc2.com/11.gif そこで私は「html」の部分に以下の記述をしました。 <div id="waku1"> <div> <a href="index.html/"><img src="img/1.gif" width="108" height="48" alt="*" /></a> </div> </div><!-- waku1 end --> 次に、「css」に以下の記述をしました。 #waku1 div{ width:109px; background:url(img/1.gif); height:48px; float:left; border: solid 1px #d3d3d3; } #waku1 a{ display:block; width:100%; height:100%; text-decoration:none; } #waku1 a:hover{ background:url(img/11.gif); } 上記のようにしてブラウザ上で確認をしたところ、780pxの枠の中に隙間無くぴったりと収まったのですが 該当の画像にマウスポインタを合わせたところ、11.gifの画像に変わってくれません。ただ少し気になった点は、マウスポインタをあわせたときに画像の隙間から赤い線がわずかに見えました。・・ ですが、11.gifのように画像にしっかりと表示できません。私には全くわからないのですが、どなた様かご教示をいただけませんでしょうか？ どうかご指導のほどよろしくお願いいたします。
- ベストアンサー
- HTML
お礼
ご指摘の通りで改善されました。どうもありがとうございました。