CSSのレイアウト指定で問題が発生しています

このQ&Aのポイント
  • CSSでデザインを始めたばかりの初心者ですが、Mac環境ではレイアウト指定がうまく反映されません。
  • 文字・リンク・画像の指定は反映されていますが、レイアウトの記述部分だけが無効になっているようです。
  • 具体的な問題箇所は、head、mainhead、menu、select、table、image、Artistname、history、otherの要素です。
回答を見る
  • ベストアンサー

CSSのレイアウト指定だけが無効に。

CSSでデザインを始めたばかりの初心者です。 Mac環境で制作しておりますが、WIN環境に限り、レイアウト指定がうまく反映されません。(MacではIEとsafariで確認済み。) というか、レイアウトの記述部分だけ、無効になっているような印象です。 文字・リンク・imageの指定はきちんと反映されています。 現象が起きているページは下記です。 http://www.artbox-int.co.jp/seek/foragent/illust_a.html CSSの問題の部分です。 /*レイアウト*/ .head { border-width:0px; } .mainhead { width:200px; height:45px; margin-top:15px; margin-left:15px; border-width:0px; } .menu { width:250px; height:45px; margin-top:-42px; margin-left:230px; border-width:0px; } .select { margin-top:-25px; margin-left:35px; border-width:0px; } .table { margin-left:15px; margin-top:15px; width:480px; height:180px; border-color:#D9D9D9; border-width:1px; border-left-width:5px; border-style:solid; background-color:#FFFFFF; } .image { margin-top:15px; margin-left:15px; border-width:0px; } .Artistname { margin-top:-148px; margin-left:180px; width:200px; height:45px; border-width:0px; } .history { margin-top:-31px; margin-left:180px; width:280px; height:100px; border-width:0px; overflow:auto; } .other { margin-left:180px; width:280px; height:30px; border-width:0px; } どうぞよろしくご教授お願い致します。

  • abweb
  • お礼率100% (1/1)
  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • golive001
  • ベストアンサー率54% (20/37)
回答No.1

クラス名に「???」が入っているのはなぜか?考えてみては?

abweb
質問者

お礼

早速アドバイスありがとうございます。 こちらでは確認できなかったのですが、golive001様の環境からはクラス名の前に「???」と入っているとの事で、違うエディタで再度作り直してみたら、問題が解消されました。 文字コードかなにかの問題だったのだと思います。 おかげで助かりました。 どうもありがとうございます。

