- 締切済み
画像の下に余白が出来てしまいます。
どんなにがんばっても下に余白が出来てしまいます。余白を消す方法を教えてください、お願いします。 多分、何か余計なもののせいで余白ができてるんだと思います。 css ↓ *{ margin:0;padding:0; font:normal 10px/16px Verdana; color:#000; letter-spacing:0.2em; } /*リンクの設定*/ a {text-decoration:none;} a:hover {text-decoration:underline;} /*改行・画像の設定*/ br {letter-spacing:normal;} img {border:0;} /*見出しの設定 h1…サイトタイトル h2…welcomeなどの見出し*/ h1 { color:#fff; font:bold 16px Verdana; } h2{ font:bold 10px Verdana; } /*右側のフレームの背景設定*/ body{ background:#fff url(img/imgr.jpg) no-repeat left bottom fixed; } /*左側、メニューの表示されるページのみに適用される背景設定*/ #INDEX{ background:#666 url(img/imgl.jpg) no-repeat right bottom fixed; } /*左側フレームの各種設定*/ #CONTAINER { margin:40px 20px 0 0; text-align:right; } #MENU { margin-top:20px; } #MENU a{ color:#fff; font-size:120%; line-height:25px; } #MENU a:hover{ color:#fff; text-decoration:none; } /*右側フレームの各種設定*/ #BOX { margin:40px auto; width:55%; } .text{ margin:5px 0 20px 10px; } .record{ margin:5px 0 20px 10px; height:200px;width:400px; overflow:auto; } html ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Clock hand</title> <tr valign="top"> </tr> </head> <body leftmargin="0" scroll="no" topmargin="0" marginwidth="0" marginheight="0"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> </tbody> </table> <table style="width: 188px; height: 693px" width="188" background="http://tokiokalink.web.fc2.com/imgl.jpg" align="left" height="693"> <tbody> <tr valign="top"> <td> <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <meta content="text/css" http-equiv="content-style-type" /> <link rel="stylesheet" type="text/css" href="style.css" /> <base target="main" /> <div id="CONTAINER">
- linkdarksaria
- お礼率100% (10/10)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞適当にホイホイ色んなものをつぎ込んでしまいました。 でしょうね。 慌てず、まず ★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) を最初から挑戦してみてください。古い資料ですが、HTML4.01の邦訳をされたメンバーの方ですので、厳密に書かれています。 とにかく最初はデザインを考えずにマークアップする練習をしてください。当然HTML4.01strictで使用できるタグは限られていますから楽です。 →http://www.htmllint.net/html-lint/tagslist.cgi?HTMLVersion=HTML40-Strict このうち、数十個覚えて置きゃ良いです。 当然、文書構造を示すには足りなくなりますから、divやspanとclass名を組み合わせて補完しないといけません。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 そのときに参考になるのは ★HTML5の新しい要素名 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )です。 新しい仕様のHTML5の登場を目前にして、HTMLの書き方は大きく変わります。--本当はもっと前から言われていた。No.1の回答のとおり それがきちんとできると、あとはスタイルシートでデザインしていきます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
なんといったらよいか・・ まずHTMLを正しく書き直しましょう。理由どころか、スタイルシートでデザインすることも不可能です。 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )』 なお、そのときに次の点を注意してください。 ・スタイルシートを使うのでしたら、tableを使用したデザインはすべきではありません。スタイルシートですべて、それもはるかに良いデザインができます。 ←『単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』 ←『ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』べきではない ←『スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 ・transitinalは使用すべきではありません。!!!1999年のHTML4.01の勧告以来12年経ちます。XHTML1.1やまもなく登場するHTML5にはtransitinalはありません。 ←『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 ・ leftmargin, scroll, topmargin, marginwidth, marginheight, cellspacing, cellpadding, align, heightなどの属性はすべて非推奨です。 ←『スタイルやフォーマットを整えるためには、HTMLのプレゼンテーション属性ではなくスタイルシートを使用すべきである。スタイルシートによる代替が可能なHTMLのプレゼンテーション属性は、推奨しないこととなった。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 ・<meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <meta content="text/css" http-equiv="content-style-type" /> <link rel="stylesheet" type="text/css" href="style.css" /> は<head></head>内に記述します。bodyには書けません。 ・<base target="main" /> HTMLでは空要素に/>は使いません。>です。またbase要素は使うべきではありません。 まず、デザインは一切考えずに正統なHTMLを作成してください。そのあとで、スタイルシートで好みにデザインしましょう。 HTML4.01strict雛形・・タブは＿に置換してあるので戻す。 書いたら ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) で[DATA}]タブを選択してチェック HTML(スタイルシートも)この方法で身に付けるのが最短で間違いがないです。 <!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=UTF-8"> ＿<title>タイトル</title> ＿<meta http-equiv="Content-Script-Type" content="text/javascript"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> ＿<div class="header"> ＿＿<h1>title</h1> ＿＿<div class="abstract"> ＿＿＿<p> ＿＿＿＿このページでは・・ ＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>section Title</h2> ＿＿<p> ＿＿</p> ＿＿<div class="aside head"> ＿＿＿<h3>付属文章1</h3> ＿＿</div> ＿＿<div class="aside foot"> ＿＿＿<h3>付属文章2</h3> ＿＿</div> ＿</div> ＿<div class="footer" id="DOCUMENT_INFORMATION"> ＿＿<h2>文書情報</h2> ＿</div> </body>
お礼
回答ありがとうござます。 すみません、とてつもなく機会音痴なので適当にホイホイ色んなものをつぎ込んでしまいました。 参考になりました。丁寧な解答ありがとうございます。 がんばってみますね！
関連するQ&A
- なぜか余白が…
スタイルシートでmarginを0pxに設定し、テーブルを幅100％、縦100％に設定したあとでjavascriptを設定すると、どうしても上部に余白が出来てしまいます。 javascriptを設定しないときは <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } --> </STYLE> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="1" width="100%" height="100%" bgcolor="#000000"> <TBODY><TR><TD></TD></TR></TBODY></TABLE> </BODY> </HTML> と正常なんですが、javascriptを設定すると、 <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } --> </STYLE> <SCRIPT Language="JavaScript"> <!-- document.write("<img src=cgi-bin/sasuke.cgi?sasuke="); document.write(document.referrer+"' width=1 height=1>");// --> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="1" width="100%" height="100%" bgcolor="#000000"> <TBODY><TR> <TD></TD> </TR> </TBODY></TABLE> </BODY> </HTML> のようにどうしても上部に余白が出来てしまいます。 このスクリプトを設定したときのみ、こうなるので非常に困っています。（ＨＰのデザイン上…） どなたか、よい方法がありましたら教えてください。m(__)m なお、スクリプトはアクセス解析です。 当方はwindows98 ie5.5の環境で作成しています。 javascriptはこの場合はhtml内に組み込んでいますが、××.jsで呼び出しをかけています。 よろしくお願いします！
- ベストアンサー
- HTML
- cssで投稿した画像を中央に表示たい！！！！！
blogで投稿した画像を中央に表示したい！！！！！ css詳しい人、教えてください！！！！！ 今、エキサイトブログの設定を行っているんですが、cssなど全くの初心者なので、右も左もわかりません。 そこで、現在、http://tenjikunik.exblog.jp/ のようになっています。 太陽の投稿画像をブラウザの中央付近に表示したいのですが、次のhtmlまたはcssをどう変更すべきでしょうか？助けてください。 css /* excite blog skin css */ body { margin : 0; padding: 0; background: #151414; color : #e7e7e7;} body,td,div,li{ font-size : 13px; font-family : verdana,arial,sans-serif; line-height : 150%; letter-spacing:1px; word-wrap: break-word;} a:link{ color: #cfcbc4; text-decoration: underline; } a:visited{ color: #cfcbc4; text-decoration: underline; } a:active{ color: #cfcbc4; text-decoration: underline; } a:hover{ color: #cf9712; text-decoration: none;} #im{ width:100%; clear: none;} td.im_hit{ background: url(http://image.excite.co.jp/jp/portal/im/imach_icon_orange.gif) no-repeat 0.5em 0.5em; padding: 0.5em 0.5em 0.5em 25px; cursor:pointer;cursor:hand; line-height: 100%; width: 550px;text-align:left;color:#cfcbc4;} div.im_title{font-size:x-small;color:#666;text-align:right;margin-bottom:10px;} div.im_title a{color:#666;} td.im_hit:hover{background-color:#fffee1; color:#333333;} table.im_summary{margin-top:3px;} td.im_summary {font-size:small;font-family:"Arial";line-height:160%;} span.im_url{font-size:small;font-family:"Arial"; text-decoration: underline;} span.im_titletext{text-decoration: underline;} #cmtviewfrm{ display:none !important;} #main { width:1899px; margin:0 auto; text-align:left; padding-bottom: 20px;overflow: hidden;} #Headarea{ height: 401px; width:1899px; margin: 0 auto; position: relative; } #titlearea{ width: 8020px; position: absolute; bottom: 0; left: 0; background: #a0a0a0;filter: alpha (opacity=80); -moz-opacity:0.8; opacity:0.8; padding: 10px;} div.HEADER{ font-size: 16px; font-weight: bold; line-height : 100%;} #titlearea a{ color: #fff; text-decoration:none; } #postArea{ margin-top:20px; width: 565px; float: left;} 字数が足りません。いって頂いたら開示いたします。
- ベストアンサー
- HTML
- HP全体を左寄せ配置するCSSの記述について。
HP全体を左寄せ配置するCSSの記述について。 CSS付きで中央表示の無料テンプレートを頂きました。 これを左寄せ配置で表示させる方法を教えて下さい。 (base.css) @charset "Shift_JIS"; /* 基本設定 */ *{ margin:0px; padding:0px; font-size:12px; font-family:Verdana, Helvetica, sans-serif; } body{ color:#333; text-align:center; } br{ letter-spacing:normal; } a{ color:#333;text-decoration:none; } a:hover{ color:#fff;text-decoration:none; } img{ border:0px; } /* テンプレート */ #temp{ width:500px; text-align:center; line-height:18px; letter-spacing:1px; margin:10px auto; } #header{ background:#fff url(img/cat.gif) no-repeat 0px 0px; width:500px;height:120px; text-align:left; border:1px solid #333; } #menu{ background-color:#333; width:500px;height:24px; color:#fff; margin:10px 0px; border:1px solid #333; } #main{ background:#fff; width:480px; text-align:left; padding:10px; border:1px solid #333; } #footer{ background:#fff; width:500px;height:30px; color:#333; line-height:30px; margin:10px 0px; border:1px solid #333; } /* タイトル部分 */ #header h1{ padding:30px 0px 0px 190px; } /* メニュー部分 */ #menu ul{ list-style-type:none; height:24px; margin-left:30px; } #menu li{ display:inline; padding:0px } #menu a{ color:#fff; line-height:24px; float:left; text-decoration:none; padding:0px 5px; } #menu a:hover{ color:#DB9400; text-decoration:none; } /* メインコンテンツの見出し */ #main h2{ background:url("img/mark.gif") no-repeat; padding:1px 0px 3px 25px; color:#DB9400; よろしくお願いします。
- ベストアンサー
- HTML
- テーブルが左右上下中央表示にできない。
<style type="text/css"> <!-- .tableley { text-align: center; } .tableley table{ margin-left: auto; margin-right: auto; } .tableley caption{ margin-left: auto; margin-right: auto; } bodytd{ letter-spacing :2px; line-height :15pt; font-size:80%;font-family:'Verdana'; color:#ffffff; } br{letter-spacing:normal;} body{overflow-y:hidden; margin:0;padding:0; background-attachment:fixed; } a{ text-decoration:none; color:#000000; } a:hover{ color:#808080; } --> </style> </head> <body> <table border="0" width="100%" height="100%" cellspacing="0" summary="テーブル"> <tr> <td colspan="3" style="border-bottom:1px solid #000000" bgcolor="#000000" valign=bottom><font size=5><b>SITE NAME</b></font> </td> </tr> <tr> <TD height="80%" width="250" align="center" valign="top" colspan="3"><BR> <BR> <table style="border: 1px dotted #cccccc;"> <tbody> <tr> <TD><IMG src="ConvertImage/ice.png" width="187" height="131" border="0"></TD> <TD height="120" width="200"> <div style="width: 270px; height:140px;color:#cccccc;font-size:10px;font-family:Verdana;overflow:auto; scrollbar-face-color:#000000; scrollbar-highlight-color:#000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #cccccc; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000;"><FONT color="#cecfce">ここにテキスト<BR> </FONT></div> </TD> </tr> </tbody> </table> </TD> </tr> <tr> <td colspan="3" style="border-top:1px solid #000000" bgcolor="#000000" align="right" valign="top"><FONT color="#ffffff">SINCE</a> </td> </tr> </table> </body> と、ビルダーでフレームを使わず横三分割のサイトを作ったのですが 真ん中の白い部分にあるテーブルを白ページ上下左右中央に設置出来ず悩んでいます。どうか解決策を教えてくださいお願いします。
- ベストアンサー
- HTML
- tableの分割画像 隙間について
いつもお世話になります。 助かります。 さてテーブル内画像分割についてお尋ねいたします。 画像分割をいたしたく、４分割にphotoshopでスライスいたしました。 確認画面では奇麗に表示されますが作業のサイトに収めるとcenterに 縦に１ピクセルのぐらいのラインの隙間が入ります。 サイト内の記述は.... 例えばこんな感じにしています。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <linkrel="stylesheet"type="text/css"href="css/xx.css" /> <link rel="stylesheet" type="text/css" href="css/xxx.css"> <link rel="stylesheet" type="text/css" href="css/xxx.css"> <link rel="stylesheet" type="text/css" href="css/sxxx.css"> <link rel="stylesheet" type="text/css" href="css/xxxxx.css" > <link rel="stylesheet" type="text/css"href="css/xxxxxxx.css" > <SCRIPT LANGUAGE="JavaScript"> <!-- function subwin1(){ window.open("shop01.html", "01"," width=600px,height=700px,scrollbars=yes"); scrollbars=yes} function subwin2(){ window.open("shop02.html", "01"," width=600px,height=700px,scrollbars=yes"); scrollbars=yes} --> </SCRIPT> <style type="text/css"> <!-- * { font-family: Verdana, Helvetica; font-size: 10pt; margin:0; padding:0; } h2.s{ margin:0; padding:0; font-size:13px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-weight:100; line-height: normal; color: #999999; } .style6 {font-size: 10px} .style7 {font-size: xx-small} .style8 {color: #376BA0} table { width:100%; height:auto; padding:0; margin:0; } --> </style> </hade> <body>....................]........... ........省略......... <div id="photo"> <table border=0 cellspacing=0 cellpadding=0 > <tr> <td><img src="../13.jpg" width="263" height="114" alt""></td> <td><img src="../10.jpg" width="292" height="114"/></td> </tr> <tr> <td><img src="../11.jpg" width="263" height="91"/></td> <td><img src="../12.jpg" width="292" height="91"/></td> </tr> </table> </div> <!----- photo ead-----> です。 他のものと競合するのでしょうか？ どうしてこうなるのでしょうか？ 隙間をとり前に進みたいのですが教えて頂けませんか？ お願いいたします。 表現 伝え方に誤りがありますればご容赦くださいね。
- 締切済み
- その他([技術者向] コンピューター)
- blog CSSのタイトル色の変更指定について！！
このblog CSSのブログタイトルの色変更はどうすればいいですか？ .blogtitle の所で色指定してもダメでした？他に方法があるのですか？ livedoor Blog CSS FileName: ネコさん(20040819) Version: 2006.06.26 ----------------------------------------------------- */ #header{} #header td{ color:#FFF; font-size:12px; text-align:right; padding-right:10px; } #header a:link{color:#FFF;} #header a:visited{color:#FFF;} #header a:active{color:#FFF;} #header a:hover{color:#FFF;text-decoration:none;} body{ margin:0; padding:0; text-align:center; font-family: verdana ,arial ,sans-serif; background-color: #4d9d1c; /*background:#4d9d1c url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/bg.gif') repeat-y 50% 0;*/ } a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{color:#666;text-decoration:none;} #container{ width:833px; margin:0 auto; text-align:left; word-break:break-all; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/header.gif') no-repeat; } #banner,#subbanner{ width:833px; height:185px; margin:0 auto 35px;; } #banner a{color:#fff;text-decoration:none;} #banner a:link{color:#fff;text-decoration:none;} #banner a:visited{text-decoration:none;} #banner a:active{} #banner a:hover{color:#fff;text-decoration:underline;} #subbanner a{color:#fff;text-decoration:underline;} #subbanner a:link{color:#fff;text-decoration:underline;} #subbanner a:visited{text-decoration:underline;} #subbanner a:active{} #subbanner a:hover{color:#fff;text-decoration:none;} h1,h2,h3{margin:0;padding:0;} .blogtitle{ font-size:20px; font-weight:bold; padding-top:85px; padding-right:70px; text-align:right; } .description{ color:#000; font-weight:bold; font-size:12px; padding-right:70px; text-align:right; } #categorytitlebody{} #categorytitle{ font-size:14px; font-weight:bold; text-align:center; padding:20px 10px 15px 10px; } #blogcontainer{width:755px;margin:0 auto auto 20px;background-color:#FFF;} #content{ width:564px; float:left; padding-left:10px; text-align:left; padding-bottom:50px; } #links{ width:170px; float:right; padding-bottom:50px; } .blog{} .date{ color:#4d9d1c; font-size:14px; font-weight:bold; text-align:left; margin-bottom:5px; } .title{ font-size:14px; font-weight:bold; text-align:left; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; padding-left:26px; } .blogbody{ line-height:130%; text-align:left; background-color:#f3f1e2; padding:10px 0px 0px 10px; } .main,.mainmore,.portal-links{ line-height:150%; font-size:12px; padding:18px 10px 30px 26px; } blockquote{ padding:5px; margin:5px; border:2px dotted #4d9d1c; } .pict{margin:5px;} .posted{ color:#000; font-size:11px; text-align:left; margin:0; padding:10px 15px 10px 26px; } a.posted{color:#000;text-decoration:underline;} a.posted:link{color:#000;text-decoration:underline;} a.posted:visited{text-decoration:underline;} a.posted:active{} a.posted:hover{color:#000;text-decoration:none;} .menu{ font-size:11px; text-align:right; padding:2px 15px 20px 26px; } .blogbodybottom{ margin-bottom:20px; } .comblogbodybottom{ margin-bottom:20px; } #contentcommentbottom{} .formbodybottom{} #articletop{} #articlebody{} #articlebottom{} .trackbackurlbody{ text-align:left; padding-left:10px; } .trackbackurlttl{ background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; font-size:12px; font-weight:bold; padding-left:26px; } .trackbackurl{ padding-top:10px; padding-bottom:20px; text-align:left; } .trackbackurl table{width:350px;margin:0 auto;} input.trackbackbox{width:300px;} .trackbackurlbottom{} a.posttitle:link{color:#000;text-decoration:underline;font-si
- 締切済み
- CSS
- タグについて 音楽箇所の削除
すみません。タグの初級レベルをご指導下さい。 以下のタグの中で音楽が出る箇所を削除をしたいのですが、 どこのタグ、どこからどこまでを削除すればよろしいでしょうか。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.0.0 for Windows"> <title>○○○ Top logo</title> <meta name="description" content="公式ホームページ"> <meta name="keywords" content="○○○"> <link rel="stylesheet" href="Stylesheet/Body_Stylec.css" type="text/css"> <link rel="stylesheet" href="Stylesheet/Table_TD_clear.css" type="text/css"> </head> <body style="margin-top : 0px;margin-left : 10px;margin-right : 0px;margin-bottom : 0px;"> <div style="width : 100px;height : 10px;top : 91px;left : 134px; position : absolute; z-index : 3; visibility : visible; " id="Layer3"><embed src="MIDI/Shout.mp3" height="19" width="99" autostart="true" loop="true" repeat="true" type="audio/mp3"></div> <div style="width : 411px;height : 56px;top : 1px;left : 285px; position : absolute; z-index : 2; visibility : visible; " id="Layer2"><img src="logo/kl_senior1.gif" width="372" height="59" border="0"></div> <div style="width : 434px;height : 18px;top : 73px;left : 272px; position : absolute; z-index : 1; visibility : visible; " id="Layer1">2009年度スローガン<font color="#ff0000" size="+1">『</font><font color="#ff0000" face="HG丸ゴシックM-PRO" size="+1" style="font-size : 14px;font-weight : bold;">スピーディー</font><font color="#ff0000" size="+1">』</font></div> <table border="1" width="855" cellspacing="0" cellpadding="2" style="margin-top : 5px;margin-left : 10px;margin-right : 0px;margin-bottom : 0px;"> <tbody> <tr> <td width="98" height="87"><img src="logo/logo_littleseniors_l.jpg" width="80" height="80" border="0"></td> <td width="153" height="87">更新のトッピング<br> <img src="logo/NEW-3.jpg" width="37" height="28" border="0" style="vertical-align : super;"><br> <font color="#000000">○○○○</font><font color="#ff0000"><br> </font></td> <td style="text-align : center;" align="center" width="419" height="87"><br> <br> <br> <br> <br> </td> <td align="center" style="text-align : center;" width="169" height="87">○○○ <a href="rirki.html" target="_blank">更新履歴</a><img src="logo/NEW-3.jpg" width="57" height="37" border="0"><br> </td> </tr> </tbody> </table> </body> _________ よろしくお願いします。
- ベストアンサー
- HTML
- Firefoxのみborderが消える現象
お世話になっております。 以下のソースのように、ページを左カラムと右カラムに分けて上から下までカラムをheight:100%にしているます。右カラムの左にボーダーをドットで入れているのですが、IEでは表示されるborderがFirefoxでは表示されません。解決方法をご教授お願いいたします。 <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:'Georgia', Verdana, Osaka, 'MS P Gothic'; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1001px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; overflow: show; } body > #wrapper { height:auto; } /*左カラムの設定*/ #left { width: 340px; margin: 0px; float: left; height: 100%; min-height: 100%; padding-bottom: 32768px; margin-bottom: -32768px; background-color:#00FF00 } /*右カラムの設定・IEバグ対策*/ #right { width: 660px; margin: 0px; float: right; height: 100%; min-height: 100%; border-left-width: 1px; border-left-style: dotted; border-left-color: #000; padding-bottom: 32768px; margin-bottom: -32768px; position:relative; } --> </style> </head> <body> <div id="wrapper"> <div id="left"> aaa </div> <div id="right"> aaa </div> </div> </body> </html>
- 締切済み
- HTML
- <css> ボックスの隙間について
お時間のあるときに教えていただけるとありがたいです。 cssボックスを縦に二つ（上A、下B）作ったところ、どうしてもボックスに隙間が空いてしまいます。この隙間をなくし、二つのボックスを繋げるように表示するにはどうしたらいいでしょうか。どうもマージン設定がうまくいっていないようなのですが、どこが悪いのかわからなくて困っています。 cssは外部ファイルとして読み込みました。以下にソースをなるべくそのまま貼り付けてみます。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜cssソース＞ body{ color : #fff; font-size : 11pt; text-align : left; background-color : #ff00cc; background-image : url(haikei.gif); background-repeat : repeat; } a{ color : #ffcccc; text-decoration : none; } a:HOVER{ color : #ffcccc; text-decoration : none; } a:VISITED{ color : #ffcccc; } * { margin:0px; padding:0px; } #boxA { margin:0px auto; width:650px; height:217px; padding:0; } #boxB { text-align:left; margin:0px auto; width:620px; height:350px; padding:15px 15px 5px 15px; background-image : url(haikei2.gif); background-repeat : repeat; overflow:auto; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜htmlソース＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <link rel=stylesheet type="text/css" href="haikei.css"> </head> <body> <div id="boxA"> </div> <div id="boxB"> </div> </body> </html> よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- 枠線でメイン部分を囲み、フッターを一番下にもってくるには？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#flame { width: 1000px; height:100%; margin-top: 10px; margin-left: 10px; padding: 20px; border-color: #999999; border-style: solid; border-width: 1px; } div#header { background-color:#999999; color:white; } div#container { background-color:#ffffee; } div#left { background-color: #cccccc; width: 200px; left: 0px; top: 0px; } div#content_right { background-color: #cccccc; margin-left: 210px; font-size: 10pt; line-height: 140%; left: 0px; } div#footer { width:100%; background-color:666666; color:white; } --> </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>
- ベストアンサー
- HTML
お礼
またまたご丁寧にありがとうございます。 親切な心使い嬉しいです。 まずは練習してみますね！