CSS flot の設定について
- flot を使って、左の画像と右のたい等の文の、上側高さの位置を揃えたいのですが、うまくいきません。
- 何日も同じ事の繰り返しで、負のスパイラルに落ちこんでいます。
- 使用ソフトはDreamweaver CS5で、使用パソコンはWindows 7です。
- ベストアンサー
CSS flot の設定について
こんにちは初めまして、orasta111 と申します。 flot を使って、左の画像と右のたい等の文の、上側高さの位置を 揃えたいのですが、うまくいきません。 どのようにすればよいのか教えていただくことはできませんか。 何日も同じ事の繰り返しで、負のスパイラルに落ちこんでいます。 それから すいませんが、文書が長いのでテキストファイルを 添付したかったのですが、文法が読めなくなってしまうので html/cssのテキストファイルをダウンロードしてみていただければ 重ね重ね、お手数を掛けますが宜しくお願い致します。 文法テキスト http://www006.upp.so-net.ne.jp/mikkan/shitumon.txt 使用ソフト Dreamweaver CS5 使用パソコン Windows 7
- oresta111
- お礼率100% (3/3)
- その他([技術者向] コンピューター)
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <style type="text/css"> .mainMenuList { width: 420px; margin-left: 10px; } .mainMenuList .mainMenuCap img { vertical-align: bottom; margin-top: 10px; margin-right: 0px; margin-bottom: 5px; margin-left: 50px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .mainMenuList .mainMenuCap { position: relative; margin-top: 0px; margin-right: 0px; margin-bottom: 8px; margin-left: 0px; padding: 0px; } .mainMenuList .mainMenuCap a { position: absolute; top: 15px; right: 7px; } .menuGototop { font-size: 0.8em; background-image: url(img/sankak_g.png); background-repeat: no-repeat; background-position: left center; padding-left: 22px; } .mainMenuList .mainMenuDatas ul li dl { font-size: 0.8em; line-height: 1.2em; margin: 0px; padding: 0px } .mainMenuList .mainMenuDatas ul li dl dt { font-weight: bold; color: #ffffff; margin: 0px; padding: 0px; } .mainMenuList .mainMenuDatas { background-color: #97734c; margin: 0px; padding: 0px; } .mainMenuList .mainMenuDatas ul { margin: 0px; padding: 0px; list-style-type: none; } .mainMenuList .mainMenuDatas ul li { margin: 0px; padding: 0px; } .mainMenuList .mainMenuDatas ul li dl { margin: 0px; padding: 0px; } .mainMenuList .mainMenuDatas ul .menuImage img { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; float: left; clear: both; } .mainMenuList .mainMenuDatas ul .MenuText dl dt { font-size: 1.2em; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 15px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; float: left; } .mainMenuList .mainMenuDatas ul .MenuText dl dd { color: #ffffff; font-size: 1.2em; margin-top: 10px; margin-right: 20px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; float: right; } .mainMenuList .mainMenuDatas ul .MenuText { float:right; width:285px; } .mainMenuList .mainMenuDatas ul .MenuText dl { width: 280px; float: right; padding-top: 2px; padding-right: 2px; padding-bottom: 3px; padding-left: 3px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #ffffff; } /* clearfix hack */ .mainMenuList .mainMenuDatas:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .mainMenuList .mainMenuDatas { display: inline-block; } /* hide macie \*/ *html .mainMenuList .mainMenuDatas { height: 1%; } .mainMenuList .mainMenuDatas { display: block; } /* end hide */ /* end clearfix hack */ </style> </head> <body><div> <dl class="mainMenuList"> <dt class="mainMenuCap"><img src="img/menu_sashimi_tag.png" width="137" height="30" alt="お刺身タグ" /> <a href="#pageTop" class="menuGototop">pageTop</a></dt> <dd class="mainMenuDatas"> <ul> <li class="menuImage"><img src="img/menu_sashimi.jpg" width="80" height="80" alt="お刺身写真" /></li> <li class="MenuText"> <dl> <dt>た い</dt> <dd>800円</dd> </dl> </li> <li class="MenuText"> <dl> <dt>い か</dt> <dd>800円</dd> </dl> </li> <li class="MenuText"> <dl> <dt>ぶ り</dt> <dd>900円</dd> </dl> </li> <li class="MenuText"> <dl> <dt>かんぱち</dt> <dd>1,000円</dd> </dl> </li> <li class="MenuText"> <dl> <dt>ひらめ</dt> <dd>1,000円</dd> </dl> </li> <li class="MenuText"> <dl> <dt>あわび</dt> <dd>1,200円</dd> </dl> </li> </ul> </dd> </dl> </div></body></html> ------------------------------------ 過去のソースは捨てて質問当初の話に戻しましょう。 各画像パーツを作って、当初の提示ソースを再現しました。 変更箇所は（おかしな点） <a href="#pageTop" #class="menuGototop">pageTop</a> の #class → class とNO.2で提示した通りの .mainMenuList .mainMenuDatas ul .MenuText { float:right; width:285px; } だけです。つまり、最短修正のみ。 本来は、別の書き方がありますが, （文章構造とかCSSとかショートハンドとか） 人それぞれの書き方があるので（今回は要望と応急処置という事を考慮して） あえて余計な変更/修正などはしていません。 結果、 元が綺麗ではないので、ブラウザ差異はありますが、 メニューが落ちる事はないでしょう・・・
その他の回答 (2)
- naokita
- ベストアンサー率57% (1008/1745)
NO.1の回答者です（返信拝見済み） ＞<ul style="background: url(img/menu_sashimi.jpg) no-repeat 6px 10px 0;"> このような仕様に無い事を勝手に作ってはいけません。 元に戻せば、画像は表示されます・・・ <ul style="background: url(img/menu_sashimi.jpg) no-repeat 10px 6px;min-height:86px;"> このように、高さを確保すれば画像は表示されますけどね。 複雑にしたソースを修正せずに増築するのは気が引けますが、 altを表示したいなら、imgを設置するしか無いですが、 応急処置なら、 .mainMenuList .mainMenuDatas ul .MenuText { clear: both; } ↑上記を↓以下の様に変更すれば良いでしょう。 .mainMenuList .mainMenuDatas ul .MenuText { float:right; width:285px; } ------------ その前に、 「たい」＝「た い」ではないです。 い か 、 ぶ り も単語になってません・・・ 参考書は、人それぞれなので自分に合ったもの立ち読み比較して探しましょう。 もしくは、厚くて高額な参考書を１ページ目から飛ばさずに学習する事です。 それで基本は覚えれるでしょう（基本は中学生の英語学習程度のレベルです） 応用はネット検索で十分です（CSSは奥が深いです） でも、そこまでやるならかなりの時間が必要なので、 業者に部分修正して貰った方が良いのでは？ 趣味にする分には良いですが。
お礼
こんばんは、naokita様 いろいろとすいませんでした。naokita様 が記載していただいた文、明日試させていただきます。 本当に申し訳ございませんでした。 ゆっくりゆっくり、頭に入れていこうと思います。 参考書の件もすいませんでした。 大きいな参考書を買ってこようと思います。 では、失礼します。
補足
こんにちは、naokita様 昨日、結果連絡投稿した気がするのですが、 反映されていないので、もう一度お礼の投稿です。 http://www006.upp.so-net.ne.jp/mikkan/html_source.jpg と、ご指導通りやってみました。 結果です http://www006.upp.so-net.ne.jp/mikkan/gazou_sashimi.jpg このような状況になっています。 naokita様忙しい中、時間を作っていただきどうも有り難うございました。 もう一度、htmlソースをひもとき、齷齪してみたいと思います。 本当にありがとうございました。
- naokita
- ベストアンサー率57% (1008/1745)
無駄やツッコミどころが多々あるようで・・・ 綺麗に書けばとてもスッキリするのですが、その辺は後々勉強して下さい。 応急処置として、 <dd class="mainMenuDatas"> <ul> <li class="menuImage"><img src="img/menu_sashimi.jpg" width="80" height="80" alt="お刺身写真" /></li> <li class="MenuText"> ↑上記の部分の画像リスト行を削除して、 ↓以下の様に背景画像に変更すれば良いでしょう。 <dd class="mainMenuDatas"> <ul style="background: url(img/menu_sashimi.jpg) no-repeat 10px 0;"> <li class="MenuText"> 理屈は、こういう事です。 floatやpositionで画像を配置出来ますが、面倒な事をしているだけなので、 背景画像でOKです。.mainMenuDatasに配置してもよいですし。
お礼
さっそく有り難うございました。 目から鱗です、最終的にはfloat を覚えてみたいので ゆっくり勉強してみたいと思います。 後、良い参考書など有ればお勧めいただけますでしょうか 何から何まですいません。
補足
すいません、何度も失礼します。 naokita様が教えていただいた方法で何とかうまくいったのですが IMG属性を使って、alt属性も使いたいので、float属性を使いたいのです。 申し訳ございませんでした。何処か参考になるサイトなど有ればご指導お願い致します。 naokita様の方法だと、テキストの行が少なくなると、画像が表示しなくなります。 現在、画像が表示されなくなってしまいました。 変更箇所は、 <dd class="mainMenuDatas"> <ul style="background: url(img/menu_sashimi.jpg) no-repeat 6px 10px 0;"> <li class="MenuText"> 中へ、6pxを追加しました。
関連するQ&A
- cssの一部しか読んでくれないのはなぜ？
dreamweaver CS3を使っています。 aというcssがあるのですが、ブラウザビューした場合、このa.cssの一部しか読んでくれません。 文法チェックかけても問題なしとでました。 何が問題なのでしょうか？
- ベストアンサー
- HTML
- CSSの使われていない属性
DreamweaverがCS4になってコードナビゲータが追加されたおかげで該当のCSSの箇所を容易に特定できるようになりましたが、逆にCSSファイルから、ローカルサイト内で使われている場所を見つけたり、使われている箇所数を知ることはできないのでしょうか？ 古いサイトの改訂にあたりCSSが重くなってきているので、使われていない属性を削除したいのです。Dreamweaverの機能としては無くても、他に可能な方法があればお願いします。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- Dreamweaverのcssとテンプレート
こんにちは。 Dreamweaverを使用しているのですがどうしてもわからないことがあります。 cssファイルを更新（文字の大きさ・色等）するとtemplate.dwtファイルには反映される（A）のですが、template.dwtファイルを元に作成しているhtmlファイルには反映されません。（B） template.dwtファイル内の文章を変更したらhtmlファイルには反映されます。（C） ＜現状＞ （A）cssファイルとtemplateファイルはつながっている（＝反映される） （B）templateファイルとhtmlファイルはつながっている（＝反映される） （C）cssファイルとhtmlファイルはつながっていない（＝反映されない）←ここで詰まってます 1か月ほど前に使用した時は問題なく反映されていました。 （cssを変更後、通常通りhtmlにも反映される） 何が原因なのかさっぱりわかりません。 ＜使用環境＞ Dreamweaver CS4 Windows7 IE、Chrome 非常に困っています。 どこをどうすればよろしいでしょうか。 どうぞよろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- Dreamweaverに拡張子を設定する方法？
こんにちは，よろしくお願いします。 Dreamweaverでは，拡張子が登録されていたものでは無いとき，「このファイル拡張子に有効なエディタが見つかりません」とのメッセージが出て，開いたり編集したりすることができません。こんな時は，いちいち，ファイル名をリネームして，「index.ctp → index.txt」などのように，Dreamweaverに登録されている拡張子に変更してから，テキストファイルを編集しなければなりません。 これが煩わしいので，何とか特定の拡張子（この場合は，'ctp'）を登録したいのです。どのようにすればよいのか教えてください。 ちなみに，DreamweaverはＣＳ３です。よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- CSS初心者です。
CSS初心者です。 宜しくお願いします。 CSSで既に組まれているものを編集したいのですが、Footer部分を一番画面の下にさげたいのですが。 CSSではどのように設定したらよいのでしょうか。。今Bodyの高さを長くなるよう設定したら、 Footer部分が中心にきてます。 すいません。教えてください。 ※DreamWeaverはCS4を使用していて、CSSの内容が全て英語表記なので、そちらで 教えていただけると助かります。
- ベストアンサー
- ホームページ作成ソフト
- DreamweaverCS3でCSSを使わずフォントカラーを変更するには？
使用ソフト：Dreamweaver CS3 使用OS：Mas OS X Dreamweaver CS3で携帯ページを作っています。 プロパティインスペクタから色指定をするとCSSで色の設定がされてしまうのですが、そうではなく <font color="#000000">aa</font> のようにCSSを用いないコードになるようにするにはどうすればいいのでしょうか？ ご存知の方いらしたら教えて下さい。 よろしくお願いしますm(__)m
- 締切済み
- ホームページ作成ソフト
- 適用されているはずの外部cssが適用されない。。
すみませんが教えてください！ dreamweaver8でテーブルとcssでサイトをつくっているんですが、 ある一部分だけ全くcssが効きません。 <link href="../style.css" rel="stylesheet" type="text/css" /> <link href="menu_page.css" rel="stylesheet" type="text/css" /> ↑このページで使っているcss #2f-txt { margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 0px; } #2f-txt p { font-size: 13px; color: #FFFFFF; text-align: right; } ↑menu_page.cssの方に書かれてます。 <table width="390" border="0" cellspacing="0" cellpadding="0"> <tr> <td ><h2></h2></td> </tr> <tr> <td> <table width="390" id="2f-txt"> <tr> <td> <h3><p>ここのテキスト</p></h3> </td> </tr> </table> </td> </tr> </table> ↑id="2f-txt"のテーブル・テキスト等にかけたい ※見にくくてすみません・・・ dreamweaverのデザインビュー上ではしっかり効いているんですが、 ブラウザで見るとmenu_page.cssに書いてある#2f-txt ・#2f-txt p が全く効いていません。 他のページでも同じような使い方をしている箇所があるんですが、 そこは問題ありません。いろいろと試してはみたんですが、全くだめで、どういうことか全く分かりません。 まだレベルが低いんで、簡単なミスかもしれませんが、 すみませんが、どなたか分かる方いらっしゃいますでしょうか？
- ベストアンサー
- CSS
- 適用されているはずの外部cssが適用されない。。
すみませんが教えてください！ dreamweaver8でテーブルとcssでサイトをつくっているんですが、 ある一部分だけ全くcssが効きません。 <link href="../style.css" rel="stylesheet" type="text/css" /> <link href="menu_page.css" rel="stylesheet" type="text/css" /> ↑このページで使っているcss #2f-txt { margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 0px; } #2f-txt p { font-size: 13px; color: #FFFFFF; text-align: right; } ↑menu_page.cssの方に書かれてます。 <table width="390" border="0" cellspacing="0" cellpadding="0"> <tr> <td ><h2></h2></td> </tr> <tr> <td> <table width="390" id="2f-txt"> <tr> <td> <h3><p>ここのテキスト</p></h3> </td> </tr> </table> </td> </tr> </table> ↑id="2f-txt"のテーブル・テキスト等にかけたい ※見にくくてすみません・・・ dreamweaverのデザインビュー上ではしっかり効いているんですが、 ブラウザで見るとmenu_page.cssに書いてある#2f-txt ・#2f-txt p が全く効いていません。 他のページでも同じような使い方をしている箇所があるんですが、 そこは問題ありません。いろいろと試してはみたんですが、全くだめで、どういうことか全く分かりません。 まだレベルが低いんで、簡単なミスかもしれませんが、 すみませんが、どなたか分かる方いらっしゃいますでしょうか？
- ベストアンサー
- HTML
- Fireworks CS3（Mac）でのレイヤーをDreamweaver CS3（Mac）にペーストした場合。
Fireworks CS3（Mac）でのレイヤーをDreamweaver CS3（Mac）にペーストした場合、テキストはテキスト、画像は画像としてHTML、CSSに反映されるのでしょうか？ Fireworks CS3ではレイヤーでのデザインができ、それをそのままDreamweaver CS3にペーストできるそうですが、レイヤーグループ（「ぬりつぶしレイヤー」「テキストレイヤー」「テキストレイヤーに対してクリッピングマスクしているレイヤー」）をDreamweaver CS3にペーストした場合、テキストはテキスト、画像は画像としてHTML、CSSに反映されるのでしょうか？それとも、テキストも画像として反映されてしまうのでしょうか？ そもそもDreamweaver CS3にレイヤーグループや、レイヤーでの制作ができるのかわかりませんが、、、。 よろしくお願いいたします。
- 締切済み
- ホームページ作成ソフト
- 使用しているPGはDREAMWEAVER CS5 ですが。CSSにおい
使用しているPGはDREAMWEAVER CS5 ですが。CSSにおいてブロックの角が丸くなるオプションはあるのでしょうか。また無ければどのような方法で角を丸くしているのでしょうか？ よろしくお願いします。 例 OKWAVEさんの各ページなど
- ベストアンサー
- CSS
お礼
こんばんは、naokita様 大事な休みの最中だったはずなのに、こんなにしていただき なんてお礼を言っていいのか、わかりません 本当にどうも有り難うございました。どんなにお礼を言ってもいい足りないと思います。 あれからじっくり、dl dt dd をひもとき今まで考えました。 まだまだ、html ソースがおかしいとは思いますが 自分なりに menuページを完成する事ができました http://style-blue.net/senkai/menu.html 慌てていたら何もできませんね。 ここでご指導いただいたことは忘れません。 また、足を踏み外し彷徨った時には、ご指導宜しくお願い致します。 どうも有り難うございました。