関連するQ&A

  • CSSでレイアウトが崩れます

    CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }

  • CSSでブラウザごとにレイアウトが崩れたりします。

    はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■    ■=ヘッダー □□●●●●    □=メニュー □□●●●●    ●=コンテンツ(中身)1 □□○○○○    ○=コンテンツ(中身)2 □□○○○○    ▲=フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー(□)とコンテンツ(○+●)の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー(□)の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ(○+●)部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE7のみでして、IE6やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか? body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSのレイアウトについて

    CSSのレイアウトをダウンロードしました。 初心者ながら調べてやっていたのですが、2点ほど分からない点があります。 ・ヘッダー、フッター含め全ての幅を画面いっぱいにしたい。 widthを100%にしてみたのですが、レイアウトが崩れるだけで画面幅いっぱいにはなりませんでした。 ・3カラムの真ん中を固定幅900pxにしたい。 ご存知の方いらっしゃいましたらご教示ください。よろしくお願いします。 以下がCSSのソースです。 * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { width: 922px; } #header { color: #333; width: 900px; float: left; padding: 10px; height: 200px; background: #E7DBD5; } #navigation { float: left; width: 900px; color: #333; padding: 10px; margin: 0px 0px 0px 0px; background: #BD9C8C; } #leftcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #content { float: left; color: #333; background: #F2F2E6; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 460px; display: inline; } #rightcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #footer { width: 900px; height: 200px; clear: both; color: #333; background: #BD9C8C; padding: 10px; }

    • 締切済み
    • CSS
  • CSSレイアウト・背景グラデーション

    初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか? 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • CSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう

    CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。 できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。 色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。 また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか? frameとかだと*で対応するみたいなんですが・・・ ひとまず、周り込を回避する方法が優先です。 どうかよろしくお願いいたします。 @charset "shift_jis"; body { margin: 0px; height: 100%; padding: 0px; font-size: 12px; line-height: 150%; } html { height: 100%; } img { border: none; vertical-align: bottom; } #left { background-color: #666666; width: 350px; float: left; min-height: 100%; height: 100%; } #right { height: 100%; padding: 35px 0 0 0; min-height: 100%; width: auto; margin: 0 0 0 350px; }

    • ベストアンサー
    • HTML
  • cssハックについて

    googleとfirefoxでcssが聞かない箇所があります。 css--------- #operation { width: 420px; background-image: url(../picture/top/left_middle.jpg); background-repeat: repeat-y; background-position: center top; margin-top: 10px; } #operation img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #operation #ope_top { background-image: url(../picture/top/left_top.jpg); background-repeat: no-repeat; background-position: left top; height: 30px; padding-bottom: 0px; margin-bottom: 0px; } #operation #ope_top #ope_tit { font-size: 14px; line-height: 2; font-weight: bold; color: #FFFFFF; text-indent: 10px; float: left; width: 200px; margin-top: 0px; padding-top: 0px; height: 20px; } #operation #ope_top .ope_img { padding-top: 5px; float: right; margin-right: 10px; } #operation #ope_middle { margin-top: 0px; padding-top: 0px; width: 420px; margin-left: -200px;←ここがおかしいです!! } #operation #ope_middle .content ul { margin-top: 5px; padding-left: 30px; list-style-image: url(../picture/list.jpg); } #operation #ope_middle .content li { margin-bottom: 5px; margin-top: 1px; } #operation #ope_middle .content .line01 { border: 1px dotted #CCCCCC; margin-top: 2px; margin-bottom: 2px; } というかんじなのですが、左右へとぶれてしまいます。 どのように修正したいいのか困っております。 参考になるようなことありましたらお願いします。

  • CSS IEとfirefoxおなじレイアウトにしたいのですが

    初心者です。↑質問ですが IEでレイアウトはみれてもfirefoxでは崩れてしまいそれの 対処で困ってしまっています。 どなたかアドバイスください。 ↓のCSSなのですが、途中混乱したままの投稿となってしまっていますが おわかりなられるかた助けてください! ロゴがメイン画像にのっかったりと崩れがたえません。 body{ margin-top: 60px; padding: auto; background-color: #000000; background-image: url(../image/back.gif); color: #000000; cursor: crosshair; } P{ margin: 0; } h1{ font-family: serif; font-size: 5pt; color: #000000; } /*imgDIV↓*/ #lightbox{ width: 100%; z-index: center; text-align: center; background-repeat: no-repeat; } /*toplogo*/ #wrapper{ position: relative; width: 100%; margin: auto; margin-bottom: 20px; margin-left: auto; margin-right: auto; } #logo{ padding-top: 50px 50px 50px 50px; position: absolute; left: 410px; } /*グローバルナビ*/ #hako { margin-top: 150px; line-height:50px; padding-left: 900px; } #hako li { display:inline; list-style:none; padding-right:12px; float: left; background: url(../image/bpin.gif) left top no-repeat; line-height: 12px; padding-left: 17px; } #hako li{ font-family: DejaVuSans; font-size: 12px; } #hako li a { color:#C0C0C0; text-decoration:none; border-bottom:solid 2px #ADABAE; } #hako li a:hover { color:#FFFF66; border-bottom:solid 1px #CC0000; }

  • CSSレイアウトの本当の正しいやり方

    CSSでヘッダーとフッター付きの2カラムレイアウトを書籍のサンプルを見て行ないました。 表示は何も問題ないのですが、色々とサンプルレイアウトのサイトを見ていると「main」でleft-marginfを指定しているのはなく、floatを指定しているのが多いのですが、下記でも合っているのでしょうか。 #wrap { width: 700px; margin: 0 auto; text-align: left; } #header { color: #fff; } #menu { width: 160px; float: left; } #main { margin-left: 160px; padding: 10px; } #footer { clear: both; padding: 10px; }

    • ベストアンサー
    • HTML
  • CSSでライブドアブログのレイアウトがIEでだけ、崩れてしまう。

    CSSでライブドアブログの左サイドバーのレイアウトがIEで見ると、崩れてしまいます。 Fireboxなどでは、きれいに表示されますが、IEでは、左サイドバーの表示がはるか下方に表示されてしまいます。 下記のCSSに問題がないか教えていただけないでしょうか? 参考になりそうなサイトとして(1)(2)なども見たのですが、結局わからなかったです。 (1)CSSによる段組(マルチカラム)レイアウト講座 ​http://www.geocities.jp/multi_column/index.html​ (2)CSSバグリスト ​http://cssbug.at.infoseek.co.jp/ よろしくお願いします。 /********************************** =2.Common **********************************/ table#header{ width:100%; font-size:12px; color: #cffdcc; } table#header a{ color: #cffdcc; } table#header th{ width:1%; } table#header th img{ margin:2px 10px; width:132px; height:24px; } table#header td.catprbox{ width:1%; white-space:nowrap; } table#header td.catprbox span{ margin-right:15px; } table#header td.newstickerbox{ width:97%; text-align:right; padding-right:10px; } table#header td.startblogbox{ width:1%; padding-right:10px; white-space:nowrap; } table#header td.startblogbox img{ width:17px; height:16px; margin-right:3px; border:0px; vertical-align:middle; } #container{ width:800px; margin:0 auto; text-align:center; } #cgmmenu{ display:none; } #banner{ height:200px; border:solid #fff; border-width:6px; background:#240000 url(http://image.blog.livedoor.jp・・・・・) no-repeat; text-align:left; margin:0 auto; clear:both; } #banner a{ color:#fff; text-decoration:none; } #banner a:hover{ text-decoration:underline; } #banner h1.blogtitle{ padding:80px 30px 5px; font-size:20px; } #banner div.description{ width:500px; padding:0 30px; line-height:135%; font-size:12px; color:#fff; } #blogcontainer{ background:url(http://image.blog.livedoor・・・・) 0 0 repeat-y; border:solid #fff; border-width:0 6px 0; padding:0 0 30px; margin:0 auto; height:1%; } #wrapper{ float:left; width:605px; } #content{ float:right; width:420px; text-align:left; background-color:#F9F3EE; } #contentin{} #left{ float:left; width:180px; } #right{ float:right; width:178px; } #lefttop , #leftbody , #leftbottom , #righttop , #rightbody , #rightbottom {} #footer { background:url(http://image.blog.livedoo・・・・) 0 0 no-repeat; border:solid #fff; border-width:0 6px 6px; height:46px; } #outfooter{}

  • CSSが反映されなくて困っています。

    iframeを使ってhtmlファイルのdiv要素を表示しようとしていますが表示すると iframeの左端に意図しないスペースができてしまい困っています。 "IEの要素を検証"でデバッグしながら検証しているのですが、 レイアウトを見るとOffsetが60となっています。 "IEの要素を検証"を使いdiv要素のスタイルを指定しているwidthを変更すると IE上でスペースが小さくなっていくのが確認できるので、 その通りにCSSファイルの中身を書き換えるのですが、 何故か反映されず困っています。 ブラウザのキャッシュはクリアしています。 div要素のクラス以外で考えてみる必要のある項目が有るのかとも思うのですが、 何かアドバイス頂けませんでしょうか? 下記ソースです。 HTML(覗く側)-------------------------------------------------------------------- <IFRAME src="xxx/index.html" name="Topページメイン画像" width="900px" height="550px" frameborder="0" scrolling="no"> ブラウザがインラインフレームに対応していません。 表示される文章はこちらです。 </IFRAME> HTML(index.html)覗かれる側---------------------------------------------------------- <div class="fallback-message"> <img src="top2.jpg" width="900px"></img> </div> ---------------------------------------------------------------------------------- CSS------------------------------------------------------------------------------ .fallback-message { width: 818px; line-height: 0; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; font-family: sans-serif; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; border-top-color: #e4c652; border-right-color: #e4c652; border-bottom-color: #e4c652; border-left-color: #e4c652; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-color: rgb(238, 220, 148); } ---------------------------------------------------------------------------------- 何卒お願いいたします。

    • 締切済み
    • CSS

専門家に質問してみよう