- 締切済み
2カラムを作りたいと思ってますがフロートできません
ＨＴＭＬで以下のソースを記述しました。 <!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> <link href="css/style1.css" type="text/css" /> </head> <body> <center><img src="img/バナー.png" /></center> <div> <div id contents> <h1>今月のおすすめダイエット</h1> <p>こんなお腹でいい・・・？私・・・。</p> <br /> <img src="img/マキシムストロング.png" alt="マキシムストロング" /> <br /> <p>産後太り、中年太りでこんなお腹になってませんか？</p> <img src="img/ビフォーアフター.png" alt="お腹"/><br /> <p>10キロ痩せたいという方はダイエットの方法を考えなければいけません。<br /> 運動や食事などの方法を徹底的に見直し効率的にダイエットを行っていきましょう。<br /> 10キロ痩せるのはハードルが高いと思うかもしれませんが、<br /> 効果的な方法で行えば、成功する確率も高くなります。<br /></p> <img src="img/Fotolia_66573075_XS-min.jpg" alt="体重計" /><br /> <p>10キロ痩せたい場合のダイエットで一番大事なポイントは目標設定を明確にすることです。<br /> 無理のない運動や食事を計画することによって途中の挫折がなくなります。<br /> 健康的に10キロ痩せることを目標にしましょう<br /></p> <br /> <br /> <p>マキシマムストロングスと併用したいダイエットサプリがこちら！！</p> <br /> <img src="img/オリフェスト.png" /><br /> <br /> <p>こんな理想ボディーを手に入れましょう</p> <img src="img/ビフォーアフター.png" /></div> <br /> <div id sidenavi> <p><img src="img/6586779561100367916.jpg" /></p> <p>6つの施術で<br /> 美脚を作る<br /> 骨盤ダイエット<br /> 脚やせ<br /> </p> <br /> <br /> <img src="img/2510561931730068165.jpg" /> <p>大人気<br /> 長続きしない方必見<br /> 噂のダイエット<br /></p> <br /> <br /> <img src="img/ダウンロード (6).jpg" /> <p>大人気<br /> １食置き換えるだけ<br /> 簡単ダイエット<br /></p> <br /> <br /> <img src="img/ダウンロード (7).jpg" /> <p>とってもおいしいと評判<br /> 小腹がすいた時に<br /> 安心して食べられビスケット<br /></p> </div > </div> </body> </html> その後ｃｓｓにてsidenaviを右にフロートしたいので以下の記述をしまいた @charset "utf-8"; /* CSS Document */ #wrap { width:1000px; margin:0px auto; } #contents { float:left; width:700px; height:1500px; margin:10px 0px 10px 0px; } #sidenavi { float:left; width:300px; height:1500px; margin:10px 10px 10px 0px; } ですがフロートされません。 ｃｓｓがうまくリンクされてないのでしょうか？ 原因がまったくわからない初心者です。 どなたかお知恵をおかりしたいと思います。 どうぞよろしくお願いいたします
- masako1028
- お礼率0% (0/1)
- XML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
たぶん！ ソースを一言一句しっかりを読んだわけではないので、たぶんですが#wrapの横幅を中の要素の横幅の合計が超えてしまっているのが原因です。 #sidenaviのmargin指定ですが >margin:10px 10px 10px 0px; という書き方はマージンをまとめて指定しています。上・右・下・左の順にボックスのマージンが指定されているわけですが、二番目の値の10pxが右マージンです。よって#sidenaviにの右側にさらに10px必要になっています。親ボックスの幅を中の要素が超えるとフロートが効かずに普通に積み重なったように表示されます。 #sidenaviのCSSのmargin～の行をmargin:10px 0;に書き換えればOKのはずです。 もう自力で気づいているかと思いますが、回答が無いようだったので。
関連するQ&A
- Firefoxでの画像の縦の隙間をなくしたい
現在Dreamweaver8でサイトを作成中の初心者です。 画像を縦に並べて表示したいのですが、<br>のタグを入れてないところはIE6,7だと隙間なく表示されるのですが、Firefoxだとどうも隙間が出来てしまいます。 ネットや本で自分なりに調べて試したつもりですが、どうにも解決できませんので、お手数ですがどなたかご協力頂けますようよろしくお願いいたします。 参考までにhtmlとcssです。 html部分 <div id="sidenavi"> <p><a href="jjj/index.html"><img src="image/xxx.jpg" width="245" height="79" border="0"></a></p> <p><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p> <br> <p><img src="image/zzz.jpg" width="245" height="40"></p> <p><img src="image/aaa.jpg" width="245" height="80"></p><br> <p><img src="image/aaa.jpg" width="245" height="106"></p> </div> css部分 #contents #sidenavi { padding: 0px; height: 450px; width: 245px; float: right; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } #sidenavi p { margin-top : 0; margin-bottom : 0; padding-top: 0px; }
- ベストアンサー
- CSS
- 画像にリンクを張ると画像がずれるのを解消したいです
ホームページ作成初心者です。 ある個所の画像にリンクを張ると画像がずれて、表示がおかしくなります。 CSSで横幅を設定した中に同じサイズの画像を配置しています。 詳細をご覧いただきアドバイス頂けたら幸いです。よろしくお願いいたします。 html <div id="sidenavi2"> <ul> <li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> </ul> <p><img src="image/message.jpg" width="200" height="65" border="0"></p> <p><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></p> </div> css #contents #sidenavi2 { padding: 0px; float: right; height: auto; width: 200px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } 情報が不足する点があるかもしれませんが、よろしくお願いいたします。
- ベストアンサー
- HTML
- safariで見るとページ上部に余白ができてしまう
以下のhtmlとcssをChromeで見るとページ（サイト）上部に余白がないのですが、Safariで見ると余白ができてしまいます。どうやったら上部（と下部）の余白がどのブラウザでも表示されないようになりますでしょうか？初歩的な質問で申し訳ありませんがネットで検索してもわからなかったので、宜しくお願いいたします。 [html] <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="index.css" /> <title></title> </head> <body> <div id="wrap"> <div id="inner"> <div id="header"> <img src="image_basic/logo.png" width="450" height="140" alt="veggietimeslogo" /> <img src="image_basic/slide.jpg" width="920" height="450" alt="slide2" /> </div><!-- /header --> <div id="mainwrap"> <div id="firstwrap"> <p>ここは一段目<br />ここは一段目<br />ここは一段目</p> </div><!-- /firstwrap --> <div id="middlewrap"> <p>ここは二段目<br />ここは二段目<br />ここは二段目</p> </div><!-- /middlewrap --> <div class="clear"><hr /> </div><!-- /clear --> </div><!-- /mainwrap --> <div id="sidewrap"> <p>ここはサイドバー<br />ここはサイドバー<br />ここはサイドバー</p> </div><!-- /sidewrap --> <div class="clear"><hr /> </div><!-- /clear --> <div id="footer"> </div><!-- /footer --> </div><!-- /inner --> </div><!-- /wrap --> </body> </html> [css] @charset "UTF-8"; /* CSS Document */ body{ background-color:#000000; text-align:center; margin:0;} #wrap{ background-color:#ffffff; margin:0 auto; width:960px; text-align:left;} #inner{ margin:0 20px;} #mainwrap{ float:left; width:610px;} #firstwrap{ float:left; width:300px;} #middlewrap{ float:right; width:290px;} #sidewrap{ float:right; width:290px;} .clear{ clear:both;} .clear hr{ display:none;} p { font-family:Tahoma, Geneva, sans-serif}
- 締切済み
- ホームページ作成ソフト
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!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=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- ホームページ製作中ですが3カラムの体裁崩れに付いて
3カラムのホームページで画像を挿入して、img { float: left; }を使いテキストの回りこみをすると全体の体裁が崩れます。なにぶん初心者なので、解りやすくお願いします。 SCCは @charset "shift_jis"; body { background-image: url(gif/kabe.gif); margin-top: 25ot; margin-left: 50pt; font-family: Osaka, "ヒラノギ角ゴ Pro W3","小塚ゴシック Std B","MS P ゴシック",; } h1 { font-size: 32pt; color: #006600; text-align: center; } h2 { font-size: 24pt; color: #ff3300; text-align: center; } p { color: #0000cc; } img { float: left; } p.kesu { clear: both; } div.box_a { width: 700px; margin-left: auto; margin-right: auto; } div.box_b1 { width: 10%; height: 480px; float: left; } div.box_b { width: 70%; height: 480px; overflow: auto; float: left; } div.box_b2 { width : 20%; height: 480px; float: left; } div.box_c { width: 100%; text-align: center; clear: both; } これです。 HTMLは <?xml version="1.0" encoding="Shift_JIS"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>ガラスの世界</title> <link rel="stylesheet" href="style1.css" type="text/css" /> </head> <body> <div class="box_a"> <img src="gif/tatoru.gif"> </div> <hr /> <div class="box_b1"> <a href="#saisiyo">最初</a><br /> <a href="#kansei">完成</a> </div> <div class="box_b"> <h1>ガラス細工製作です</h1><br /> <h2>簡単な物から</h2> <img src="siyasin/hajimenoitupo.jpg" width="250" height="250" /> <p><a id="saisiyo">熱帯魚は簡単なので、まずガラス玉を作ります。</a></p><p class="kesu"></p> <img src="siyasin/moyoumae.jpg" width="250" height="250" /> <p>黄色のガラスを縦に4本付けます。</p><p class="kesu"></p> <img src="siyasin/yojiru.jpg" width="250" height="250" /> <p>ねじるとこうなります。</p><p class="kesu"></p> <img src="siyasin/tubusu.jpg" width="250" height="250" /> <p>それを潰すとこうなります。</p><p class="kesu"></p> <img src="siyasin/ohire.jpg" width="250" height="250" /> <p>尾ひれを付けます。</p><p class="kesu"></p> <img src="siyasin/sebire.jpg" width="250" height="250" /> <p>背びれを付けます。</p><p class="kesu"></p> <img src="siyasin/kanseitemae1.jpg" width="250" height="250" /> <p>ムナビレを付けます。</p><p class="kesu"></p> <img src="siyasin/kansei1.jpg" width="250" height="250" /> <p>前のガラスを溶かし取って、目を付けて完成です。</p><p class="kesu"></p> <img src="siyasin/netutaigiyo.jpg" width="300" height="250" /> <p><a id="kansei">熱帯魚完成</a></p> </div> <div class="box_b2"> <a href="index.html">TOPページへ戻る</a><br /> <a href="kougu.html">工具</a><br /> <a href="sagiyou.html">作業</a><br /> </div> <div class="box_c"><hr /> (c) 2011 ガラスの世界</div> </body> </html> これです。 img { vertical-align: bottom; }は使えない文法のようです。 宜しくお願いします。
- ベストアンサー
- CSS
- firefoxで
会社のHPをHPビルダーで作成しています、 <div class="content">要素の中に２つのBOX「左配置<div class="text09">・右配置<div class="text10">」を作成して左右に並べてみたのですがIE6,7,8では希望通り表示されるのですがfirefoxでは左text09のBOX下にtext10が配置されてしまいます、CSS初心者ですが右配置text10のwidth幅を指定しなければfirefixでも左右ならんで表示されるのですが、右配置text10の記字が左text09の下側に廻り込んでしまうのです？ どうしたら良いでしょうか？どなたかご指導いただけませんでしょうか、宜しくお願いします。 ※サイドメニューの右側にcontentを配置 ※<?xml version="1.0" encoding="Shift_JIS"?> <!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" xml:lang="ja" lang="ja"> ＜ソース記述＞ <div class="content"> <div class="text09"> <img src="img/industria01.jpg" width="331" height="272" alt="工業団地" title="工業団地" /><br /> Partnershipの工業団地</div> <div class="text10"><a href="01.html"><img src="img/industria02.jpg" width="220" height="142" alt="（写真をクリックすると拡大できます）" title="（写真をクリックすると拡大できます）" /></a><br /> Texas A&M Park<br /> （写真をクリックすると拡大できます）<br /> <a href="02.html"><img src="img/industria04.jpg" width="220" height="88" alt="（写真をクリックすると拡大できます）" title="（写真をクリックすると拡大できます）" /></a><br /> Business Park<br /> （写真をクリックすると拡大できます） </div> </div> 以下CSS記述 .content{ background-color : #ffffff; margin-left : 0px; margin-bottom : 0px; padding-left : 0px; width : 682px; float : right; padding-top : 0px; padding-right : 0px; } .text09{ float : left; font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.6; color : #000000; padding-left : 0px; margin-left : 50px; margin-right : 20px; width : 331px; display:inline; } .text09 a img{border-width : 0px 0px 0px 0px; } .text10{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.6; color : #000000; margin-left : 15px; width : 220px; } .text10 a img{border-width : 0px 0px 0px 0px;} この質問内容で解りますでしょうか？
- 締切済み
- HTML
- HPの形態が崩れてしまうのですが
HPの形態がくずれてしまいます。 困り度： すぐに回答を！ 現在ホームページ製作をしています。 新しい操作を行うたびに、画像の位置がおかしくなってしまうことで質問なのですが、よろしいでしょうか？ 現在ひとつのページにコンテンツにあたる画像を置いています。 そこに、インラインフレームをつけようと挿入すると 画像がインラインフレームの幅と同じサイズに改行され、 くずれてしまいます。 どうしたら型崩れせずにきれいにみせることができるのでしょうか？ちなみに画像が切れてしまうのはいやなので、フレームわけはしないでページ内ジャンプという形をとろうとおもっています。 ーーーーーータグはこちらですーーーーーーー <!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>COLOR』</title> <link href="file:///E|/site/base.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { color: #333333; font-weight: bold; } --> </style> </head> <body> <p> <div id="content"> <p><span class="style1"> <br /> ＼今年のテーマは『COLOR』！／</span><br /> <img src="contents_about.png" alt="about" width="170" height="86" /><br /> <img src="contents_schedule.png" alt="schedule" width="243" height="86" /> <iframe src="main.html" name="uri" width="800" height="600" scrolling="Auto" frameborder="0" id="uri" style="border:none;filter:Alpha(opacity=50);"></iframe> <br /> <img src="contents_event.png" alt="event" width="170" height="86" /><br /> <img src="contents_blog.png" alt="blog" width="170" height="86" /><br /> <img src="contents_access.png" alt="access" width="201" height="86" /><br /> <img src="contents_link.png" alt="link" width="170" height="86" /><br /> <img src="contents_mail.png" alt="mail" width="170" height="86" /><br /> <img src="contents_top.png" alt="top" width="170" height="86" /></p> </div> </p> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- 透過してしまうのですが・・・
現在タグでメニューバーをつくっているのですが、 背景が透過されるテーブルタグを利用したところあとから設置した画像までもが透過されてしまいました。その場合はどこのタグを直せばいいのでしょうか？ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!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"> <!-- body { background-image: url(jfes_menupict.jpg); background-repeat: no-repeat; margin-left: 50px; margin-top: 20px; } --> </style></head> <body> <p> </p> <table style="filter:Alpha(opacity=50); background-color:#ffffff;"> <tr> <td width="281"><p align="center"> <img src="about.png" width="144" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="schedule.png" width="225" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="event.png" width="139" height="28" /></p> </td> </tr> <tr> <td><p align="center"><img src="blog.png" width="112" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="access.png" width="173" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="link.png" width="94" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="mail.png" width="96" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="toppage.png" width="200" height="27" /></p> </td> </tr> <tr> <td height="15"> </td> </tr> </table> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
- フォントサイズでレイアウトがずれる？
cssでページレイアウトをしているのですが、 外部cssでサイト全体のフォントサイズを13pxにした場合 body { font-size: 13px; } 同じ画像なのに（四角のボタン）下部分の1pxの底辺が表示されるものとされないものが出てきました。 HTMLの記述内容は以下の通りです。 <div class="menu"> <p><img src="/img/**1.png" alt="" width="180" height="33"></p> <p><img src="/img/**2.png" alt="" width="180" height="33"></p> <p><img src="/img/**3.png" alt="" width="180" height="33"></p> <p><img src="/img/**4.png" alt="" width="180" height="33"></p> </div> <p>にmargin、paddingなどは設定していません。 この場合、画像、ｃｓｓ共に同じ条件であるはずなのに、3番目の画像だけ上記のような不具合がおこりました。 フォントサイズを14pxにした場合、問題なく表示されます。 firefoxで確認したところは13px,14px共に、きちんと表示されていました。 ちなみにブラウザはIE6です。 ブラウザのバグか何かでしょうか？？ 申し訳ありませんが、どなたかご教授お願い致します。
- ベストアンサー
- HTML
- cssでボックスを横並びにし、横幅指定してもくっついてしまう。
こんにちわ！ 只今CSS課題に取り組んでいるのですが、 フロートを使用し、写真（A）、テキスト（B）、写真（C）、テキスト（D）、と並べたいのですが、（B）に横幅指定しているにもかかわらず、（C）がＩＥではＯＫなのですが、FIREFOXではぴたっとくっついてしまいます。 【html】 <div class="box"> <div class="photo"><img src="img/photo_01.jpg" width="132" height="85"></div> <div class="txt">第23回こまったな<br>どうしたのかな賞<br>受賞</div></div> <div class="box"> <div class="photo"><img src="img/photo_02.jpg" width="132" height="85"></div> <div class="txt">第23回どなたかー<br>助けてください賞<br>受賞</div></div> </div> .box{ width : 258 px; margin: 0px; float:left; } .photo{ width : 132 px; margin: 0px; float:left; } .txt{ width : 123 px; color: #555555; font-size: 12px; text-align: left; margin: 0px 0px 0px 3px; padding: 0px ; line-height:18px; float:left; } となっております。 何故、ＩＥでは大丈夫でFirefoxでは内容によって横幅が変わってしまうのでしょうか？ ご教授願いませんでしょうか～？ 宜しくお願い致します。
- ベストアンサー
- HTML
