- 締切済み
htmlの編集 位置替え DD使って
ｈｔｍｌ初心者です このｈｔｍｌについて見てください <a name="top"></a> <input type="image" src="http://img14.shop-pro.jp/PA01143/396/etc/botan1.jpg?20130718134606" name="button1" alt="Aボタン" onClick="location='#ご注文完了まで'"/> <input type="image" src="http://img14.shop-pro.jp/PA01143/396/etc/botan2.jpg?20130718134614" name="button2" alt="Bボタン" onClick="location='#お届けまで'"/> <input type="image" src="http://img14.shop-pro.jp/PA01143/396/etc/botan3.jpg?20130718134619" name="button3" alt="Cボタン" onClick="location='#お支払方法'"/> <h4 style="background-color:#00BFFF;text-align:left;padding:20px 10px;"> <b><font color="FFFFFF">お買い物の流れ</font></b> </h4> <br> <div style="position: relative;"> <img style="float: left" src="http://img14.shop-pro.jp/PA01143/396/etc/backcalor2.jpg?20130718144511" alt=""> <div style="position: absolute; top: 15px; left: 50px; width: 120px;"> <b>ご注文完了まで</b> </div> </div> <a name="ご注文完了まで"></a> <p style="text-indent:1.5em"> <font size="4"> STEP1. カートに入れる </font> </p> <div style="position: absolute; top: 200px; right: 270px; width: 120px;"> <img src="http://img14.shop-pro.jp/PA01143/396/etc/allow2.jpg?20130718141249" alt=""> </div> <br> <p style="text-indent:24em"> <font size="3"> カートに入れるボタンをクリックし、 </font> </p> <p style="text-indent:24em"> <font size="3"> 商品をカートに入れます。 </font> </p> <br> <hr align="right" style="border-top: 2px dashed #DAA520;width:64%;"> <p style="text-indent:17em"> <font size="4"> STEP2. レジに進む </font> </p> <div style="position: absolute; top: 338px; right: 270px; width: 120px;"> <img src="http://img14.shop-pro.jp/PA01143/396/etc/allow2.jpg?20130718141249" alt=""> </div> <br> <p style="text-indent:24em"> <font size="3"> レジに進むボタンをクリックし、 </font> </p> <p style="text-indent:24em"> <font size="3"> お客様情報入力画面に進みます。 </font> </p> <br> <hr align="right" style="border-top: 2px dashed #DAA520;width:64%;"> <p style="text-indent:17em"> <font size="4"> STEP3. お客様情報の入力 </font> </p> <div style="position: absolute; top: 486px; right: 270px; width: 120px;"> <img src="http://img14.shop-pro.jp/PA01143/396/etc/allow2.jpg?20130718141249" alt=""> </div> <br> 矢印の位置がChromeで見るとだんだん上にずれていきます ＜DIV＞の指定をやめてDLを使って＜DD＞の中にbackgroundとして指定すれば位置ずれしないと思ったのですが、上のｈｔｍｌをどう書き換えたらいいかわかりません；； DDを使わなくてもいいので位置ずれしないで矢印を表示できる方法があれば教えて下さい 回答待ってます
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- DrFell
- ベストアンサー率55% (305/551)
質問の箇所だけ htmlはデザイン無視で組みます。 <ol class="step"> <li>STEP1. カートに入れる <p>カートに入れるボタンをクリックし、<br>商品をカートに入れます。</p> </li> <li>STEP2. レジに進む <p>レジに進むボタンをクリックし、<br>お客様情報入力画面に進みます。</p> </li> <li>STEP3. お客様情報の入力</li> </ol> それに、ｃｓｓでデザインをつけます。お勧めは外部ファイルですが、今回は<head></head>内に以下を挿入してみてください。 <style> .step>li{ list-style-type:none; padding-left:1.5em; font-size:1.3em; border-bottom:2px dashed #DAA520; background:url(http://img14.shop-pro.jp/PA01143/396/etc/allow2.jpg) no-repeat 2em 2em; height:7em; margin-top:1em; line-height:1.8em; width:64%; } ol.step p{ margin-top:0.5em; font-size:0.9em; margin-left:4em; line-height:1.4em; } </style> 他にインラインスタイルシート以外に使っていなければ上手くいくはずです。 他の場所もかなりぐちゃぐちゃですので、＃1さんもおっしゃっていますが、基本から学び直されることをお勧めします。普通は0からですが、auschwitzさんの場合は余計な知識やお荷物がある分、マイナスからのスタートとなります。 やりたいことと同じに見えるデザインを探して回るより、自分で組み立てた方が早いです。4ケタの掛け算の全く同じ計算を探すより、九九を覚えて2ケタ以上の計算の仕方を覚える方が早いのと同じ。折角、捜しあてても間違った情報も沢山転がっていますよ。 今回は、順番のあるリストなのでol>liだと思いました。矢印は意味がない、なくてもいいものに思えます。理解を助けるデザインとの扱いにし、背景画像としました。htmlには中身だけ、ｃｓｓで見た目を制御するのが鉄則です。そのあたり、理念から学び直されることをお勧めします。
- play_with_you
- ベストアンサー率37% (112/301)
どうみてもposition: absoluteのせいというあなたが「position: absolute」の意味を分かっていないせい。 <font>を使っていることを含めいろいろと基礎がなっていないので、今後も同じような質問を繰り返す危険性があります。 解説サイトなどを利用し、早めにHTMLの正しい使い方を学んでください。
