- ベストアンサー
タイトル文字の背景について
chusuke_tの回答
- chusuke_t
- ベストアンサー率35% (106/300)
まずは、やってみてください。 5mmのスペースは、bodyの方にあるのです。 タイトル文字の方にあるスペースではありません。
関連するQ&A
- CSS ブログのタイトルの背景が表示されません
検索してみたのですが、どこが悪いのか不明なのでどなたか教えて下さい＞＜ エキサイトブログのマイスキンで、 ブログの日のタイトルの前に画像を付けたいのですが、 DIV.POST_HEAD td.ti { text-indent: 43px; background: url(つけたい画像のURL(gif)) no-repeat left top; line-height: 1.6; _height: 27px; vertical-align: middle} となっていても画像が表示されずタイトルの文字のみです。 もしや画像の高さを27pxにした方がいいのか？と思って 画像サイズを27×23pxにしたのですが、それでも表示されません。 画像のアップロードは出来ています。 全体的？に見ると DIV.POST { MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT;} DIV.POST_HEAD { BORDER-BOTTOM : 1PX #CCC dashed; MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; } DIV.POST_HEAD td.ti { text-indent: 43px; background: url(画像URL.gif) no-repeat left top; line-height: 1.6; _height: 27px; vertical-align: middle} DIV.POST_HEAD td.admin { text-indent: 0;} DIV.POST_HEAD a { font-size: 110%; letter-spacing: 4px; } DIV.POST_TTL { FONT : BOLD 15PT/130%;} DIV.POST_ADMIN { TEXT-ALIGN : RIGHT;} DIV.POST_BODY { LINE-HEIGHT : 150%; WIDTH : 500PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; } DIV.POST_TAIL { FONT : 11PX/150% TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; } DIV.COMMENT { BORDER : 1PX #D3D3D3 SOLID; BACKGROUND : #F7F7F7; PADDING : 15PX; MARGIN : 20PX 0PX; } DIV.COMMENT_BODY { MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 130%;} DIV.COMMENT_TAIL { MARGIN : 8PX 0PX 5PX; FONT : 8PT/150% TAHOMA; COLOR : #777;} DIV.COMMENT_INPUT { MARGIN-TOP : 20PX; BORDER-TOP : 1PX #AAA DOTTED; PADDING-TOP : 20PX; } DIV.COMMENT_LINE { BORDER-TOP : 1PX #AAA DOTTED; MARGIN : 10PX 0PX 15PX; } コンナカンジです・・・。 どこが悪いのでしょうか・・・。 ちなみに上手く表示されている方のソースからひっぱっても 私のプレビューで見ると何故かそこだけ表示されません。 もっと他のところを見るべきなのでしょうか？ 素人で申し訳ありませんが どなたか分かる方、アドバイスを頂けたらうれしいです。
- ベストアンサー
- ブログ
- 背景色をうまく使えない
CSSを使ったページを試作しているのですが、背景色をうまく使えません。 「outline」の周り全部を赤の背景色にしたいのですが下記ページのようにしかなりません。どうしたら良いのでしょうか。 http://www.asahi-net.or.jp/~gc4t-iwt/taipei0801/1_19.html CSSソース @charset "Shift_JIS"; body { margin-left : 60px; color: black; background-image: url("b_bcg030.gif"); background-repeat: repeat-y; background-color: red; } #outline { background-color: lavender; width: 750px; text-align: left; border: 2px solid silver; padding: 5 5 5 5px; } h2 { padding-left: 100px; }
- ベストアンサー
- ホームページ作成ソフト
- htmlでインプットボックスを横並びに表示したい。
ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。 こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。 何とかして縦2×横2に置き換えることはできないでしょうか？ ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】 ーーーーー｜ 86行目 ｜ーーーーー｜ ーーーーー｜ 87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目 ｜ 92行目｜ 97行目 ーーーーー｜ 89行目 ｜ーーーーー｜ 【やりたいこと】 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜ ーーーーー｜ 86行目｜87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目｜89行目 ｜ 92行目 ｜ 97行目 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜
- ベストアンサー
- JavaScript
- CSS、width100％でもできる余白
CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか？ また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}
- ベストアンサー
- CSS
- floatの挙動について
いつもお世話になっております。 次のコードで#sidebody内に#a～cboxを左側に縦に並べ、#dboxを右側に配置したいのですが、 #dboxのfloatが#sidebodyに対して効きません。 原因を教えていただけませんでしょうか。 シンプルな構造なのに、何が問題なのか分かりません。 何卒よろしくお願いいたします。 <html> <head> <link href="test.css" rel="stylesheet" type="text/css" media="screen"> <body> <div id="content"> <div id="sidebody"> <div id="abox">a</div> <div id="bbox">b</div> <div id="cbox">c</div> </div> <div id="dbox">d</div> </div> </body> </head> </html> #content { width: 200px; height: auto; border: red solid; } #abox { width: 100px; height: 20px; background-color: blue; text-align: center; color: white; } #bbox { width: 100px; height: 100px; background-color: pink; text-align: center; color: white; } #cbox { clear: both; width: 100px; height: 100px; background-color: darkblue; text-align: center; color: white; } #dbox { width: 100px; height: 250px; float: left; background-color: green; text-align: center; color: white; }
- ベストアンサー
- CSS
- 一部スクロール表示が含まれる画面を印刷する方法
ホームページ画面の一部に縦スクロールの設定をしております。 画面上に印刷ボタンを作成し、プリントアウトしたいと考えておりますが、ファイル→印刷と押すと表示された部分のみしか印刷されません。 どなたかご存じでしたらご教示願います。 【HTML】 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333;" class="test"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" size=10><b>注文日</b></th> <th height="42" width="212">品物・オプション<br>注文先・単価</th> <th height="42" size=10>金額/個数</th> <th height="42" size=20><b>発注者/入力者</b></th> </tr> <% for(var i in content) { %> <tr bgcolor="lightyellow" > <% var obj = content[i]; %> <td align="center" height="47" size="10"> <input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日" disabled="disabled"> </td> <td align="center" height="47" width="10" style="white-space:nowrap;" > <input type="text" name=品物 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物 %>" disabled="disabled"> <input type="text" name=option size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"> <input type="text" name=品物2 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物2 %>" disabled="disabled"> <input type="text" name=option2 size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"> <input type="text" name=品物3 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物3 %>" disabled="disabled"> <input type="text" name=option3 size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"><br> <input type="text" name=tyumonsaki size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination %>" disabled="disabled"> <input type="text" name=単価 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価 %>" disabled="disabled"> <input type="text" name=tyumonsaki2 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination2 %>" disabled="disabled"> <input type="text" name=単価2 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価2 %>" disabled="disabled"> <input type="text" name=tyumonsaki3 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination3 %>" disabled="disabled"> <input type="text" name=単価3 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価3 %>" disabled="disabled"> </td> <td align="center" height="47" size=10> <input type="text" name=合計金額 size=10 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.合計金額 %>" disabled="disabled"> <input type="text" name=合計数 size=10 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.合計数 %>" disabled="disabled"> </td> <td align="center" height="47" size=20> <input type="text" disabled="disabled" name=発注者 size=20 style="background:white; color:#000000;" align="middle" value="<%= obj.発注者 %>"> <input type="text" disabled="disabled" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="<%= obj.入力者 %>"> </td> </tr> <% } %> </table> </div> </div> 【CSS】 .test { height: 250px; overflow-y: scroll; }
- 締切済み
- JavaScript
- 背景色を入れたいのですがよろしくお願いいたします。
<!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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="author" content="xxxxxxxx" /> <meta name="keywords" content="xxxxxxxx" /> <title>xxxxxxxx </title> <link ref="stylesheet" type="text/css" href="cut.css" /> <style type="text/css"> body {margin: 0px 5em; } #container { width:800px; margin-left:auto; margin-right:auto; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; border-color:#000000; } #header {background-color:#ffffff;}←ここの色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ h1 { margin-left:20px; color:#ffffff; font-size:1.25em; padding-top:30px;} ul {list-style-type:none; margin-left:100px; padding-left:0px;} li {display:inline; padding-right:20px; font-size:1.0em;} li a {text-decoration:none; line-height:2.2 } a { color:#000000} a:hover {color:#990000; } address a:hover {color:#990000;} p { font-size:1.25em; margin-left:50px; color:#ffffff;} .isu {text-align:right; margin-right:2px; } .moji {font-size:2em; line-height:200%; } .name { color:#ffff99; text-align:right; margin-right:50px; margin-bottom:50px; text-align:bottom;} .champ {text-indent:1em; font-size:2em;} .midasi { color:#ffff99; text-align:bottom; margin-left:100px; } .coment { color:#000000; text-align:left; margin-left:150px; line-height:2em; width:600px;} .http {font-size:0.9em; color:#000000; text-align:right; margin-right:0px; line-height:2em; padding-right:30px;} .denwa {color:#000000; text-align:right; line-height:2em; padding-right:30px;} hr {background-color:#000000; height:2px; width:250px; align-right;} .addless {text-align:right; color:#000000; padding-right:30px;} </style> </herd> <body> <div id="container"> <div id="header">←ここから <h1>xxxxxxxx </h1> <p class="isu"><img src="isuA.jpg" alt="xxxxxxxx" align="right" width="400px" height="250px" /> <br /> <p class="moji" >xxxxxxxx</p> <p class="champ">xxxxxxxx</p> <p class="midasi">xxxxxxxx</p> <p class="name">xxxxxxxx</p> <br /clear="all"></p> <br /> </div>←ここまでの背景色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ <br /> <br /> <p class="http">xxxxxxxx</p> <p class="addless">xxxxxxxx</p> <hr width="250" size="10" align="right"> <p class="denwa"> (黒電話) xxxxxxxx</p> <ul> <li><a href="top.html">トップページ</a></li> <li><a href="profile.html">プロフィール</a></li> <li><a href="staff.html">スタッフ</a></li> <li><a href="ryoukin.html">メニュー・マップ</a></li> <li><a href="mail.html">お客様メール</a></li> </ul> <br /> <br /> <p class="coment">xxxxxxxxxxxxxxxxxxxxxxxx</p> <br /> <br /> <br /> <address>Copyright(C)<a href="mailto:saitou@gmail.com">Hair Salon Saitou</address> </div> </body> </html>
- ベストアンサー
- Windows XP
- CSSで左側の余白
CSS本を見ながら苦闘しています。 下のようなCSSを書いたのですが、全体のレイアウトが左寄せから10pxほど余白が出て表示されてしまいます。 HTMLではそのような指定はしていません。 どうしてなのでしょうか。 また、どのようにしたら良いのでしょうか。 レイアウトは div#top div#top1 で２段上下にブロックしたあと、左右のブロックで分けています。 ※また、:と;の間にスペースを入れる、入れないは本によってマチマチなのですが、どのような書き方が正しいのでしょうか。 <style type="text/css"> <!-- body { font-size:10pt ; line-height:20px ; background-color:white; color : black ; } td { font-size:10pt; line-height:16px ;} div#top { position: absolute; top:0px; } div#top1 { position:absolute; top:95px ; } div#menu { float:left; } div#content { float:left; border-left:1px solid #666666 padding-top:10px; padding-left:20px; width:580px; } // --> </style>
- ベストアンサー
- HTML
- [携帯]divで指定した背景色から画像がはみ出す。
携帯用サイトを制作しているのですが、 <div style="clear:both;background-color:red;"> <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" /> <br />こんにちは </div> <div style="clear:both;～ と画像の横に文字が回りこんだとき、背景色が文字の部分にしかつかず、画像がはみ出した状態になってしまいます。 今回は1*1の透明なgif画像を使い、 <div style="clear:both;background-color:red;"> <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" /> <br />こんにちは <div clear="all" style="clear:both;"> <img src="./images/space.gif"> </div> </div> <div style="clear:both;～ とすることで解消できたのですが、 参考にしていたサイトではどうやら画像を使わずに背景内に収めているようです。 後学のために、画像を使わず、背景から画像をはみ出さないように見せる方法を教えてください。よろしくお願いします。 docomoで動作確認しています。
- 締切済み
- HTML
- EXCELでHTMLのタグの入ったセルを結合したい
下記のHTMLのタグが入ったセルと画像URLのセルを結合したいのですが、＆などで結合すると ダブルクォーテーションが倍くらいに増えてHTMLのタグとして機能しません。 どうやって結合させるのがいいのでしょうか？ =A1(HTMLのタグ）＆A2(画像URL）＆A3（HTMLのタグ） <body> <div style="WIDTH: 100%; TEXT-ALIGN: center"> <div id="wrapper" style="FONT-SIZE: 23px; FONT-FAMILY: Arial, Helvetica, sans-serif; WIDTH: 860px; COLOR: #000; TEXT-ALIGN: left; MARGIN: 0px auto"> <h1 style="FONT-SIZE: 38px; HEIGHT: 60px; WIDTH: 850px; COLOR: #ffffff; PADDING-LEFT: 10px; MARGIN: 0px; LINE-HEIGHT: 60px; BACKGROUND-COLOR: #336600">Picture</h1> <img src="画像URL"> <div class="sub_tit" style="FONT-SIZE: 35px; HEIGHT: 40px; WIDTH: 850px; FONT-WEIGHT: bold; COLOR: #ffffff; PADDING-LEFT: 10px; LINE-HEIGHT: 40px; BACKGROUND-COLOR: #336600"> Description </div><br><font size="5">
- ベストアンサー
- HTML