- ベストアンサー
HTMLの添削をお願いします
初心者ながらＨＰを作っているんですが、下記のＨＴＭＬを実行するとＩＥではちゃんと表示されるのですが、ＦｉｒｅＦｏｘでは水平線が直前の文章より上側に表記されてしまいますので直し方を教えてください。 あと、ＨＴＭＬ文の最後の方にある <div class="posi1"><p>この下に線を引きたいです</div></p> ですが、正しくは</p></div>だと思うんですがこれだとＩＥでも水平線が文章より上側に表示されてしまいます。できたらこの理由も教えてください。 <html> <head> <title>教えてください</title> <style type="text/css"> <!-- p { color:#856e66; width:700px; font-size:120%; line-height:2; } div.posi1 { position:absolute; left:192px; } --> </style> </head> <br><br> <div class="posi1"><p>この下に線を引きたいです</div></p> <hr width="800"><br> <h4 align="center">文章</h4> </body> </html>
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
どういうページを作りたいかによって、やり方は色々あると思います。 <table>タグを使って以下のようにやるのも１つの方法です。 <table align="center" border="0"> <tr> <td><p>この下に線を引きたいです</p></td> </tr> <tr> <td><hr width="800"><br></td> </tr> <tr> <td><h4 align="center">文章</h4></td> </tr> </table> ★<table>タグを使えば、レイアウトも狙ったものを作りやすいと思います。 （ただ、HTMLのタグがごちゃごちゃと複雑にはなったり、 CSSによるレイアウトでページを作りたい場合には不向きですが。） また、 >><div class="posi1"><p>この下に線を引きたいです</div></p>ですが、 >>正しくは</p></div>だと思うんですがこれだとＩＥでも水平線が文章より上側に表示されてしまいます ということについてですが、 <style>の記述にある、”position:absolute”という記述が影響しているためです。 absoluteは”絶対位置への配置”を意味しますので、 下線(<hr>のタグ)があろうとなかろうと、その位置にテキストが配置されるためです。 試しに、<p>と<div>を入れ替えた状態で、absoluteの記述を消してみると、 下線は下に来ると思います。
その他の回答 (3)
- SAYKA
- ベストアンサー率34% (944/2776)
チェックだけならこういうところを使ってみるとか http://openlab.ring.gr.jp/k16/htmllint/
お礼
回答ありがとうございます。 こういうサイトもあるんですね。これから利用していきたいと思います。
- labilion
- ベストアンサー率38% (43/111)
ちょっとだけいじってみました。 <html> <head> <title>教えてください</title> <style type="text/css"> <!-- div.posi1 { padding-left:192px; color:#856e66; font-size:120%;} --> </style> </head> <br><br><br> <div class="posi1">この下に線を引きたいです</div> <hr width="800"><br> <h4 align="center">文章</h4> </body> </html> 上に表示されてしまうのはpositionの指定のせいかな？ こちらは未確認です。
お礼
回答ありがとうございます。 うまく表示することができました。
- suzuko
- ベストアンサー率38% (1112/2922)
色々方法はありますね。 <style type="text/css"> <!-- p { color:#856e66; width:700px; font-size:120%; line-height:2; } .posi1 { position:absolute; left:192px; } --> </style> </head> <br><br> <p class="posi1">この下に線を引きたいです</p> <hr width="800"><br> とするとか。 <p>この下に線を引きたいです</p> <div class="posi1"></div> <hr width="800"><br> とか。
お礼
回答ありがとうございます。 上の方ではうまく表示されることができませんでしたが、下の方で表示することができました。
お礼
回答ありがとうございます。 <table>タグを使うと、その中の文章をきっちりセンターに持って行く技術がまだないので今回はちょっと使えませんでしたが、何が悪かったか分かりとても助かりました。