- ベストアンサー
CSS flot の設定について
- flot を使って、左の画像と右のたい等の文の、上側高さの位置を揃えたいのですが、うまくいきません。
- 何日も同じ事の繰り返しで、負のスパイラルに落ちこんでいます。
- 使用ソフトは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を追加しました。
お礼
こんばんは、naokita様 大事な休みの最中だったはずなのに、こんなにしていただき なんてお礼を言っていいのか、わかりません 本当にどうも有り難うございました。どんなにお礼を言ってもいい足りないと思います。 あれからじっくり、dl dt dd をひもとき今まで考えました。 まだまだ、html ソースがおかしいとは思いますが 自分なりに menuページを完成する事ができました http://style-blue.net/senkai/menu.html 慌てていたら何もできませんね。 ここでご指導いただいたことは忘れません。 また、足を踏み外し彷徨った時には、ご指導宜しくお願い致します。 どうも有り難うございました。