- ベストアンサー
ドリームウィーバー8のプレビューとアップした後の表示の違い
golive001の回答
参考にしておられるサイト拝見しました。 シンプルでよい解説ではないでしょうか。私の作り方や考え方とはいささか違うかな？いい勉強になりました。 >>上記のouterで作成しているところが いけないのではないかとおもったのですが・・・。 これは対象となるマークアップ（HTML）によって異なります。 例えば、参考のサイトでは、.outerの部分には.frameになっていたと思います。同時にbody内のdiv要素で <div class="frame"> となっていたはずです。""で囲まれている名前が、cssとして指定した名前と違う場合、当然読み込めません。HTMLを確認してみてください。 >>表示される内容が全て左よりになってしまうのを、真ん中にしたいのですが、これはbodyのタグにalignのcenterでかまわないでしょうか？ うーん。これはだめですね。なぜだめかは、上記の勉強をしていけば自然に分かるようになります。 勉強に関してですが、 まず他人が書いたソースコードを読んでみて、ＤＷでも良いので、コードを書く欄に手書きして、F12ボタンを押してプレビュー。 イメージと違ったら、また修正、またプレビューを繰り返すしかないですね。 私も専門学校等には全く通っていませんが、この程度のことならアドバイスできるようになりました。誰でもできます。 がんばってください。
関連するQ&A
- 並んだ２つのfloatボックス、片方を固定位置にしたい
floatでボックスを２つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。 現在、このfloatの２つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。 また、この大きなボックスは、常にセンターにある状態です。 ・トップから常に160pxのマージンが欲しい ・左側の余白は、ブラウザの大きさに寄ってかわる（センタリングの為） ・右のボックスは自由に動く。 この状況で、左のメニューだけを固定することは可能でしょうか。 教えてください。 現在ソースは下記のようにしております。 【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box </div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }
- ベストアンサー
- 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
- FirefoxでのCSSページの崩れについて（長文）
こんにちわ。Firefoxで<div>を使って段組をしているのですが、セレクトボックスを設置した瞬間、右側に配置した段組が崩れてしまいます（他のブラウザでは崩れません）。どうしても解決できず途方にくれております。何卒ご指南下さい（涙） 「RSS 表示」の段組部分が「エントリー01」セレクトボックスの段組と同列にならばず、下の段へはじき出されてしまうのです。 ----<body部分>------ <body> <div class="page"> <div class="contents"> <!-- 左側メニュー 表示 --> <div id="leftmenu"> <!-- カテゴリボックス表示 --> <form method="get" action="#"> <select name="category"> <option value="">選択してください</option> <option value="01">＊＊＊＊＊＊＊</option> <option value="02">＊＊＊＊＊＊</option> </select> <input type="submit" value="表示" /> </form> </div> <!-- 中央コンテンツ 表示 --> <div id="main"> <!-- 本文表示 --> <h2 class="title">エントリー01</h2> </div> </div> <!-- 右側メニュー 表示 --> <div id="rightmenu"> <!-- RSS 表示 --> <h3 class="calendar_title">RSS 表示</h3> </div> </div> </body> ---<使用しているCSS>----- .page { width: 800px; text-align: left; background: #ffffff; display: table; border: 1px solid #370d55; margin: 20px auto; padding: 0px 0px 0px 0px; } .contents{ width: 595px; border: 1px solid #370d55; float: left; } #main{ width: 390px; border: 1px solid #370d55; float: right; } #rightmenu{ width: 190px; border: 1px solid #370d55; float: right; } #leftmenu{ width: 190px; border: 1px solid #370d55; float: left; padding: 0px 0px 0px 10px; }
- 締切済み
- HTML
- IE6とFirefoxの表示の違い
どうか教えてください。 IE6とFirefoxでの表示結果が違うのですが、同じにするには どうすればいいのですか？ Firefoxでは文字の背景色の赤が上下にでてるし、IE6は左のボックスが 下にくっついているし、それと、A Bにかけた margin:10px;なのですが、10pxマージンとれてますかね？ よろしければ教えてください。 【html】 <body> <div id="container"> <div id="A"> <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p> </div> <div id="B"> <p>ああああああああああああああああああああああああああああああ</p> </div> </div> </body> 【CSS】 body{ font-size:20px; } #container{ background:#000; width:600px; overflow:auto; } #A{ float:left; width:200px; background:#ff0000; margin:10px; } #B{ width:200px; float:right; background: #ff0000; margin:10px; }
- 締切済み
- CSS
- position:fixed;でメニューを右側に固定したい
position:fixed;でメニューを右側に固定したい こちらを参考にサイドバーが固定された2カラムのサイトを作っています。 http://www.css-lecture.com/log/css/049.html 上記のサイトを見てくだされば分かると思うのですが、サイトバーはすべてを囲うwrapperボックスの左端に固定されています。 これをwrapperボックスの右端に持って行きたいのですが、うまくいきません。 position:fixed;にrightやleftを指定すると、wrapperボックスではなくブラウザの端に寄ってしまいます。 absolutoではスクロールされてしまいますし……。 自分なりに調べていろいろと試してみたのですが、解決することはできませんでした。 javascriptや疑似フレームは出来るだけ使いたくありません。 右端に持って行くことは可能なのでしょうか？現状では無理なのでしょうか？ HTML <div id="wrapper"> <div id="menu"></div> <div id="main"></div> </div> CSS #wrapper{ width:700px; margin:0 auto; background-color:#FFF; position:relative; } div#menu { width: 100px; background: #CCC; padding:10px; height:100%; position:fixed; top: 0px; z-index: 20; } * html div#subContents { position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #main{ margin-left:120px; padding:10px; width:560px; position:relative; background-color:#FFF; } よろしくお願いします。
- ベストアンサー
- HTML
- CSSでfloatがうまくいきません。
CSSでfloatがうまくいきません。 .main{ width: 1000px; } .wrap{ width: 900px; height: 120px; margin-left: 50px; background-color: #ffffff; overflow:auto; } .head_l { width: 300px; height: 120px; float: left; } .head_r { width: 600px; height: 120px; float: left; } <div class="main"> <div class="wrap"> <div class="head_l">ロゴ画像</div> <div class="head_r">項目</div> </div> </div> mainの中にwrapという箱を作りhead_l(ロゴ画像)とhead_r(項目ボタン)という箱を横並びに表示させたいのですが、スクロールバーが出たりします。うまくいきません。どのようにしたらいいでしょうか？
- ベストアンサー
- HTML
- DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- CSS ＜div＞の入れ子が反映されない
＜div＞要素を使ってレイアウトを考えています。 いくつかのBOXを一まとめにして中央表示にしようと思うのですが 一まとめにする為のdiv要素が全く反映されません。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { padding : 0px ; margin : 0px ; } #kihon { background:#ff0000; width : 752px ; margin : 0 auto ;} #header { width : 750px ; background: #ff00ff ; } #main { float: left; width: 500px; background: #0000ff ; } #menu { float: left; width: 250px; background: #00ff00 ; } #footer { clear : both ; width : 750px ; background: #000000 ; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <body> <div id="kihon"> <div id="header">aaa</div> <div id="main">aaa</div> <div id="menu">aaa</div> <div id="footer">aaa</div> </div> </body> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 上の記述で、<div id="kihon">が全く反映しません。 一応一まとまりにはなるのですが、左上に固まって表示されるだけです。 自分でも色々調べたのですが調べ方が悪いのか原因が全く分かりません。 知り合いにHP作成の知識がある人がおらず相談が出来ないので こちらでお力を貸して頂きたく投稿させていただきました。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 段組みレイアウトがfloatleft上手くいきませ
先程の投稿は、一度削除させて頂きました。 再度、投稿しなおします。 なんとか、以下の画像のところまで持ってくることが出来ました。 おかしなところ。 Q１ hedderの上に隙間１０ｐｘが出来てしまっている（本来は、黄色の色が一番上0pxの所まで持って行きたいです） Q2 全体が、centerに行かない、、、。左によってしまっております。 以上２点です。 宜しくお願いします。 失礼致します。 こんにちは。ycqと申します。 html+CSSでサイトを作っています。 簡単に段組みレイアウトを作って、CSSで色を付けてみるのですが、レイアウトが崩れてしまっています。ソースを修正したりしたのですが、原因を見つけることが出来ませんでした。 heightは基本的に autoでも構いません。 #wrapper 950px #head 950px #main 950px (mainの中に) #main_left と#main_right があります。 #main_left 250px で左側メニューfloat:left; #main_right 700px で右側に回り込ませるために、きっちりと float:left; #main_right の中には #right_box_flash #contents #fotter が入ります。 |----------------------| |----|-----------------| | | | | |-----------------| | | | | |-----------------| |___|____________| 画像も添付させて頂きます。それぞれのボックスにたいして、CSSで色を付けております。 おかしい所がございますでしょうか？ Q レイアウトがCenterを指定しているのに、真ん中にいかない。 Q #hedder の上部に１０ｐｘぐらいの空白ができている。margin:0px; padding:10px指定 お時間がございましたら、どうぞ、宜しくお願いいたします。 失礼致します。 index.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" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>hogehoge</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="header"> <h2>header</h2> </div> <div class="main"> <div class="main_left"> </div> <div class="left_box_menu"> <h2>left_box_menu</h2> </div> </div> <div class="main_right"> <div class="right_box_flash"> <h2>right_box_flash</h2> </div> <div class="contents"> <h2>contents</h2> </div> <div class="footer"> <h2>footer</h2> </div> </div> </div> </div> </div> </body> </html> **************************************** default.css*********************************** @charset "utf-8"; /* CSS Document */ /*------------------------------*/ 共通設定 /*------------------------------*/ * { margin: 0; padding: 0; line-height: 1.6; font-family: "メイリオ","ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3"; list-style-type: none; } img{ border:none; } body{ margin: 0; padding: 0; text-align:center; background-color:red; } /*------------------------------*/ 大枠ボックス構成 /*------------------------------*/ .wrapper{ width:950px; height:1015; margin:0px auto; padding:0px;background-color:orange; } .header{ width:950px; height:100px; background-color:yellow; } .main{ width:950px; background-color:purple; } .main_left { width:250px; height:915px; margin:0px auto; padding:0px; float:left; background-color:DarkgGldenRod; } .left_box_menu{ width:250px; height:auto; float:left; background-color:khaki; margin:0px auto; padding:0px; } .main_right{ width:700px; height:auto; float:left; } .right_box_flash{ width:700px; height:300px; float:left; background-color:pink; } .contents{ width:700px; height:280px; float:left; background-color:blue; } .footer{ width:700px; height:115px; float:left; background-color:yellow;
- ベストアンサー
- CSS
- CSS 段組で要素が表示されません
いつもお世話になります。 今CSSで段組をしています。 #content{ width:910px; height:auto; } #content{ float:left; width:440px; padding-left:10px; padding-right:10px; } #menu{ float:right; width:440px; padding-right:10px; } で左右のボックスを作り、 それぞれににsubを作ってテキストや画像などの子要素を入れていきます。 htmlは <body> <div id="content"> <div id="main"> <div class="sub1"> </div> <div class="sub2"> </div> </div> <div id="menu"> <div class="sub3"> </div> <div class="sub4"> </div> <div class="sub5"> </div> <div class="sub6"> </div> </div> </div> </body> という具合です。子要素(sub）には高さ指定はしていません。 問題なのは、 firefoxでは子要素がきちんと表示されているのですが、 IE（６，７とも）右の2番目(sub4)の要素を表示せず、（飛ばされている感じ） safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。 全体の高さとしては右側の段組の方が高さがあります。 実際にはそれぞれのsubにテーブルやテキスト、画像などが入っています。 何が原因でしょう？どなたかご教授ください。 質問に慣れていないので、もし補足が必要であればお願いします。
- 締切済み
- HTML
補足
回答有難うございます。 今日改めて見直しながら、試してみます。 しかし、急ぎの仕事が入った為に 後回しにしなければならくなってしまいました。 それを終わらせるまで、放置(この質問も 作りかけのサイトも・・・)するのは しのびないのですが、出来次第また、 書き込みたいと思います・・・。 今日は無理っぽいです。 折角、回答を頂いているのに、申し訳ないですが、 明日中には必ず、結果を報告したいと思います。 どうかまたよろしくお願い致します。