- ベストアンサー
ドリィームウィバーCS4を使用しています。（CSS）
abrilの回答
width: 100px; height: 100px; overflow: hidden; とすればできる筈ですが。 ボックスが伸びる…という事は、もしかしてIE6でご覧になってますか？ IE6にはボックス要素にheightの値を明示していても内包するデータのボリュームに合わせて（データが収まりきるまで）勝手にボックスの高さを伸ばしてしまう、というバグがあります。 なのでoverflow: hidden;を併せて指定してやれば、ボックスの指定された高さをはみ出した分はカットして表示しなくなります。
関連するQ&A
- CSSレイアウトの回り込みについて
初めまして、よろしくお願いいたします。 見よう見まねでCSSレイアウトのweb制作に挑戦している者です。以下の現象についてご指南いただければ大変助かります。 ■CSS #wrapper { width : 620px; } #left { width : 300px; float : left; } #right { width : 300px; float : right; } ■ソース <div id="wrapper"> <div id="left"> （左寄せブロック） </div> <div id="right"> （右寄せブロック） </div> </div> 上記のCSSとソースで「620px幅の外枠」の中に「300px幅の左寄せブロック」「300px幅の右寄せブロック」が中央に20pxの隙間を空けて正常に表示されるのですが、右寄せブロックの中に長いテキストを改行せずに書いたら右寄せブロックが右寄せにならず、左寄せブロックの下に落ちて表示されてしまいます。 この現象は、長いテキストが300px幅に指定されている右寄せブロックの幅を押し広げている？から起こるのでしょうか。 右寄せブロックの中に長いテキストを書く場合、いちいち300px幅を意識して自分で改行を入れなくても、300pxの右寄せブロック幅を押し広げることなく自動折り返しされれば良いのですが。（右寄せブロックの高さは指定していないので） また、文字のサイズはpxで固定できない事情があるので、ブラウザで可変できるパーセント指定にしているのですが、ブラウザの文字サイズ中では正常に右寄せされている右寄せブロックが、文字サイズ大に変更したとたんに左寄せブロックの下に落ちてしまいます。 右寄せブロックの中に長いテキストを改行なしで書いても右寄せブロックが左寄せブロックの下に落ちて表示されない様、どなたかご指南いただければ誠に幸いです。
- ベストアンサー
- ホームページ作成ソフト
- CSSを使ってのiframe
xhtmlとcssでhpを作ってます。 iframeをcssで表現したいんですが、どうしてもフレーム枠に１pxほどの枠が出てしまいますので、それを無くしたいのと、スクロールバーが出ないようにしたいのですが、どのような書き方がベストでしょうか？ どなたかアドバイスをお願いします。 現状では以下の書き方をしております。 -----css----- #top{ float:left; text-align:left; width:300px; } #top_iframe{ overflow:auto; width:300px; height:150px;} -----html----- <div id="top"> <iframe src="xxx.html" title="top">更新</iframe> </div> 希望としては現状の幅300px 高さ150pxで、枠が無くスクロールバーもでないようにしたいのですが・・・ <<当方初心者なので、お返事頂けるさいにはcssとhtmlのタグでご回答願います。>>
- ベストアンサー
- HTML
- CSSについて
こんにちは。 現在、CSSを使用して、Webページを作成しております。 先日、ページの幅を、750pxにし、センタリングしたのですが、 長い文章を入力すると、改行がされず、横スクロールになってしまいます。 CSSは、こちらです。↓ #hogehoge { margin:0 auto; width:750px; } 最後にmargin-left:auto; margin-right:auto;をつけてみたのですが、やはり駄目です。 HTMLは、こちらです。 <html> | |（途中略） <div id="hogehoge"> 長い文章～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ </div> </body> </html> どなたか横スクロールをせずに、幅の限界まで来たときに自動改行されるようなCSSを教えていただければ幸いです。 ご面倒だとは思いますが、お願いします。
- ベストアンサー
- CSS
- ＣＳＳについて
CSSで下記のように記載すると高さ200pxのボーダ枠の中にaaaaaと記載されるのまでは、よいのですが、上詰めになってしまうのです。高さ200pxの中央に表示させるにはどうしたらよいのでしょうか。 どうぞよろしくお願いいたします。 ▼CSSソース -------------------------- #contents{ border: solid 1px #ccc; margin: 0; padding: 0; width: 500px; height: 200px; text-align: center; } -------------------------- ▼HTMLソース <div id="contents">aaaaa</div> --------------------------
- 締切済み
- CSS
- cssに関して
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #box { height: 100px; width: 700px; border: 1px solid #996600; } .comment { height: 50px; width: 300px; float: left; margin-top: 10px; border: 1px solid #993366; } --> </style> </head> <body> <div id="box"> <div class="comment"> comment </div> <div class="comment"> comment </div> </div> </body> </html> --------------------------------------------------------- boxという枠の中にcommentの子枠を入れてます。 comment枠の上に10pxの空間を入れたいのですが、上記xhtmlとcssで書き方はＯＫだと思います。 しかし疑問が残ります。 本来はboxにpadding-top:10pxとすべきなんでしょうか。 それとも上記のとおりで正解なんでしょうか。（commentにmargin-top：10px） ある程度経験のある方か、お詳しい方にご判断願いたいと思います。 なぜこのような質問をするかというと、時々Adobe Dreamweaver CS3で、ＩＥ６では正しく表示されないとか、マージンレフトがどうのこうのと出るからです。（ＩＥ６の人はほとんどいないと思いますが、なんかしっくりこないんです・・・） よろしくお願いします。
- ベストアンサー
- HTML
- ブラウザごとにCSS?
こんにちは。 HTMLとCSSを使ったホームページを作っています。 確認用のブラウザにSleipnirを使っています。 下のように記述し、ブラウザエンジンを切り替えて見たところ、それぞれ幅が違うことに気づきました。 幅が異なると、デザインもグチャグチャになってくるので、大変困っています。 これを回避、対処する方法を教えて欲しいです。 補足もなるべく早くさせてもらいます。 どうかよろしくお願いします。 <style type="text/css"> div{ border:solid #cccccc 1px; width:750px; margin:5px; } #all{ width:800px; height:auto; text-align:center; } #header{ height:200px; } #main{ height:auto !important; height:15em; min-height:15em; } #footer{ font-size:10px; height:2em; } </style> <div id="all"> <div id="header"> </div> <div id="main"> </div> <div id="footer"> </div> </div>
- ベストアンサー
- HTML
- CSS、ブラウザの幅が狭まったときの表示
CSS学習中です。 ブラウザの幅が狭まったときの表示について教えてください。 現在、CSSファイルで以下のように書いています。 【test.css】 #alpha, #beta, #gamma { position: relative; display: inline; float: left; } #alpha { width: 300px; background: #f00; } #beta { width: 100px; background: #0f0; } #gamma { width: 100px; background: #00f; } このCSSを使い、 <body> <div id="alpha"> Alpha </div> <div id="beta"> Beta </div> <div id="gamma"> Gamma </div> </body> と表示させています。 ブラウザの表示幅が広いときは同じ行に Alpha Beta Gamma と並ぶのですが、ブラウザの表示幅を狭めると、入りきらないGammaが下の行に表示されます。 そうではなく、入りきらない部分は表示されない（表示が欠ける）様にしたいのですが、どのようにすればよいのでしょうか？ ブラウザはIE6を使用しています。
- ベストアンサー
- HTML
- cssの書き方について
始めましてpcckitと申します。cssには全くの初心者ですがよろしくお願いします。メモ帳でcssで構成したホームページを作成しようと考えております。そこでまずは下記のように記述をしました。 body {background-color: #87ceed; text-align: center} div#border {border-style: solid; border-width: 2px; padding: 20px; background-color: #ffffff; width: 700px} 上記のようにしたところ、画面に枠が出来て、その枠の中に740×458 の画像を入れて確認をしたところ、枠からはみ出してしまいました。 やはりこれは、width: 700px}にしているからでしょうか？ 上記の状態でＩＥでは正常に表示されるのですがFire foxで見ると やはり画像が枠からはみ出していたり、枠そのものが左に寄ったりしています。 また、枠の中に文字や画像を入れて中央ぞろえや、両端ぞろえなどしたいのですが、うまく行きません。ご指導の程よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- ボタンのコード ｃｓｓ記述バグ？
以下のボタンのコードに関してですが、ブラウザー上でマウスのポインターをボタンの上におくと、上のボタンと下のボタンとの距離が狭くなりボタンとボタンがくっついてしまいます。 本当は、マウスのポインターをボタンの上におくとボタンの距離を一定に保ちボーダーの幅だけかえたいのですが、どうすればよいでしょうか？ 多分、以下のコードにバグがあると思うのですが、分かりません。 どなたか、お分かりの方がおられましたら、教えて下さい。 よろしくお願いします。 キャサリン 以下コード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- .test a { display:block; text-decoration:none; background-color:#00FF00; color:#000000; font-size:12px; margin-top:0px; margin-bottom:20px; padding-top:10px; padding-bottom:10px; padding-left:5px; border-top:solid 2px #000000; border-bottom:solid 5px #000000; border-left:solid 2px #000000; border-right:solid 5px #000000; width:600px; } .test a:hover { border-top:solid 5px #000000; border-bottom:solid 2px #000000; border-left:solid 5px #000000; border-right:solid 2px #000000; } --> </style> </head> <body> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div> </body> </html>
- ベストアンサー
- HTML
- ［CSS］ヘッダー固定＋コンテンツの縦位置可変
CSSでのヘッダー固定に関する質問です。 ヘッダーを固定表示しつつ、ヘッダーの縦幅が文字サイズの可変などで大小した時に それにあわせてその下部の固定じゃないコンテンツ部分の縦の位置が 調整されるようにCSSで組むことは可能でしょうか？ ヘッダー固定関連を調べてみたのですが、 条件に合うものがうまく見つけられなかったので、 恐れ入りますが質問させていただきました。 添付画像のような処理を行いたいと思っています。 ●文字サイズ可変に対応できない例 #header{ position:fixed; (またはposition:absolute;) width:100%; height:100px;" } #content{ width:100%; margin:100px 0 0;(またはpadding) } <body> <div id="header" >******</div> <div id="content">*****</div> </body> これだと#header内の文字サイズが大きくなった場合、枠からはみ出してしまいます。 現在はこれを用いています。（IE6対応などは行っています） ●文字サイズ可変に対応出来るが、固定部分に対応出来ない？ http://www.rr.iij4u.or.jp/~kazumix/d/css/sample/header_footer.html こちらのやり方？ ●やりたいこと <body> <div id="header"> <div id="header1">テキスト テキスト テキスト</div> <div id="header2">画像や動画など縦幅は固定</div> <div id="header3">テキスト テキスト テキスト</div> </div> <div id="content">******</div> </body> この形で、 header1とheader3はテキストが入るのでfirefox等の ブラウザの文字サイズ変更にて縦幅が可変しますが、 header2は常に縦幅が固定(100pxなど)です。 この条件の#headerの高さに応じて、スクロールバーが一番上にある状態の時は #content部分が常にピタッと#headerの下にひっついた状態にしたいです。 （スクロールバーは#content部分ではなく、body全体に出る形） この条件で、CSSのみで、ヘッダー固定を実現することは可能でしょうか？ htmlの書き方は見た目が実現可能であれば必ずしも●やりたいこと の部分のものと同じでなくてもかまいません。 js等必要でしょうか？ ご存知の方、ご教授いただけますと幸いでございます。
- ベストアンサー
- CSS
お礼
ありがとうございます！ 解決できました。 ホームページをDWで作成してちんぷんかんぷんです！ 最初にCSSを勉強するべきと気付きました。 abrilさん。ありがとうございます。