HTMLのタグの入ったセルを結合したい -ヤフオクやイーベイの出品管理をE-

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">

タグの修正に力をかしてください

ホットペッパーに出てくるお店のページのバナーのように、「アクセス」「TEL」の文字を表示させたいのですがうまくいきません。タグの修正にちからをかしていただけないでしょうか。以下、タグです。よろしくおねがいします。 <table width="702" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="color3" colspan="3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> <div style="position:relative;"><img src="images/hotpot_bannar.gif" alt="バナー" width="700" height="151"></div> <div style="position:absolute; top:70px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">アクセス</div> <div style="position:absolute; top:50px; left:450px; color:#ffffff; font-size:10px;>JR環状線：「福島駅」・・・</div> <div style="position:absolute; top:70px; left:450px; color:#ffffff; font-size:10px;>JR東西線：「新福島駅」・・・</div> <div style="position:absolute; top:120px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">TEL</div> <div style="position:absolute; top:120px; left:450px; color:#ffffff; font-size:10px;>06-****-****</div> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> </table>

ブログでのスクロール枠の設置の仕方

<div style="margin:0px;padding:0px;" align="left"><div style="margin:0px;padding:0px;line-height:1.3;width:200px;background-color:#FFFFFF;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 2px solid #66CCCC;font-family:'ＭＳＰゴシック',Osaka,sans-serif;text-align:left;font-size:100%;height:5em;scrollbar-arrow-color:#66CCCC;scrollbar-3dlight-color:#66CCCC;scrollbar-darkshadow-color:#66CCCC;scrollbar-face-color:#FFFFFF;scrollbar-track-color:#FFFFFF;scrollbar-track-color:#FFFFFF;scrollbar-shadow-color:#FFFFFF;">文章挿入</div></div></div> スクロール枠です。これをブログにはめ込んでるんですが、この枠をもう一つ横並びに貼り付けたいのですが、段落ちしてしまいます。改行はしてないので、それでの段落ちではないです。お分かりになる方、よろしくお願いします。ライブドアブログです。

囲み線の上線が表示されません

囲み線の上線が表示されません。以下のタグのどの部分が悪いのかわかりませんので、教えていただけないでしょうか。よろしくお願いします。 <div style=\"position:absolute; top:70px; left:400px; height:100px;\"> <font color=\"#ffffff\" size=\"2px\" style=\"border:solid 1px; padding:2px;\">アクセス</font></div>

HTML・CSSタグの書き方教えてください！

画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、変わらず…。どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？よろしくお願いいたします。＜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-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" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div> <div id="main"> <div id="contents"> ***コンテンツ*** </div> <div id="leftsidebar"> ***左サイドバー*** </div> </div> <div id="rightsidebar"> ***右サイドバー*** </div> <div id="footer"> ***フッター*** </div> </div> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }

ＷＥＢ上とＰＣ上で　font が・・・

<Div style="width:200;height:100;overflow:auto; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; "> <table style="font-size: 12px; padding: 3; width: 180px;"><tr><td> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ </td></tr></table> </Div> これをＰＣ上で表示すると、font 12px になりますが、ＷＥＢ上で表示すると、何故か 12px より大きくなります。何故そうなり、どうやったらＷＥＢ上でも 12px　になりますでしょうか？

HTML　いじったらデザインが崩れました。

