WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:HRに挟まれた文字の中央揃え

0:[投稿] fai [URL] [2002/07/10 19:50 ][環境:WIN+IE わからない]

はじめまして。
ある練習問題で、どうしても分からなかったので質問させていただきました。(過去ログで見当たらなかったので・・・)

うまく説明できませんので、アップしてみました。
http://www.minc.ne.jp/~tumi/test/3page.html

左寄せのテーブル(カレンダー)があって、更にテーブルを回り込ませています。
その下の2つの水平線の間に文字があって、これを水平線に対してセンタリングしないといけないのですが、うまくいきません。

HRは幅74%で右寄せ、文字はセンタリングですがHRの丁度真ん中に来るようにしなくてはならないのです。
無い知恵を絞りましたが、自分ではページに対してのセンタリングしかできないので、よろしかったらお知恵を貸して下さい。


1:[回答] 通りがけ。 [2002/07/10 23:53 ]

下記の例の様な感じでしょうか。
WinIE6, Netscape4.7, Netscape6/Mozilla, Opera6 で
大体同じ見栄えになることを確認しました。

<div align="right">
 <div style="width:74%; border:solid 1px #ccc;">
   <hr size="1" noshade>
   <p align="center" style="margin:0;"><font color="#0000cc"><b><u>次回更新日は7月15日です。</u></b></font></p>
   <hr size="1" noshade>
 </div>
</div>


2:[回答] 通りがけ。 [2002/07/11 00:40 ]

1の例は部分的な修正案ですが、
全体的に見直して同じレイアウトを試みるならば、
私はこんな感じに記述します。

<html>
<head>
<title>Profile</title>
<style type="text/css">
<!--
.calendar {
 position: absolute; left: 1em;
}
.main {
    margin-left: 15em;
}
.info {
 margin-top: 1em; padding: .5em;
 border: solid 1px #000;
 border-width: 1px 0 1px 0;
 border-color: #888;
}
.info p {
 text-align: center;
 margin: 0;
}
.navigation {
 text-align: right;
 margin-top: .5em;
}
.navigation p {
 margin: 0;
}
-->
</style>
</head>

<body>

<div class="calendar">
 <table border="1" width="163">
 <tr>
   <td>7月カレンダー</td>
 </tr>
 </table>
</div>

<div class="main">
 <table border="1" width="450" align="center">
 <tr>
   <td>Profile</td>
 </tr>
 </table>
 <div class="info">
   <p>次回更新日。</p>
 </div>
</div>

<div class="navigation">
 <p>
 <a href="2page.html"><img src="bt-back.gif" border="0" alt="[Back]"></a>
 <a href="1page.html"><img src="bt-top.gif"  border="0" alt="[Top]"></a>
 </p>
</div>

</body>
</html>


3:[質問] fai [2002/07/11 14:23 ]

通りがけさん、ご丁寧な回答ありがとうございます。
早速試してみようと思います。

ところで、スタイルシートを使わずに同じ事は出来るでしょうか?
簡単なタグだけで作らないと減点になるようなのですが、やり方は教えてもらえないので、お手上げなのです。

とりあえず、1のやり方でやってみます。
ありがとうございました。


4:[回答] さっぱり★ [2002/07/11 15:36 ]

こんな感じですか。

<div style="clear:both;margin-left:26%;text-align:center">
<hr>
<p>次回更新日は7月15日です。</p>
<hr>
</div>

スタイルシートを使わないということになると、tableでしょうか?
かえって複雑になると思いますが。


5:[関連] さっぱり★ [2002/07/11 16:11 ]

ちなみに、枠線を消すなら<td style="border:hidden">です。
http://www.hajimeteno.ne.jp/cgi-bin/tree_bbs/bbs.cgi?num=7113&ope=sel


6:[完了] fai [2002/07/11 20:42 ]

皆さんに教えていただいた方法だと、うまく出来るのですが、スタイルシートを全く使わないとなるとやはり、テーブルを使用しないと無理っぽいですね(汗)
なんだかお手を煩わせてしまい、申し訳ありませんでした。

改めて、通りがけさん、さっぱり★さん、ご親切に教えていただきましてありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World