- ベストアンサー
DreamweaverMXで隙間をなくす方法
現在dreamweaverMXでHpを製作しており、どうしてもページの一番上にある画像のその上の隙間を消す方法がわかりません。 画像を上部にピタっと貼り付けたいのです。 本屋でみた解説書によるとdivタグをheaderにかえてどうたらとかかいてあり、試してみたのですがどうにもうまくいきません。 自己満足の問題なのでこれができないとHPが公開できないとかではないのですが前からどうしても解消したい問題の１つでもあります。 どうがご教授ください、よろしくおねがいしますm(_ _)m
- Takashenka
- お礼率100% (1/1)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
cssに body{margin: 0;} と書いたら、隙間がなくなりました。
関連するQ&A
- 要素間、要素内に隙間が空く
CSSを組んでいて、どうしても理由がわからない現象が２つあります。以下のソースは簡略化しています。 １．隣接する要素間に隙間があく <header> <div id="branding">...</div> <nav id="access">...</div> </header> となっており、 div#branding,nav#access {margin:0;padding:0;} を指定しているのに、両者に隙間があいてしまいます。（floatなども指定していません） ２．<div>内の要素の<table>の上部にだけ隙間があく <aside id="sidebar"> <div id="calendar_wrap"> <table>...</table> </div> ： </aside> となっていて、 table { margin:0; padding:0; } と指定しているのに、tableの上部にだけ隙間があいてしまいます。他にtableに関してスタイルを指定している箇所はありません。 インスペクタで見ても、謎の空白があるだけです。positionは全てstaticで、明示的に位置を指定するようなこともしていません。その他の部分は同じように指定しているのに、これら２つだけが意図しないように表示されてしまいます。 一般論として、どのような場合にこのようが現象が起こりうるのでしょうか。
- 締切済み
- CSS
- IEのdivの間の隙間
こんにちは。 dreamweavercs5使っています。 headerとnavi間に隙間ができて困っています。 記述としては <div id="header"> .... </div> <div id="navi"> <p><a href=...html><img src=...></a> <p><a href=...html><img src=...></a>・・・ </div> というようにnaviの左上から画像を右に詰めています。 googlechrome１０ではheaderとnavi間に隙間なく表示されますが IE８だと１？ピクセル隙間ができます。 marginは上下０にしましたがそれでも変わりません。 imgのcssに img{vertical-align:bottom;} と入れても治りません。 CSSレイアウトではきちんと繋がっているので問題ないのですが・・・
- ベストアンサー
- ホームページ作成ソフト
- divの間にすき間ができる
入れ子にされたdivとdivの間で隙間ができて困っております。 構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、 入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi"> を表示させるつもりですが、<div id="header2">と<div id="navi">の間に ブラウザで見たときに隙間ができてしまいます。 どうすれば隙間無く表示させることができるでしょうか？ <div style="clear:both"></div>を入れてみては？と言われましたので 入れてみましたが効果はなく困っております。 【html部】 <div id="header2"> <h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1> <div class="headnavi"> <ul> <li id="access"><a href="access/index.html">地図・連絡先</a></li> <li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> <div style="clear:both"></div> </div> <div id="navi"> <ul> <li id="aboutus"><a href="about_us/index.html">会社案内</a></li> <li id="works"><a href="works/index.html">業務紹介</a></li> <li id="enviro"><a href="enviroment/index.html">環境方針</a></li> <li id="carrier"><a href="carriers/index.html">採用情報</a></li> </ul> </div> 【スタイルシート】 #header2 { height: 80px; margin-bottom: 0px; padding-bottom: 0px; } #header2 h1 { padding-top: 0px; margin: 0px; float: left; padding-bottom: 0px; padding-left: 14px; } #header2 .headnavi { height: 24px; margin-right: 14px; } #header2 .headnavi ul { padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; float: right; height: 24px; } #header2 .headnavi li { text-indent: -9999px; display: inline; list-style-type: none; } #header2 .headnavi li a { text-decoration: none; display: block; height: 24px; overflow:hidden; float: left; } /*------off----- */ #header2 .headnavi li#access a { width:124px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; } #header2 .headnavi li#inquiry a { width:125px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px 0px; } #header2 .headnavi li#sitemap a { width:121px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px 0px; } /*------hover------- */ #header2 .headnavi li#access a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: 0px -24px; } #header2 .headnavi li#inquiry a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px -24px; } #header2 .headnavi li#sitemap a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px -24px; } <div style="clear:both"></div>
- 締切済み
- レンタルサーバ・ASP
- ナビゲーションバーを配置すると隙間ができてしまいます・・
adobeのＣＳ４シリーズのphotoshop,illustrator,fireworksのいずれかを使ってナビゲーションバーを作りたいと思っています。 今回、fireworksを使用して画像をボタン化、そしてアップ画像やダウン画像を作成、最後にアクティブ領域（ボタンと同じ大きさ）を指定してdreamweaverでdivタグの中に挿入しました。divはcssで横幅805に指定してあります。 ナビゲーションバーはボタンが6つ横並びにあり、横幅は全部で760です。 ナビゲーションバー単独でブラウザにて確認した際は隙間などなかったのですが、dreamweaverに挿入するとdivの横幅805を超えてナビゲーションバーのテーブルは900近くの幅で表示されています。 ボタンとボタンの隙間は1ピクセルずつに設定したはずが、20ピクセルほども空いています。 どこの設定を誤ったのか全く分からないので、こちらでご相談させていただきました。 解決法、おわかりの方いらっしゃいましたらお願いします。
- ベストアンサー
- ホームページ作成ソフト
- IE以外のブラウザで隙間ができる
お世話になっております。 上テーブルと下テーブルを隙間なく配置したいのですがIE6,7以外のブラウザだと3pxくらいの隙間ができてしまいます。厚かましいお願いで恐縮ですが、下記タグをチェックしていただけないでしょうか…。 <table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat"> <tr><td height="30"> </td></tr> <tr><td>ここに文字を入れています</td></tr> <tr><td height="30"> </td></tr> </table> <div class="test"><br> <table width="758" border="0" cellpadding="0" cellspacing="0"> <tr><td>ここも文字</td></tr> </table> </div> 上のテーブルには背景画像を指定しており、下テーブル部分に色をつけたいのでdivを使いCSSを適応させています。(デザイン上、下テーブル背景に色をつけるのではダメなので) これが問題なのかと思い、divタグを消してみたりしましたがだめでした。 div"test"のCSSは .test{ margin:0px; padding:0px; background-color:#333333; border-bottom:solid 1px #999999; width:758px; height:262px; } としています。 本当に厚かましいお願いで恐縮ですが、ご教授いただけるととても助かります。どうぞよろしくお願いします。
- ベストアンサー
- HTML
- ブロックとテーブルの間の隙間
<div id="content"> <div id="main"> <table border="1" frame="hsides" rules="rows"> <tr><td > カラー</td></tr> </table> </div> <div id="left"> <div><img src="images/side.png" class="alphafilter" /></div> </div> </div> 上記のようにスタイルシートでメイン、レフトの２カラムを設定し メインの中に表組みを設定するとメインの上とテーブルの間に 大きい隙間が出きて、レフトの画像と段違いになります。 どうしてそうなるんでしょうか？ チェックしたことを記します。 ○レイアウトに問題はありません。同じレイアウトの他のページは隙間がありません。 ○ブロックとテーブルの間にひらがな表示で隙間を作ったことはありません。 ○テーブルの寸法はブロックに収まるものになっています。 同じような現象にあった方いらっしゃいませんか？解決方法を 教えてください。
- ベストアンサー
- HTML
- CSSで画像を中央配置（センタリング）する方法について伺います。
CSSで画像を中央配置（センタリング）する方法について伺います。 ※ボックスのセンタリングではなくて、ボックス内の画像のセンタリングです。 単純に text-align:center; で中央配置されましたが、テキストが入っていないボックスでも、このタグで文法的には問題ないのでしょうか？ header内にphoto.gif画像が入っている場合。 CSS #header{text-align:center;} HTML <div id="header"> こんな単純で良いのでしょうか？ 初心者なので、とんちんかんな質問だったら申し訳ありません。
- ベストアンサー
- HTML
- スタイルシート DIVとDIVの間に隙間ができてしまいます。
DIVとDIVの間に１０ピクセルほどの隙間ができるのはなぜでしょうか？ ｈｔｌｍは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE>タイトル</TITLE> <link rel="stylesheet" href="style_1.css" type="text/css"> </HEAD> <BODY> <DIV id=site> <DIV id=header> <DIV id=top-logo><IMG src="logo2.gif" border="0" alt="ロゴ"> </DIV> <hr color="#ffccff" width="750" height="2"> </DIV> </DIV> </BODY> </HTML> 上部の方はよくわからなくてホームページビルダーのをコピーして、残りはメモ帳で手打ちしました。 スタイルシートは、全て手打ちです。 *{ margin:0px; padding:0px; } #site { width: 760px; border: 2px solid pink; font-size: 90%; line-height: 150%; margin:0px; padding:0px; border: 1px solid red; } #header { width: 760px; border: 1px solid blue; } #top-logo { FLOAT: left; border: 1px solid green; } #siteと#headerの赤と青のボーダーはぴったりくっついているのに、#top-logoの上に隙間があります。 ｈｒの線の下にも１０ｐｘ分くらいの隙間があります。 なぜこのような隙間ができてしまうのでしょうか？
- ベストアンサー
- HTML
- FFにおけるDIVタグ間の隙間について
たびたびお世話になります。 自分なりにあちこち検索したのですが、解決できるものが見つかりませんでしたので、質問させていただきます。 今回初めてCSSを使ってHPを作成しているのですが、部分的に<DIV>～</DIV>と<DIV>～</DIV>の間に10px程の隙間が発生します。 IE系のブラウザでは特に問題ないのですが、Mozila系で再現されるようです。 どのようなタグを挿入、あるいは削除すれば解決できるでしょうか？ 以下、該当部のタグになります。 【html】 <body> <div id="header"> <a href="http://****.jp/"> <img src="../img/images/images/title.jpg"width="207"height="33"> </a> </div> <div id="topphot1"> <div id="topphot2"> <!-- TOP画像入れ替える時はここのファイルを変更。横711px縦150pxのもののみ --> <img src="../img/topphoto.jpg" width="711px" height="150px" /> <!-- ↑↑↑ --> </div> <div id="q_menu"> <ul class="q_menu"> <li><a href="#"><img src="../img/icon_m.gif" width="23" heigh="23" /></a></li> <li><a href="#"><img src="../img/icon_s.gif" width="23" heigh="23" /></a></li> <li><a href="#"><img src="../img/icon_r.gif" width="23" heigh="23" /></a></li> </ul> </div> </div> <div id="m_menu"> <ul class="m_menu_ro"> <li><a href="#" class="bbs"></a></li> <li><a href="#" class="battle"></a></li> <li><a href="#" class="event"></a></li> <li><a href="#" class="hunt"></a></li> </ul> </div> 【css】 #header{ padding:0 auto 0 auto; margin:0 auto 0 auto; background-color:#7fd137; color:#ffffff; width:800px; height:33px; } #topphot1{ margin:0 auto 0 auto; padding:0 auto 0 auto; position:relative; background-color:#edf2e9; background-image:url(../img/images/HP_03.jpg); background-repeat:no-repeat; background-position:center; color:#696969; width:800px; height:220px; text-align:center; } #topphot2{ margin-top:8px; padding-top:8px; margin-left:auto; margin-right:auto; position:relative; color:#696969; width:711px; height:150px; text-align:center; } #q_menu{ position:absolute; left:50px; bottom:10px; } ul.q_menu{ width:69px; height:23px; margin:0px; padding:0px; } ul.q_menu li{ float:left; } 不慣れなもので、タグ自体がちょっと滅茶苦茶なカンジもするのですが…。 aタグ周囲の改行の削除、vertical-alignをbottomに設定するなどでは解消できませんでした。 よろしくお願いします。
- ベストアンサー
- HTML
- HPビルダー 画像挿入の隙間につて
ホームページビルダーVer11を使用しています。 ページ一番上に画像を挿入したのですが、 画像上にどうしても隙間が出来てしまいます。ページ上部へ ぴったりとくっつけたいのですが、方法はありますか？
- 締切済み
- ホームページ作成ソフト
お礼
見事きえました！！ 本当にありがとうございます！！ 感謝感激です！！ 本当にありがとうございました！！！！