ホームページ作成について。初心者です。大変困っています。初心者ながらも空いた時間を使い、コツコツ作成してきたのですが、ある日なにをどういじったのかデザインがガラッと崩れてしまい、修復不能なまま１週間戦い続けましたがもう駄目です。どなたかお分かりになる方、どうかどうかご教授願います。テーブルとテーブルの間に <p style="font-family: MS 明朝;font-size: 20pt">ＰＩＣＵＰ<span> / 注目商品</span></p></div>を入れたいのと、サブメニューがかなり下にずれこんでしまったので、上に戻したいです。ＨＴＭＬ↓（文字数が多いので一部省略しています） <std{border: 1px botted #000000;} .uenashi td{border-top:0px;} .hidarinasi td{border-reft:0px;} {width:230px;height:230px} </style> <STYLE> TABLE.dotBorder { border-collapse: collapse; border-style: dotted frame: void magin-left: 100px; } TABLE.dotBorder TD{ width: 200px; height: 50px; border: 1px dimgray dotted; } </STYLE> <body> <div align="center"> <div id="field_spc"> <div id="logo_mono"> <img src="img/monochrom5.png" alt="monochrom" style="margin: 0; paddin:0;"> </div>  <div id="top_waku"> <img src="img/bords.jpg" width="950" height="500" alt="モノクローム"> </div>  <div id="main_spc"> <Table class="dotBorder"> <tr align="right" valign="bottom"> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品７月３０日～発売予定"> 1.新商品</td> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品７月３０日～発売予定"> 2.新商品</td> </tr> <tr align="right" valign="bottom"> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品７月３０日～発売予定"> 1新商品</td> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品７月３０日～発売予定"> 2新商品</td>  <div id="sub_spc"> <img src="img/menu.png"> <div class="midashi"> <span class="big">ＭＥＮＵ</span> </div> <div class="column"> <a href="./index.html">1.トップページ</a><br> <span class="hutomoji">2.テーマ</span><br> <a href="./link.html">3.リンク</a> </div> どなたかお願いします・・・ＣＳＳはこちらです↓ body { background-image: url(); margin-top: 0px; margin-bottom: 0px; margin-left: 0%; margin-right: 0%; padding: 0px; text-align: center; line-height: 150%; font-family: ＭＳゴシック,sans-serif; color: #333333; font-size: 14px; } #field_spc{ width: 1000px; margin: 0px 0px; background-image: url(img/.jpg); padding: 0px 10px; } #logo_mono { width: 70px; height: 70px; margin: 0; margin-bottom: 0; padding: 0; } #top_waku { width: 950px; line-height: 350px; margin-top: 0px; margin-bottom: 20px; border: 3px ridge #ffff00; background-color: #ffffff; padding: 0px 0px 0px 0px; text-align:; } #menu_block { margin-top: 10px; font-size: 25px; font-family: cursive; } #news_1 { margin-top: 40px; margin-left: 20px; text-align: left; } #main_spc { width: 40%; margin-top: 0px; margin-bottom: 20px; margin-left: 60px; margin-right: ; padding: 0px 10px; text-align: left; float: left; } #sub_spc { width: 22%; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 20px; padding: 0px 0px; text-align: left; float: right; } #tb2 { width: 70%; margin-top: 0px; margin-bottom: 20px; margin-left: 60px; margin-right: ; padding: 0px 10px; text-align: left; float: left; } .fe { clear: both; } .ao_waku { background-color:gray; margin-top: 10; padding-bottom: 5; h2 { font-size: 18px; color: #ffffff; display: inline; } p { margin-top: 0px; } strong { font-size: larger; background-color: green; color: white; padding: 3px 5px; } .hutomoji { font-weight: 700; } .black { color: #000000; } .red { color: #ff0000; } .blue { color: #0000ff; } .gray { color: #808080; } .green { color: #008000; } .big { font-size: 18px; font-weight: 700; } .midashi { width: 90%; background-color: #dd9900; padding: 5px; border: 2px solid #dd9900; text-align: center; color: #ffffff; } .column { width: 90%; margin-bottom: 20px; background-color: #ffffff; padding: 5px; border: 2px solid #dd9900; text-align: left; line-height: 120%; color: #333333; } a:link { text-decoration: underline; color: #0000ff; } a:visited { text-decoration: underline; color: #0000ff; } a:hover { text-decoration: underline; position: relati

フレームHTMLについて。

サイトを作るにあたって、画面を二分割にしようと思っていますが、どうにも作る事が出来ません。サイト様を見ても分からない上に、とりあえず解説通りに実行しても良く分からない事になる。・・そんな状態がかれこれもう4ヶ月になります。もうサイト自体を諦めようか・・と思いましたが、最後にここで質問をして諦めるかどうかを決めようと思っています。そんな私が恥を忍んでお願いをします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja">  <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css">  </style> </head> <body> <div class="leline"></div> <div class="leline2"></div> <div class="main"> <h1>Site Title</h1> <div class="menu">■ <a href="#">What's New</a></div> <div class="menu">■ Sitemap</div> <div class="menu"><span style="color: #AA4548">■</span> Text <span style="font-size: 8pt">- 12/13</span></div> <div class="menu">■ Photo</div> <div class="menu">■ Bookmark</div> <div class="text"> ［一言スペース］<br> <br><br><br> </div> <div class="bottom">Since 2001.12.10 // E-mail</div> </div> </body> </html> ↑これに既にフレームを付けた状態のHTMLを切実に待っています。これをインターネットで表示すると、http://wdt.pekori.jp/template/top/007/007_gray.html←の様になります。

ＨＴＭＬタグの質問です!詳しい方お願いします

<div style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; OVERFLOW-Y: scroll; BORDER-LEFT: #ffffff 1px solid; WIDTH: 395px; BORDER-BOTTOM: #ffffff 1px solid; HEIGHT: 523px"></div> というタグに背景画像を入れたいのですが、背景を動かすと後ろ(もとの背景)ごと動いてしまいます。やっぱり不可能なのでしょうか？

HTML&CSS DIVをぴったりと縦に並べたい

HTML&CSS初心者です。下記のソース様に、DIVで一つにまとめたBOXを縦に並べたいのですが、「見出し002」の上のマージンがうまく取れずに困っています。 .box内のphoto00.jpgをフロートにしている為、フロートが悪さをしている事を考え、「見出し002」の上のDIV内に<br style="clear: both;" />を入れると、余白が生まれるのですが、 MacのSafariとFirefoxでは、余白の差が出てしまいます。（Safariの方が余白が大きい） <br style="clear: both;" />を入れないと、上のマージンはほぼ消えてしまい、わずかにFirefoxの方では余白が生まれます。ちなみにこの現象は「ここにテキストが入ります。」の行数を減らすと解決するのですが、下記のソースでも、photo00.jpgの高さをはみ出す行数ではない為、この<div class="box">に変な膨らみを持たせたくありません。どなたか解決法を教えて下さい。よろしくお願い致します。【HTML】 <div id="main"> <div class="mds01"><h3><em>見出し001</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p><br style="clear: both;" /> </div> <div class="mds02"><h3><em>見出し002</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> </div> 【CSS】 /*メイン大枠部分*/ #main { margin: 0px; padding: 0px; width: 627px; float: right; background: #FFFFFF; height: auto; } /*各見出し*/ .mds01 h3 { background: url(img/mmds01.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } .mds02 h3 { background: url(img/mmds02.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } /*ボックス*/ .box { margin: 0px; padding: 0px; height: auto; width: 587px; clear: left; } /*ボックス内・画像とテキスト*/ #main .box img { float: left; padding-right: 10px; } #main .box h5 { font: bold 14px "ＭＳＰゴシック", Osaka; color: #022962; margin: 0px 0px 10px; padding: 0px; } .txt { font: normal 13px/16px "ＭＳＰゴシック", Osaka; color: #333333; margin: 0px; padding: 0px; } em { visibility: hidden; }

直接書き込むCSSを外部ファイルに設定したい

CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。タグに直接書き込むタイプのCSSが多いのですが、このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思っているからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>

addressタグを入れると揃わない

かなり簡素なページをデザインしていますが、フッターの画像をaddressタグではさむと、フッター画像だけ20ピクセル程右に寄ってしまい全体が揃いません。addressを除くと揃うのですが。ページのソースは htmlファイル <div id="wap"> ここにSWFファイル <div id="nav"> <ul> <li>～</li> </ul> </div> <address><img footer.jpg" /></address></div> CSSファイル #wap { width: 800px; height: 570px; text-align: left; margin-right: auto; margin-bottom: 50; margin-left: auto; position:absolute; left:50%; top:50%; margin-top: -285px; margin-left: -400px; } #nav { background-color: #666666; margin-top: 0px; margin-bottom: 0px; font-size: 12px; color: #FFFFFF; float: left; width: 100%; } #nav ul { list-style-type: none; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 28px; } #nav li { display: inline; padding: 0px; } 全体を#wapに入れて上からSWF、リストタグのナビ、画像のフッターと入った大変簡素なページですが、フッターの画像をadreesタグで挟むとフッター部分だけ左に20ピクセル程ずれて揃わなくなります。どなたか解消出来る方おられませんでしょうか。

CSS-paddingが反映されません

入れ子にしたCSSなのですが中にいれた方のボックスのpaddingが反映されません。 CSS---------------------------- #main { width:540px; float:left; background-color: #FFFFFF; padding-right: 25px; height: 100%; } #main2 { width:500px; background-color: #FFFFFF; padding-right: 20px; padding-left: 20px; } HTML---------------------------- <div id="main">□□□□□□□□□□□□□ <div id="main2">□□□□□□□□□□□□□</div> </div> 「main2」というボックスの左右に余白を作りたいのです。ご教授ください。

float: leftで横に並べたら、サファリだけ

float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。ＩＥやファイヤーフォックスではピッタリ表示できています。問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト１</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト２</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト３</span> </p> </div> どうすればサファリの隙間を消せるでしょうか？

CSS　〈address〉タグで囲んだ部分を最下部に表示したい

CSS　〈address〉タグで囲んだ部分を最下部に表示したいお世話になっております。 CSSでサイトを構築しようと考えております。その際にコピーライト部分を〈address〉～〈/address〉タグで囲み、その部分をページの最下部に表示したいのですがそれが出来ずに悩んでおります。よく『containerの全長（例えば500px）のheightを指定して、main（450px）とfooter(50px)でそれぞれにも高さを指定すればよい』との解答を見かけますが、私が考えるのはもっと単純に『ページの最下部に表示』をしたいのです。例えばテーブルタグを使えば【vertical-align: bottom】で簡単に実践できますがこの表現方法はスマートとは言えません。過去ログを検索したところ・・・ http://okwave.jp/qa/q2859912.html の質問サイトに私と全く同じ症状に悩み、解決した方への回答があるのですが、解答と同様に私のサイトにタグを適用しても解決出来ず困っております。【index.html】（--ページヘッダは省略--） <title>タイトル</title> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> </style> </head> <body> <div id="container"> <div id ="header"> <h1>こんにちは</h1> </div> <ul> <li><a href="index.html">top</a></li> <li><a href="schedule.html">schedule</a></li> </ul> <div id="main"> <h2>Welcome!!</h2> </div> <address>Copyright©</address> </div> </body> </html> 【style.css】 @charset "utf-8";body , html { height: 100%;} body {color: #444444;} div#container {border: solid 2px #aaaaaa; padding: 20px; width: 500px; height: 100%; background-color: #ffffff; margin-left: auto; margin-right: auto} div#header {background-color: #111111; padding: 5px 20px;} h1 {font-size: 1.25em; font-family: Verdana, Helvetica, sans-serif; color: #66aa66} h2 {font-size: 1em; padding-left: 20px; padding-bottom: 3px; maragin-bottom: 10px; border-bottom: solid 2px #999999; background-image: url(freeback65.gif); background-repeat: no-repeat} ul {list-style-type: none; margin-left:0; background-color: #888888; padding-left:0; padding:3px 20px} li {display: inline; padding-right: 10px; color: #ffffff} li a {text-decoration: none; color:#ffffff} li a:hover {background-color:#bbbbbb} p {font-size: 0.75em; padding-left:10px} address {font-size: 0.625em; font-style: normal; color: #2d444f; text-align: center; text-valign: bottom;} この状態でwebで見ますと、肝心のアドレス部分は#container内の <p>タグの直下に表示されます。私の希望としましてはcontainer内の一番下に表示されるのが理想です。ご教授よろしくお願いいたします（タイトルミスで間違えてマルチ投稿になっちゃいました）

ホームページビルダーでスタイルシートを使ったのですが？

今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }

