• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:CSSについて教えて下さい)

【CSS初心者】ドリームウィバーでホームページ作成中に発生した問題

このQ&Aのポイント
  • CSSを使用してドリームウィバーでホームページを作成している初心者です。
  • トップページのレイアウトが崩れ、新規のファイルを作成した際にも問題が発生しました。
  • CSSファイルの名前やリンクの設定に問題があり、解決方法が分からない状況です。

質問者が選んだベストアンサー

  • ベストアンサー
  • sho0646
  • ベストアンサー率75% (3/4)
回答No.1

こんばんわー lacosakuさんがどういうレイアウトをしたいのかよくわかりませんが、、 とりあえず、、 <divid="left"> <divid="center"> <divid="right">とありますが、 <div id="left">というようにdivとidの間は半角スペース入れてますか? あと、たとえば下記みたいにrightのボックスを2種類作るというのはどうでしょうか。ファイル名はmystyle.cssでもかまわないです。 #middle {width:770px;} #left {width:200px;} #center {width:370px;} #right {width:200px;} #right_02 {width:570px;}

lacosaku
質問者

お礼

div間の半角スペースは挿入済みでした。 rightのボックスを2種類作ったら想定通りにレイアウトできました。 有難う御座います。 大変参考になりました

lacosaku
質問者

補足

