- ベストアンサー
ｃｓｓで下限を指定しないのはできるか？
cssファイルを作るところでheightを指定すると汎用性がなくなるのですがどうしたらいいですか？横は指定でいいですが縦はページごとにどこまで使うかは一概には指定できないわけで。 #left { width:200px; height:600px; float:left; } #right { width:600px; height:600px; float:right; }
- osiete_kun
- お礼率6% (30/471)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
もう少し問題点がわからないとなんとも、 質問にそのまんま答えるなら heightを指定しなければよい という事になってしまいますので。（念の為…heightはもちろん指定する必要はありません。省略すれば内包するコンテンツに合わせられます。） 経験上、この手の質問が挙がる理由として多段組みする場合に思い通りにならないって場合があるので参考になりそうなサイトを紹介しておきます。 http://www.geocities.jp/multi_column/
関連するQ&A
- CSSで、指定されていない空白が開く
ヘッダーのロゴとその下のナビゲーションの間に、勝手に空白が空きます。 margin: 0;と設定しても空白が空きます。 section#header { width:80%; height: 63px; margin-right: auto; margin-left: auto; } img.LOGO { width: 700px; height: 63px; float: left; } p.intro { color: #383838; float: right; font-size: 120%; } section#links { font-size: 130%; width: 90%; height: 40px; margin-bottom: 40px; margin-right: auto; margin-left : auto; } nav ul li { display: block; float: left; width: 18%; height: 40px; margin-left: 1px; margin-right: 1px; border-left: #000000 2px solid; border-right: #000000 2px solid; } nav ul li a { display: block; line-height: 40px; width: 100%; height: 100%; text-decoration: none; text-align: center; } div#clear { clear:both; } CSSは以上の通り書きました。 このとき、section#headerで設定した、img#LOGOとp.introを含むヘッダー部分と、 section#linksで設定したナビゲーション部分に間が空いてしまいます。 どうすれば開かなくなるでしょうか。 閲覧環境はChromeです。
- ベストアンサー
- 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
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSでの画像サイズ指定について
本などでCSSを練習中です。 画像サイズを自動的に指定したサイズに縮小するCSSは ありますでしょうか？ 以下のよな商品紹介のサムネイルを作りました。 画像部分は常に120×120pxに収まってほしいのですが、 横幅が高さより大きい画像を入れた場合、高さは指定した120pxになりますが(縦横比率は同じ)、横は飛び出してデザインが崩れてしまいます。 正方形の画像はそのまま120×120pxになります。 何かアドバイスをお願い致します。 また、他のおかしいところもご指摘下さい。 【HTML】 <div id="itemBox"> <div class="itemPhoto"><a href="#"><img src="#" alt="商品名" width="120" height="120" /></a></div> <p><a href="#">商品名</a></p> </div> 【CSS】 div#itemBox{ border: 1px solid #9f9f9f; width: 120px; margin: 10px; float: left; text-align: center; padding: 10px; height: 150px; } div#itemBox p{ float: left; text-align:left; width: 120px; margin-top: 5px; } div#itemPhoto{ margin: 0; padding: 5px; text-align: center; width:120px; height:120px; }
- 締切済み
- CSS
- CSSの形がデータの取得量によって崩れてしまいます。
今まで、CGI(Perl)でHTML::TemplateとCGI.pmを用いてアプリケーションを作成しておりました。今回、初めてCSSを使ってみることにしたのですが、<TMPL_LOOP>を使用して、データベースから検索データの取得量によってHP全体の縦幅が変わる仕組みになっております。 FIREFOXでは、コンテンツに関するところは特に問題なのですが、それにともないMENUの表示で新しくデータの来たところの範囲は色がつきません。 また、IEでは、MENUの横にコンテンツがこず、下にきてしまいます。 何か解決方法をご存じの形よろしくおねがいします。 Style.css body{ background-attachment: fixed; background-image: url(Logo.jpg); background-repeat: no-repeat; background-position: 1200px 30px; } #container{ width: 1515px; margin-left:auto; margin-right:auto; } #banner_left{ background:url(left.JPG); float:left; width:215px; height:67px; } #banner_right{ background:url(title.jpg); background-repeat:no-repeat; float:right; width:1300px; height:67px; } #middle_left{ float:left; background:#CCCCCC; color:white; width:215px; height:20px; } #middle_right{ float:right; width:1300px; height:20px; background:#585858; } #menu{ float:left; width:215px; background:#F5F5F5; } #content{ float:right; width:1300px; background:#fff; } #foot{ clear:both; text-align:center; font-size:15px; width:1515px; height:20px; color:white; background:#585858; }
- 締切済み
- CGI
- CSSでの幅指定・・・
CSSで、 一つのdivの中に、二つのdivがあるとき、 二つのdivの片方を310px;で指定して、 もう片方を、画面サイズにあわせて可変するようにするにはどうしたらよいですか？ 310pxで指定したところは、文章などがはみ出さないようにしたいです。(つまり、二つの文章同士がはみ出さないようにして欲しいです。) CSSのソースはこちらです。 div#content{ width: 100%; } div#1{ float: left; } div#2{ width: 310px; float: right; } HTMLは、上記の通り、一つのdivに二つのdivが入っている状態になっています。 <div id="content"> <div id="afl1"> </div> <div id="web1"> </div> </div>
- 締切済み
- HTML
- CSS media queryについて
下記のcssで疑問があります。 @media all and (min-width:500px)と@media all and (min-width:1000px)に それぞれ違うスタイルがあります。 (min-width:500px)にはfloatがあり、(min-width:1000px)にはありません。 しかし、(min-width:1000px)にもfloatされているのですが仕様でしょうか？ もしこれが仕様であれば... floatさせないようにするには(min-width:1000px)にも 設定をしなければならないということでしょうか？ 宜しくお願いします。 -------------------------------------- @media all and (min-width:500px) { #box01{ float:left; width:240px; height:400px; background:#334467; } #box02{ float:right; width:240px; height:400px; background:#ffff00; } } @media all and (min-width:1000px) { #box01{ width:400px; height:400px; background:#334467; } #box02{ width:400px; height:400px; background:#546789; } }
- ベストアンサー
- CSS
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- CSSについて
こんにちは。 現在、ホームページの制作をしています。 早速ですが、 floatを使用し、左右に「お知らせ」と「PR」の見出しをつけようと思ったのですが・・・。 http://www5.atpages.jp/ri19960914/souzou.png ↑のように、ひとつ段落ができてしまいます。 このようにしたいのです。↓ http://www5.atpages.jp/ri19960914/souzou2.png CSSはこちらです。↓ #mainbody .titleall { float:left; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:800px; padding:8px; } #mainbody .titleleft { float:left; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:370px; padding:8px; } #mainbody .titleright { float:right; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:370px; padding:8px; } #mainbody ul.all { width:800px; white-space:normal; } #mainbody ul.left { float:left; width:350px; } #mainbody ul.right { float:right; width:350px; } まだCSS初心者なので、不適切なCSSもあるかもしれません。 htmlソース↓ （途中略） <div id="mainbody"> <div class="titleleft">お知らせ</div> <ul class="left"> テスト（ここにお知らせの文字） </ul> <div class="titleright">PR</div> <ul class="left"> ここに広告のhtmlタグ </ul> どなたか、 http://www5.atpages.jp/ri19960914/souzou2.png のようになる方法を教えていただければ、幸いです。 お願いします。 追記：画像URLを開くと、Forbiddenエラーが出るので、 ご面倒だとは思いますが、URLボックスに直接アドレスを 入力してくださるよう、お願いします。 追記2：分からない点があったら、お願いします。
- ベストアンサー
- CSS
