- 締切済み
clear: bothの事で質問です。
ganmo717の回答
- ganmo717
- ベストアンサー率0% (0/10)
XHTMLに <div class="waku"> <div class="a">画像</div> <div class="b">画像説明</div> <br class="kuhaku"> </div> brにスタイルを適用するのはやめましょう。 <div class="a">画像</div> <div class="b">画像説明</div> この２つはフロートで並べていますか？ あと、divはいらないてす。img自体にスタイルを適用する方が良いです。
関連するQ&A
- CSSでフローとした際の親要素の高さ
CSSでfloatしたものって、親要素のheightに反映されません？ただ親要素に背景があって、反映されないと凄く困る感じで・・・。 それってどうやって回避すればいいでしょうか？ 取りあえず <div style="width:750px;background:url(mainback.gif)"> <div style="float:left;width:300px;">左側</div> <div style="float:right;width:450px;">右側</div> <br style="clear:both;"> </div> のように、<br style="clear:both;">みたいにして取逃げたんですが、そもそも無意味なbrを入れるのもどうかと思うし。文法的にもbrにclearって微妙な気もするし、 なにか良い逃げ方ってないでしょうか？？ ご存知の方、宜しくお願いいたします。
- ベストアンサー
- HTML
- ieとfirefoxでdiv枠に２pxのズレ
宜しくお願い致します。 現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせると ieではdiv枠が2px程左右にズレが生じてしまいます。ieに合わせると逆の現象が生じます。 何が原因なのか判りません。宜しくご教示下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <style type="text/css"> .clear {clear:both; } .clear hr {display:none;height:0px;font-size:0pt; } #wrap {width:810px; text-align:center; margin:0px auto;} #header{font-size:70%;color:green;margin-top:5px;text-align:center;} #menu {width:200px;height:auto; float:left;margin:0;position: relative;} #goods {width:600px;height:auto; float:right;margin:0;position: relative;} #top-title { width:200px;height:70px; float:left; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} #top-menu { width:600px;height:70px; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} /* position: relative削除したり widthの値を%にしたり色々試してみましたが??? */ .col_01_l{width:295px;height:310px;position: relative; float:left; margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_01_r{width:295px;height:310px;position: relative; float:right;margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_05 {width:200px;height:auto; float:left; margin-bottom: 8px;background-color:#ffffee; border:solid 1px #336600;} .col_06a {width:600px;height:auto; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #000000;position: relative;} </style> </head> <body> <div id="wrap"> <div id="header"> </div><!-- /header --> <div id="goods"> <div id="top-menu"> </div><!-- /top-menu --> <br style="clear:both;"> <div class="col_06a"> <br><br> </div> <br style="clear:both;"> <div class="col_01_l"> <p>ブラウザieではずれませんが、 chrome、firefoxで、この枠が 右に２pxにずれる。 どのように直せば良いか具体的にご教示下さい。</p> </div> <div class="col_01_r"> <br> </div> <br style="clear:both;"> </div><!-- /goods --> <!-- ################################################################################## --> <div id="menu"> <div id="top-title"> <br> </div> <br style="clear:both;"> <div class="col_05"> <br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> </div><!-- /col_05 --> <br style="clear:both;"> </div><!-- /menu --> <br style="clear:both;"> <!-- ################################################################################## --> </div><!-- /wrap --> </body> </html>
- ベストアンサー
- CSS
- [携帯]divで指定した背景色から画像がはみ出す。
携帯用サイトを制作しているのですが、 <div style="clear:both;background-color:red;"> <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" /> <br />こんにちは </div> <div style="clear:both;～ と画像の横に文字が回りこんだとき、背景色が文字の部分にしかつかず、画像がはみ出した状態になってしまいます。 今回は1*1の透明なgif画像を使い、 <div style="clear:both;background-color:red;"> <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" /> <br />こんにちは <div clear="all" style="clear:both;"> <img src="./images/space.gif"> </div> </div> <div style="clear:both;～ とすることで解消できたのですが、 参考にしていたサイトではどうやら画像を使わずに背景内に収めているようです。 後学のために、画像を使わず、背景から画像をはみ出さないように見せる方法を教えてください。よろしくお願いします。 docomoで動作確認しています。
- 締切済み
- HTML
- floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- HTML
- どうプログラミングすればよいか教えてください。
HTMLは <body> <div id="wrapper"> <div id="header"></div> <div id="left"></div> <div id="middle"></div> <div id="right"></div> <div id="footer"></div> </div> </body> スタイルシートは <style type="text/css"> * { padding: 0px; margin: 0px; } #wrapper { width: 900px; margin-right: auto; margin-left: auto; } #header { width: 100%; height: 200px; background: red; } #left { width: 20%; height: 400px; background: blue; float: left; } #middle { width: 60%; height: 400px; background: orange; float: left; left: 20%; } #right { width: 20%; height: 400px; background: yellow; float: left; left: 80%; } #footer { width: 100%; height: 100px; background: green; clear: both; } </style> 上記のプログラムだとmiddleエリアに文字を沢山記入していくとエリアの縦の長さが 固定されていてエリア自体の範囲は延長されず文字だけが増えていきます。 文字の量に応じてleftエリア、middleエリア、rightエリアの 縦の長さが延長されるようになるにはどうプログラムすればいいでしょうか。 要するに オレンジのエリアに文字を記入すると掲載画像のように文字だけが表示されて 青、オレンジ、黄色のエリアは固定されたままです。 これを、どうすれば文字の量に応じて青、オレンジ、黄色のエリアが延長されて 表示されるか教えてください。
- ベストアンサー
- CSS
- cssレイアウトで表を作成したいです。
添付した画像の様な表組みをテーブルタグを使用せずに作成するのは可能なのでしょうか？ もしくは表はテーブルタグを使用したほうが、ソースの量は少なくて済むのでしょうか 全体を囲うBoxAは"height:auto;"を指定してボックスBoxBのテキストの量によって可変する。BoxCのテキストは常にBoxBの最下行と揃える。 /*css*/ .BoxA{ width:490px; height:auto; margin:0px auto 10px auto; background-color:#999999; border:solid #999999 1px;} .BoxA .BoxB{ width:350px; height:auto; margin:0px; padding:5px; float:left; background-color:#fffbfb;} .BoxA .BoxC{ width:129px; height:auto; margin:0px; padding:0px; float:right; background-color:#fffbfb; } .clearfloat { clear:both;} <!--ソース--> <div class="BoxA"> <div class="BoxB"> <p>■■■■■■■■■■<br /> ■■■■■■■■■■<p/> </div> <div class="BoxC"> <p style="margin:auto 0px 0px;">■■■■■■■■■■</p> </div> <br class="clearfloat" /> </div>
- ベストアンサー
- HTML
- IEの印刷プレビューでレイアウトが崩れてしまう
ＨＰ作成の際にＩＥで段組みレイアウトを組むと印刷プレビューで行ずれを起こしてしまいます。 たとえば、 全体の幅(755px)＝メニュー(55px)＋本文(700px) とすると本文がメニューの下に回り込みをしてしまいます。 （メニュー＋本文を754pxに設定すると印刷プレビューはうまくいくみたいなんですが・・・） 原因や解決方法がわかれば教えていただけませんでしょうか？ よろしくお願いします。 ※ソースは以下のとおりです。 <body style="background-color: #cccccc;"> <div style="width: 755px;margin: 0px 0px 0px 20px;background-color: #ffffcc;"> <div style="background-color:#CC6666;float:left;width:55px;height:200px">メニュー</div> <div style="background-color:#CCCC66;float:right;width:700px;"> 本文<br> 本文 </div> <div style="clear:both;"></div> </div> </body>
- 締切済み
- HTML
- CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
- スタイルシート 外部ファイルについて質問です。
スタイルシート 外部ファイルについて質問です。 レイアウト用のスタイルシート <style type="text/css"> <!-- .outer { width:; background-color:; padding:15px; margin:0 auto 0 auto; } .menu { float:left; width:20%; background-color:; height:100%; } .main { float:right; width:70%; background-color:; height:100%; } .clears{ clear:both; } --> </style> を、外部ファイルに移したいのですが、やり方が分かりません。 現在ページ内で <div class="outer"> <!-- 左スタイル 開始 --> <div class="menu"> 文章など </div> <!-- 右スタイル 開始 --> <div class="main"> 文章など </div> <!-- 右スタイル おわり --> <br class="clears"> </div> <!-- 左右スタイルシート おわり --> という方法で表記しています。 外部ファイルへの移し方、外部ファイルの中身をどうしたらいいか、 お手数ですが、教えていただけると幸いです。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートで上手く段組が出来ません。
スタイルシートで段組をして、いわゆる擬似フレームのHPを作りたいのですが、いまいち上手く出来ません。 下の画像の赤紫部分(HTML内ではtopsとしている部分)も分割して、全部で5つのフレームに分けたいのですが、そこを分割しようと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:200px; float:left; background-color:#cc6600; } #tops { width:300px; height:200px; float:left; background-color:#cc5555; } #left { width:250px; height:600px; clear: both; background-color:#ff9933; } #right { width:500px; height:600px; float:left; background-color:#ffcc66; } #under { width:750px; height:10px; clear: both; background-color:#ff9955; } --> </style> </head> <body> <div id="top"></div> <div id="tops"></div> <div id="left"></div> <div id="right"></div> <div id="under"></div> </body> </html> というタグを打つと、topsの部分はちゃんと回り込んでくれるのですが、画像のように、回り込みを解除したleftの横のrightがちゃんとfloat:left;と打ち込んでいるのにも関わらず、leftの下にいってしまうのです。 どうしたらちゃんと5つに分割出来るのでしょうか？ よろしくお願いしますm(_ _)m
- ベストアンサー
- その他([技術者向] コンピューター)