ページの一番上にできた余分な余白の消し方

ページの一番上に800×100の画像を用意し、それを背景画像として設定。その上に<h1>のタイトルを表示しようとすると、背景画像の上に無駄な余白ができてしまいます。何か間違えているのでしょうか？この余白の消し方を教えてほしいです。よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>

IE7で見出しタグ(hタグ)をみるとずれる

サイトを作成してIE7で躓いてます。 <div class="box"> <div class="top"></div> <div class="mid"></div> <div class="under"></div> </div>と <div class="box">で囲みtopとmidとunderで3等分してます。 <div class="top">をpddingで上部を10px幅をあけてます。中に<h3>の見出しタグを入れてます。 IE8以降クローム Firefox　では10px分の幅の後に、<h3>タグが入ります。 IE6はアンダースコアハックしました。 IE７ですと<div class="top">で設定したpddingが無視されて<h3>との間に空白ができません。 IE7でも他のブラウザと同じように表示されるようにするにはどうしたらよいでしょうか？検索で探してみたものの見つからなかったので解決法または、解決法が記載してあるサイトを教えていただけますでしょうか？よろしくお願いいたします。 ■test.html <div class="box"> <div class="top"> <h3>■■■■■</h3></div> <div class="mid"> ●●●この部分は文章の長さで伸びます●●●● </div> <div class="under"> </div> </div> ■CSS body{ font-family: "メイリオ", "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 75%; line-height: 2; color: #333333; margin: 0px; padding: 0px; } h1 h2 h3 h4{ padding:0; margin:0;} .top{ width: 690px; height:70px; color:black; background: url(img/top.gif) no-repeat; padding:10px 30px 0 30px; } .mid{ width: 690px; min-height: 200px; color:black; background: url(img/mid.gif) repeat-y; padding:0px 30px 0 30px; } .under{ width: 690px; height: 20px; color:black; background: url(img/under.gif) no-repeat; } h3{ line-height: 20px; color:blue; font-size:17px; }

XHTML、CSSレイアウトでフッターを常に最下部に配置するには?

フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッターだけ最下部に表示されコンテンツ部分がついてきません。ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }

divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

divタグ+CSSでレイアウトしようとしています。横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？

HTMLのタグの入ったセルを結合したい

みんなの回答

関連するQ&A

EXCELでHTMLのタグの入ったセルを結合したい

タグの修正に力をかしてください

ブログでのスクロール枠の設置の仕方

囲み線の上線が表示されません

HTML・CSSタグの書き方教えてください！

ＷＥＢ上とＰＣ上で　font が・・・

HTML　いじったらデザインが崩れました。

フレームHTMLについて。

ＨＴＭＬタグの質問です!詳しい方お願いします

HTML&CSS DIVをぴったりと縦に並べたい

直接書き込むCSSを外部ファイルに設定したい

addressタグを入れると揃わない

CSS-paddingが反映されません

float: leftで横に並べたら、サファリだけ

CSS　〈address〉タグで囲んだ部分を最下部に表示したい

ホームページビルダーでスタイルシートを使ったのですが？

ページの一番上にできた余分な余白の消し方

IE7で見出しタグ(hタグ)をみるとずれる

XHTML、CSSレイアウトでフッターを常に最下部に配置するには?

divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

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

HTMLのタグの入ったセルを結合したい

みんなの回答

関連するQ&A

EXCELでHTMLのタグの入ったセルを結合したい

タグの修正に力をかしてください

ブログでのスクロール枠の設置の仕方

囲み線の上線が表示されません

HTML・CSSタグの書き方教えてください！

ＷＥＢ上とＰＣ上で font が・・・

HTML いじったらデザインが崩れました。

フレームHTMLについて。

ＨＴＭＬタグの質問です!詳しい方お願いします

HTML&CSS DIVをぴったりと縦に並べたい

直接書き込むCSSを外部ファイルに設定したい

addressタグを入れると揃わない

CSS-paddingが反映されません

float: leftで横に並べたら、サファリだけ

CSS 〈address〉タグで囲んだ部分を最下部に表示したい

ホームページビルダーでスタイルシートを使ったのですが？

ページの一番上にできた余分な余白の消し方

IE7で見出しタグ(hタグ)をみるとずれる

XHTML、CSSレイアウトでフッターを常に最下部に配置するには?

divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

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

ＷＥＢ上とＰＣ上で　font が・・・

HTML　いじったらデザインが崩れました。

CSS　〈address〉タグで囲んだ部分を最下部に表示したい

カテゴリ
一覧

専門家に質問してみよう
専門家登録