- ベストアンサー
padding-rightの指定がきかずにこまっています。
padding-rightの指定がきかずにこまっています。 原因はいろいろ考えられるとおもいますが、 padding: 15px 18px 20px 15px;としていしても、添付画像のようにテキストが右側にはみだしてしまいます。初心者なのでどこがおかしいのかよくわかりません。考えられるソースの間違いはチェックしてみました。どなたか原因が考えられる方、回答よろしくおねがいします。
- eriko123
- お礼率73% (14/19)
- デザイナー・クリエイティブ職
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> padding: 15px 18px 20px 15px;としていしても、添付画像のようにテキストが右側にはみだしてしまいます。 ちょっと小さ過ぎてはっきりは読めませんが、添付画像のイメージを見る限りでは「はみだして」しまうとおっしゃっているテキストは1バイト文字がスペースを空けずに連続（例えばhogehogehogehogehoge…という具合に）している様に見えます。 もしそうであれば、現在の表示は当然の結果となります。1バイト文字の連続は、1ワードと見なされ、途中で改行がされない仕様になっています（通常の単語では、そんなに長い1バイトの文字列は存在しませんので。）。その連続が本来そのコンテナブロックに設定された描画領域（幅）よりも長ければ、余白の有無に関わらずはみ出して表示されます。 日本語で「テキストテキストテキスト…」とかと入れてみて下さい。ちゃんとpadding-rightも効いて規定の幅で折り返しませんか？
関連するQ&A
- paddingを指定すると、marginが広がります。
はじめまして。 現在CSSでHPを作成しているのですが、タイトルにあるように、paddingを指定すると、marginが広がってしまいます。 topのpaddingを指定するとtop-marginが・・・ bottomを指定すると・・・ のような感じです。 原因と解決方法を教えていただけないでしょうか？ #news { width: 180px; height: 110px; background-image: url(img/news.gif); margin-top: 15px; padding-top: 30px; background-repeat: no-repeat; padding-bottom: 20px; padding-left: 20px; } レフトに配置しています。
- ベストアンサー
- HTML
- padding-leftがききません。。。
padding-left効かないです...原因教えて下さい。 ソースは以下です。 <div id="right"> <div class="plofile"> </div> </div> #right { width:250px; float:left; overflow:hidden; } .plofile { width:190px; height:265px; padding-left:10px; float:left; margin-top:35px; background:url(plofile_bg.png); padding-left:20px; }
- 締切済み
- HTML
- IE6だとpaddingで指定したぶんだけ消えてしまう。。。
いま、CSSでサイトつくっているのですが、IE6だけpaddingで指定した分だけ、画像（背景）が足りません。 <h2>と<p>をくっつけて一枚の背景画像を作ろうとしています。 解決するには宣言を変えるか、CSSハック？をする、もしは<div>を入れ子するしかないのでしょうか？ また、<div>を入れ子にするのはよくないと教えていただいたのですが、どれくらいまでが許容範囲でしょうか？ いつもwrapperで囲っているので、大枠のレイアウトを作るだけでもすでに１つ入れ子状態なんですが・・・ <h2>あああああああああああああああああ</h2> <p>あああああああああああああああ </p> .h2 { background-image: url(img/flow6_01.gif); height: 37px; width: 650px; text-indent: -9999px; float: left; margin-bottom: 0px; } #p { width: 625px; height: 120px; float: right; background-image: url(img/flow1_02.gif); margin: 0px; margin-bottom: 10px; background-repeat: no-repeat; padding-left: 25px; }
- ベストアンサー
- HTML
- Firefox と IE での padding の認識の違いについて
CSS にて padding の記述をしているのですが、IE と Firefox で padding の認識の仕方が違い困っております。 例えば、幅100px の枠に左右の padding を 10px 指定した場合、幅100px の内に 10px の padding を取るのが IE であり、幅100px の外側に改めて padding 10px 取る（最終的に幅が120pxになる）のが Firefox であるようにです。 CSS例 #header { float: left; padding: 0 20; width: 100; height: 20; text-align: right; } このIE と Firefox の違いを解決する方法をご存知の方いらっしゃれば教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- Firefoxでpaddingが反映されません。
現在WEBサイトを作っているのですが、IEとFirefoxで確認を行ってみたところ、IEでは正しく表示されるのですがFirefoxだとうまく表示されません。 paddingの指定なんですが、Firefoxだけうまく寄ってくれません、何がいけないのでしょうか（T_T） CSS部分は以下のようになります。 .menu { color: #000000; padding : 5px 0px 0px 30px; font-size : 14px; text-align: left; font-weight: bold; text-transform: uppercase; letter-spacing: .3em; } 問題はpaddingの30pxというところで、左側から30px離したいのですが、全く変わりません。 分かる方いましたら、アドバイス宜しくお願いいたします。
- ベストアンサー
- HTML
- ウェブデザイン paddingとwidthについて
はじめまして。 http://www.e-washizu.co.jp/ こちらのサイトの横幅は７８６pxですが、 そのうち影画像分の６pxを引くと７８０pxです。 しかしcssを見たところ、 <div id=main>部分のwidth幅は７６０ピクセルになっていて、 padding-left:10px; padding-right:10px; この２つの値をあわせるとちょうど７８０pxになるのですが、 ここで疑問点が浮上しました。 え？paddingの値分widthの値から引くの？？と。。 私の作っていたサイトでは、 width幅を７６０pxではなく「７８０px、padding左右に10px」 と記述していましたがそれでデザインはちょうどピッタシになりました。 http://www.e-washizu.co.jp/のように、いったい何が違うのでしょうか？？ 分かる方、ご回答お願いいたします＞＜
- ベストアンサー
- HTML
- margin,paddingなどで困ったことがあります。
現在、HPを作っています。 そこで相談なのですが、FirefoxやOpera、IE8、IE8のIE7互換モードなどで表示の違いがありました。 その部分のソースはこちらです <div class="menu"> <span><h4>Link</h4></span> <p><a href="javascript:void(0)">リンク1</a></p> <p><a href="javascript:void(0)">リンク2</a></p> </div> そしてCSSのソース（一部）です。 div.menu{ font-size: 10pt; color: #000000; font-weight: bold; margin: 3px; padding: 4px; border: 4px groove #000000; width: 178px; background-color: #eeeeee; } div.menu span{ display: block; text-align: center; } div.menu h4{ color: #000000; font-size: 26px; padding-bottom: 10px; padding-top: 10px; } このCSSのソースのどこを修正すれば、正しい表示になるでしょうか？ 表示は送付画像のような表示です。
- 締切済み
- HTML
- paddingリセットによるエラーを解決したい
みなさんこんにちは。 ナビゲーションメニュー素材を既存環境に導入したところ、 paddingリセットが原因でスタイルが崩れてしまっています。 導入したナビゲーションメニューはこちらです。 http://addyosmani.com/blog/fluid-navigation-how-to-create-an-informative-menu-bar-with-jquery-in-just-a-few-minutes/ これを既存環境に導入すると、ナビゲーションボタンの両端に空けられた40pxの余白がなくなり、左寄せされます。 （左側の余白がなくなり、右側に80pxの余白が作られます） 既存環境は、 * { margin:0; padding:0; } でブラウザが持つpaddingをリセットしています。 (CMSのテンプレートで規定されたスタイルタグのため、これを変えることはできません) 検証のためpadding:0をコメントアウトすれば、適切な表示に戻りました。 反対に、ナビゲーションメニュー素材だけを記述した単独のhtmlファイルに、 *{ padding:0; }を記述すれば、同じスタイル崩れが再現されます。 #menuBar { padding-left:40px; padding-right:40px;} と書き加えれば直りますが、 #menuBar { padding-left:auto; padding-right:auto;} とするとスタイル崩れのままになります。 将来メニューバーを書き換える際にミスを防ぎたいので、 ”40px”のように数値指定しないでおきたいのですが、 そのような方法はありますでしょうか？ よろしくお願いいたします。
- 締切済み
- CSS
- 【css】floatを指定するとはみ出します
ブロック要素をfioatで横並びにした際に、画像とテキストが全体を囲っている要素（親要素）からはみ出すことが多々あります。 その度に高さを指定して回避しているのですが、こちらはその他に回避の方法というのはあるのでしょうか？ それとも、自分の記述がおかしいのでしょうか？ 例えば下記の例です。 こちらは左に画像、右にタイトルとコメントが入ります。 <div class="aaa"> <div class="left"><img src="photo.jpg" width="180" height="120"></div> <div class="right"> <h3 class="title">タイトルです</h3> <div class="comment">コメントです</div> </div> </div> //////////////////////////////////// .aaa{ margin-bottom: 5px; padding-top: 7px; padding-right: 10px; padding-bottom: 7px; padding-left: 10px; clear: both; } .left{ float: left; height: 120px; width: 180px; } .right{ float: left; padding-left: 10px; width: 380px; } .title{ font-size: 90%; line-height: 120%; padding-right: 10px; padding-left: 10px; width: 360px; padding-top: 3px; padding-bottom: 1px; clear: both; } .comment{ font-size: 80%; line-height: 120%; padding: 5px; clear: both; }
- 締切済み
- HTML
- HTMLでpadding？
本日取引先より、「HTMLでpadding指定すれば、CSSのわからない人も修正する時に楽になる。」と聞きました。 そのときは、「へーHTMLでpadding指定できるんだ～。」と流して聞いていたのですが、実際やってみると、無理です。 私の聞き間違いでしょうか？それとも、何かやり方があるのでしょうか？ 解る方、回答をお願いします。m(__)m
- ベストアンサー
- HTML
お礼
ありがとうございます。試してみました。 ちゃんと折り返しました。 １バイト文字は折り返さないというのは知りませんでした、、、。