- ベストアンサー
ボックスの高さが設定できません。
chikottoの回答
- chikotto
- ベストアンサー率46% (23/50)
ええ、h4タグはdlより上にだしましょうね。 そしてh4に、 margin-top:○○px; とすると上にちゃんと余白ができますよ。
関連するQ&A
- ボックスに高さが設定できません。
h4タグに高さを設定して、そのボックスの一番下に文を表示させたいのですが、幅は設定できるのですが、高さが変わりません。 #wrapperの中の#contentsの中の#subconの中の#menuの中に下記のようにしています。 <h4>~</h4> <dl> <dt>~</dt> <dd>~</dd> </dl> <h4>~</h4> <dl> <dt>~</dt> <dd>~</dd> </dl> と、これをあと三回くらい繰り返しています。 <dl>や<dt>や<dd>には高さを設定できます。 なぜでしょうか？ これでわかるでしょうか？ お願いします。
- ベストアンサー
- HTML
- パディングを使ったボックス
パディングを使用してボックス内のテキストにマージンを作りたいのですが、突然いつも通りに作れなくなり途方にくれています。 例えば、200ｘ200のボックスで背景に同じく200ｘ200の画像を設定します。そしてボックス内のテキストを左上から10ｐｘほど中に寄せて表示させます。 いつもだとcssのソースは .box{ background:url(images/box.gif) no-repeat top left; width:190px; height:190px; padding-top:10px; padding-left:10px; padding-bottom:0px; padding-right:0px; } と書いてました。 しかし、突然、このままだと190ｘ190のボックスになってしまうようになりました。ちなみにfirefoxだと普通に200ｘ200のボックスで表示されます。IE6だと190ｘ190になります。 なので試しにパディングはそのままで200ｘ200にしたところ正しく表示されました。そのかわりやっぱりというかfirefoxだと210ｘ210のボックスになってしまいます。 それだけではなく100ｐｘの幅の背景画像を使ってタイトルバーを作ろうとして左のパディングを10pxにして90pxのボックスを作ったら、90pxの幅で左に10pxの余白がある状態になってしまいます。 使っているのはドリームウィーバーです(Studio8)。なにか環境設定で設定するところがあるのでしょうか？もしくはHTMLの宣言に重要なヒントがあったりするのでしょうか？ 今のところ、ハックを使用してダブルでCSSを書いていますが、調整に果てしなく時間がかかり、途方に暮れています。 どなたかお助けください。よろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- divで作成したボックスに背景画像がうまく適用させられない。余計な余白ができてしまう。
divで作成したボックスに背景画像がうまく適用させられません。余計な余白ができてしまいます。 例えば、以下のサイトの左側のメニュー欄「資料請求・お見積もり」のような枠をボックスに付けたいのです。 http://www.dai-ichi-life.co.jp/examine/search/index.html それには、 <div>○○</div>上用 <div>○○</div>真ん中用 <div>○○</div>下用 のようにボックスを三つに分け、それぞれ上用の背景画像、真ん中用の背景画像、下用の背景画像を適用して作成しました。 しかし、一番上のdivだけ画像を適用すると、必ず下に数ピクセルの余白ができてしまうのです。 .box-top { height: 7px;←画像の高さ width: 200px;←画像の幅 background-image: url(images/r-menu-box-top.jpg); background-repeat: no-repeat; margin: 0px; padding: 0px; } このようにマージンとパディングをゼロにしても数ピクセル余白が下に出ます。 なぜでしょう。
- ベストアンサー
- HTML
- h1タグの余白
h1タグを使うと文字が大きくなり、周りの余白もできてしまいますが、ＣＳＳで解消できることが調べてわかりました。 ところが、外部ファイルの記述でマージンをh1 { margin:0px; }としても下の余白はなくなるのですが、上の余白が１行改行されています。 ソースをみても問題はないように見えるのですが、どなたかお分かりの方がいらっしゃいましたらお願いします。
- ベストアンサー
- ホームページ作成ソフト
- セル内の余白について
http://www.kyoto-1-hotel.jp/index.htm 上記のＨＰのメニュー部分には余白が３POINT設定されているのですが自分で表を３段造って一番下だけ余白を入れようとすると３段全てに余白が入ってしまいます。スタイルシートのパディングでpointを３にしてみましたがセル内の余白が入りません 上記のＨＰの様にmenu部分にだけ設定する方法を教えていただきたいのですが、よろしくお願いします。
- 締切済み
- レンタルサーバ・ASP
- スタイルシートの見出しタグについて
はじめまして。メモ帳にスタイルシートを使ってホームページ作成をしています。表セル内に見出しタグを使ってクラス分けをしているのですが、どうしてもh1～h6の見出しタグを使うと、文字の下に下余白がかなり出来てしまいます。普通に文中でならいいのですが、表セル内では前後の余白が違うと見た目、かなりアンバランスになってしまうのです。 ホームページリーダーなどにも対応させたいので、どうしても見出しタグを使用したいのです。 マージンやパディングで調節しましたが、それだと下余白の分が基準で、さらに上が広がってしまい、セル幅が全体的に無駄な余白で占領されることになってしまいました。 よろしくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
- CSS IEだけがずれます。
いくら頑張ってもずれます。。 どこを変更すればよいのでしょうか？ ご指導下さい。 CSSは以下です。 /******************************************/ body{/*全体的な設定*/ margin:0px; /*全体の余白*/ text-align:center; /*センタリングIEバグ回避用*/ background: url(04.jpg) left top repeat-x; /*全体の背景の設定*/ } /******************************************/ a:link , a:visited , a:hover , a:active{ /*リンクフォントの設定*/ color: #a44; /*リンクの色*/ text-decoration: underline; /*リンク下線の設定。 } /******************************************/ #baseBlock1{/*コンテンツ全体の設定*/ font-family:Verdana, "Tahoma,Arial,sans-serif,ＭＳ Ｐゴシック",MS UI Gothic, Osaka;/*フォントの設定*/ color:#aaa; /*文字色の設定*/ margin-left:auto; /*センタリングのための左の余白*/ margin-right:auto; /*センタリングのための右の余白*/ width:850px; /*コンテンツ全体の幅*/ text-align:left; /*IEセンタリングバグ回避用。*/ font-size: 0.82em; /*文字サイズ。 文字サイズはInternet Explorerの文字のサイズ－中、Firefoxの文字サイズ－標準サイズに合わせてあります。*/ } /******************************************/ #title{/*タイトル部分*/ margin-left:10px; width:1360px; /*タイトル部分の幅*/ height:200px; /*タイトル部分の高さ*/ background:url(01.jpg) no-repeat; /*タイトル部分の背景設定*/ border:1px solid #fff;/*枠線の設定*/ } /******************************************/ h1{/*タイトル部分のフォント、文字位置の設定*/ font-size:1.3em; /*タイトル文字の大きさ 1emでbaseBlock1のfont-sizeと同じ大きさになります*/ color:#fff; /*タイトル文字の色*/ padding-top:80px; /*文字上側の余白*/ padding-left:50px; /*文字左側の余白*/ margin:0px; /*Firefoxでの余分な余白を削除*/ } /******************************************/ h2{/*サブタイトル部分の設定*/ color:#fff; /*文字色*/ padding-left:50px; /*左に余白*/ padding-top:0px; /*上に余白*/ padding-right:50px; /*右に余白*/ font-size:1.0em; /*文字サイズ*/ margin:0px; /*余白の設定*/ font-weight:normal; /*文字の太さ*/ } /******************************************/ #main{/*メインコンテンツ部分の位置設定*/ width: 1078; /*メインコンテンツの幅*/ float: none; /*メインコンテンツ位置設定*/ padding-top: 31px; /*文字上部の余白*/ padding-bottom:30px; /*フッターとの間隔*/ ; padding-left: 226px;} /******************************************/ #maintext{/*IEとfirefoxのズレ対策用*/ padding:30px; /*文字左側の余白。*/ } /******************************************/ h3{/*見出しの設定*/ border-bottom:1px solid #acf; /*下に枠線*/ border-left:4px solid #acf; /*右に枠線*/ padding-left:4px; /*左に余白*/ font-size:1.1em; /*文字サイズ*/ font-weight:normal; /*文字の太さ*/} /******************************************/ #menu{/*メニュー部分の設定。*/ width:219px; /*メニューの幅*/ float:left; /*メニュー位置設定*/ font-size:0.9em; /*メニューの文字サイズ*/ text-align:center; /*文字位置の設定 padding-top:30px; /*上に余白*/ } /******************************************/ #me-top{/*メニュー上部画像用*/ height:34px;/*高さ*/ width:228px; background:url(02t.jpg) no-repeat; /*背景の設定*/ } /******************************************/ #me-mid{/*メニュー中部画像用*/ width:224px; background:url(03.jpg) repeat-y; /*背景の設定*/} /******************************************/ #me-bot{/*メニュー下部画像用*/ height:32px; /*高さ*/ width:228px; background:url(04b.jpg) no-repeat; /*背景の設定*/} /******************************************/ #menutext{/*IEとfirefoxのズレ対策用*/ padding-left:10px; /*左の余白設定*/ } /******************************************/ .m-title{/*メニュータイトルの設定。*/ height:20px; /*高さ*/ font-size:1.2em; /*テキストサイズ*/ border:1px solid #666; /*枠線の設定*/ color:#aaa; /*テキスト色*/ background:#fff url(05.jpg) no-repeat; margin-top:0px; /*上部に余白*/ margin-left:10px; /*左に余白*/ margin-right:22px; /*右に余白*/ margin-bottom:5px; /*下に余白*/ } /******************************************/
- 締切済み
- CSS
- ホームページビルダーでの表内部の余白設定について
ホームページビルダーでの表内部の余白設定について 現在、ホームぺービルダー14を使ってホームページの作成をしています。表を用いたレイアウトにしているのですが、表内部の余白を設定する段階で、上手く設定できずに困っています。 ホームページビルダーでページや表の余白を設定するには、スタイルシートでパディングとマージンを0にするという情報を参考にして、ページとテーブル(表)の余白設定はできているのですが、セル(表内部)の余白設定がどうもうまくいきません…。スタイルシートでは、BODY、TABLE、TD、いずれも4方向余白ゼロに設定しており、ビルダーのプレデュー画面でもそれらの設定がちゃんと反映されています。 しかし、FireFoxやIEなどのブラウザで閲覧すると、なぜか表内部だけ余白が出てしまっています。 表内部の最上部に置いているのがFLASH素材であるため、当初はそれが原因だと考えていたのですが、試しに素材の上にテキストを入れてみたところ、やはりビルダーでは余白ゼロ(パディング、マージン0%)が反映されているにも関わらず、ブラウザでは表内部の上部に余白がでていました。尚、表内部の左右の余白は、ちゃんとゼロになっていました。 皆様のお力添えを宜しくお願い申し上げます。
- ベストアンサー
- ホームページ作成ソフト
- Dreamweaver MX でリストを作成すると左に余白がでてしまう。
DreamWeaver MX でCSSで画面左の位置にサイドメニューを作っています。 メニューは縦並びです。 メニューの項目を<ul><li>○○○</li></ul>のような形で記述し、CSSでulとliの左マージン・左パディングをそれぞれ０pxに指定しています。 ブラウザではメニュー項目の左に余白もなく問題なく表示されているのですが、DreamWeaver上の編集画面ではメニューの項目の左に余白がでてしまい、その分右にずれてレイアウトが崩れてしまいます。 編集画面でも左に余白がでないようにするには どうすれば良いでしょうか？ お手数ですがご解答頂けますと幸いです。
- ベストアンサー
- ホームページ作成ソフト
- cssでロールオーバーした画像が、一部だけずれてしまいます。
cssで、ulやdisplay:blockを使って、画像が８個横に並んだメニューを作り、ロールオーバーさせていたのですが、横に並んだメニューの一番左の画像だけが、マウスのオンオフに関係なく、なぜか3pxほど下に沈んでしまうのです。 始めは普通に表示されていたのですが、メニューより下の項目を色々いじっている間に、いつの間にやら下がっていました。 もしや、変なマージンやパディングがいけないのではと思い、メニュー以下の項目を全部消してみたのですが、元には戻りませんでした。 cssバグなども色々調べてみたのですが、もう本当にわかりません。 cssやhtmlをここに書きたいのですが、文字数制限にひっかかってしまうので、何かこういった現象の原因になりそうな要因、できれば解決方があれば教えていただけると幸いです。 お力を貸していただければと思います。 よろしくお願いします。
- 締切済み
- HTML