ヘッダーの中のソースに意味不明なコードが記載されています。 太文字で書かれているのでおそらくエラーっぽいと思うのですが、詳しい方教えて下さい。 宜しくお願いします。 function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSSでDIVを複数囲むには

    CSSでレイアウトをしているのですが、<div>で囲んだ画像Aと画像Bがあります。この2つの<div>を更にもう1つの<div>(以下、大DIV)で囲んでまとめたいのですが、うまくできません。その2枚の画像はそれぞれfloatでleftとrightに寄せているのですが、floatを適用させると大DIVの外に出てしまいます。 2つの画像を左右に寄せることは必須です。その後で、大DIVでまとめておけばあとでレイアウトの変更があったときに作業がスムーズに進むと思ったのですが。 これはどのようにすればよいのでしょうか?

  • CSSの三段組みレイアウトについて教えて下さい。。

    CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか? CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び?! CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか?

    • 締切済み
    • CSS
  • CSS floatについて教えて下さい。

    【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか?初心者ですので、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • HTML,CSSの記述について

    添付画像のようなレイアウトにする場合,どのように記述すればよいでしょうか? (画像マウスオーバー時に画像のみが切り替わるという事です) 初心者なのでサンプルを書いてくださると助かります ↓これは自分で考えてみたものです。自分のブログからのコピペなのでおかしいかもしれません。 【html】 <div class="rolloverPositionMenu"> <div align=left> <img src="a.jpg"> </div></div> <div align=right> <div class="left">text-areaA</div><div class="right">text-areaB</div> <div class="left">text-areaC</div> </div> 【CSS】 .left { float:left; } .right { float:right; } a.rolloverPositionMenu { background: #fff url(b.jpg) left top no-repeat; color: #fff; display: block; overflow: hidden; text-align: center; position: relative; } a.rolloverPositionMenu:hover{ background-color: #f73; color: #f00; } a.rolloverPositionMenu img { background-color: #fff; } a.rolloverPositionMenu:hover img { position: relative; }

    • ベストアンサー
    • HTML
  • CSS について。

    CSS について。 http://www.y-sira.com/ ただ今こちらのサイトを作成しているのですが、 ・div の left の位置がおかしい。 ・div の sub_content の中の h3 の border が div の right のコンテンツを突き抜けている。 ・div の footer の位置が変な位置にある。 ということで困っています。 CSS のどこがおかしいのか指摘して下さるとありがたいです。 よろしくお願いします。

  • CSSの応用がわかりません。

    使用目的に合うCSSスタイルをダウンロードしてきました。 これはdivの高さを揃えられるcssです。 しかし、内容を理解していないので自分のホームページに適用できていません。 やりたいことは、col1が155px,col2が14px,col3が382px,col4が14px,col5が190pxにして使用したのですがこのcssを変更して使いたいのですがどのように変更すればよいでしょうか? /* Start of Column CSS */ #container5 { clear:left; float:left; width:100%; overflow:hidden; background:#eee; /* column 5 background colour */ } #container4 { clear:left; float:left; width:100%; position:relative; right:20%; background:#b2f0f9; /* column 4 background colour */ } #container3 { clear:left; float:left; width:100%; position:relative; right:20%; background:#89ffa2; /* column 3 background colour */ } #container2 { clear:left; float:left; width:100%; position:relative; right:20%; background:#ffa7a7; /* column 2 background colour */ } #container1 { float:left; width:100%; position:relative; right:20%; background:#fff689; /* column 1 background colour */ } #col1 { float:left; width:16%; position:relative; left:82%; overflow:hidden; } #col2 { float:left; width:16%; position:relative; left:84%; overflow:hidden; } #col3 { float:left; width:16%; position:relative; left:90%; overflow:hidden; } #col4 { float:left; width:16%; position:relative; left:94%; overflow:hidden; } #col5 { float:left; width:16%; position:relative; left:98%; overflow:hidden; } 以上がCSSです <body> <div id="container5"> <div id="container4"> <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1"> <!-- col1 start --> <p>Each column is 20% percent wide with 2 percent padding on each side.</p> <!-- col1 end --> </div> <div id="col2"> <!-- col2 start --> <h2>No Images</h2> <!-- col2 end --> </div> <div id="col3"> <!-- col3 start --> <p>The HTML in this layout validates as XHTML 1.0 strict.</p> <!-- col3 end --> </div> <div id="col4"> <!-- col4 start --> <h2>This layout is FREE for anyone to use</h2> <!-- col4 end --> </div> <div id="col5"> <!-- col5 start --> <li>Opera 8 &amp; 9</li> <!-- col5 end --> </div> </div> </div> </div> </div> </div> </body>

  • このhtml,cssでどこがおかしいか分かりません

    お世話になります。 CSS初心車です。参考書など見ながらhtmlとCSSを作成してみましたが、 レイアウトが崩れてしまいます。CSSのほうに問題があるとは思うのですが、初心者な者でいまいちどこが間違っているのか分かりかねます。どうかご教授くださらないでしょうか。 問題はdiv#rightmenuにあると思います。 rightmenuの中にさらにrightbox-top/rightbox-inside/rightbox-buttomと3つのdiv分けをしており、それぞれbackground-image指定してコンテンツの多さによってリピートしていく背景(ボックスのような画像)を制作したいです。 ところが、以下のような指定をするとおかしなところがたくさん出てきました。 (1)headerとrightmenu全体の間に20pxほどの隙間ができる。 (2)rightbox-topとrightbox-insideの間、同じくrightbox-insideとrightbox-buttomにも20pxほどの隙間ができる。 (3)rightbox-insideのbackground-imageが適用されない。 さらに言うとFirefoxやSafariで確認するとレイアウトは上記のような問題があるにしろ、そこそこレイアウト崩れはありませんが、DWで作業しているともうひどいレイアウト崩れが発生しています。自分だけではどうしても解決できなくてみなさんに力に頼ざるを得ませんでした。どうかお願いします。 ●html <div id="rightmenu"> <div id="rightbox-top"> <h3></h3> </div> <div id="rightbox-inside"> <p><img src="images/index-main-image01.jpg"></p> <p><img src="images/index-main-image02.jpg"></p> <p class="text"> 本文いろいろp> <a href="result.html" id="index-button01"></a> <a href="contact.html" id="index-button02"></a> </div> <div id="rightbox-buttom"> <h4></h4> </div> </div> </div> ●CSS div#rightmenu { width:650px; float:right; margin:0px; } div#rightbox-top { width:650px; } #rightbox-top h3 { background-image:url(../images/rightmenu-top.png); background-repeat:no-repeat; width:650px; height:20px; } #rightbox-inside { background-image:url(../images/rightmenu-inside.png); background-repeat:repeat-y; width:650px; } #rightbox-inside p img { float:left; padding-left:40px; } #rightbox-inside p.text { margin-right:30px; padding-bottom:10px; width:400px; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:10px; letter-spacing:130%; line-height:180%; color:#333333; float:right; } #rightbox-buttom { width:650px; clear:both; } #rightbox-buttom h4 { background-image:url(../images/rightmenu-buttom.png); background-repeat:no-repeat; width:650px; height:20px; margin:0px; }

  • CSSで、何故か、「float」が上手く効かない

    詳しく書きますと、前回した質問、 http://okwave.jp/qa/q7786505.html の続きになります。 ちなみにこれは、今の所、解決した次第です。 しかし、新たな場面に直面している最中であります。 http://sky.geocities.jp/thanksv0358/index.html# 質問は、上記で作成しているページについてです。 その内容ですが、ページ中程にある「 今月のおすすめ 」とある、すぐ下の「 見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。 そのため、項目内容をHTMLで、 <div class="left"> ~ </div> と、 <div class="right"> ~ </div> で囲い、その後、それぞれをCSSで、 .left{ float:left; } .right{ float:right; } としたにもかかわらず、何故か中途半端な形で、ずれている状態が確認できます。 これが現在、意味不明な箇所になっています。 ここで質問ですが、この場合、どうすれば「 見出し3 」の文字2つを並列に表示できますでしょうか? 詳しい方がいましたら、よろしくお願いします。

  • HTMLでCSSでボーダーが表示されません。

    HTMLでCSSでボーダーが表示されません。 右サイドバー(right)の左にボーダーを表示させたいのですが、 画像のように文字を記述したところまでしかボーダーが表示されません。 ボーダーをfooterの上まで引きたいのですが、 わかる方いらっしゃいましたら回答宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"> <div id="right_title"></div> <div id="right_content"></div> </div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #right { float: left; height: auto; } #right_title { } #right_content { border-left-width: 1px; border-left-style: solid; border-left-color: #000; }

    • ベストアンサー
    • HTML
  • CSS:印刷時のレイアウト崩れについて

    CSSを利用してレイアウトしたページを作成しています。 もう殆ど作りこんだ今になって気付いたのですが、記事本文のテキストが長くなり、印刷プレビュー時に改ページされる程度にまで伸びると、一挙にレイアウトが崩れてしまうようなのです。 こちらにつきまして回避策はありますでしょうか? ★外部CSS部分 body { padding: 0px; margin: 0px; } #container { width: 762px; position: relative; margin: 0 auto; margin-left: auto; margin-right: auto; top: 0px; } #header { width: 549px; position: absolute; left: 212px; top: 3px; } #left { width: 211px; position: absolute; left: 1px; top: 0px; } #content_right { width: 510px; margin-left: 231px; padding-top: 149px; font-size: 0.8em; line-height: 140%; } #footlink { text-align: center; margin: 30px 0px 40px 0px; } ★HTML部分 <div id="container"> <div id="content_right"> <h1>h1テキスト</h1> <h2>h2テキスト</h2> <p>記事:この辺に印刷プレビューで改ページされるほど改行を入れた場合です</p> <div id="footlink"><a href="#">フッダリンク</a></div> </div> <div id="header">ヘッダメニューとかタイトル画像とか</div> <div id="left">左メニュー部分</div> <div>コピーライト</div> </div> どうにもならないようであれば、印刷時に記事部分だけ抜き出すようなカタチにするべきなのかと考えていますが、難しそうで少し尻込みしています。 良い手立てがあるようでしたら、是非教えてください。 よろしくお願いします。

このQ&Aのポイント
  • BrotherのQL-820NWBを使用している際に、スマホやタブレットから赤色印刷ができません。
  • 問題の発生経緯や試したことについて教えてください。
  • また、お使いの環境についても教えてください。使用しているOSはiOSで、接続はbluetoothです。関連するアプリはBrother iPrint&Labelを使用しています。
回答を見る

専門家に質問してみよう