破線で四角い枠を作り、中に文字をいれたい。

質問

DreamWeaver4、photoshopElements4、illustrator8を使ってHP作成中なのですが、タイトルの通り破線で四角い枠（装飾として）を作り、その中にDreamWeaverで文字を入れ、なおかつ横線を入れて上下を分けたいと思っています。イラストレーターで破線四角を作っても中に文字を入れることができず、今度はイラストレータで、縦の破線と横の破線を作りDreamWeaver上で四角にしてみたのですが四角がきれいになりません。（角が合わなかったりして）一番良い方法を教えて下さい。説明がわかりにくくてすみません；

回答No.2

noname#20371 · ベストアンサー

ご参考
<style type="text/css">
<!--
#demo {
margin:0px;
padding:0px;
}
#demo table {
width:400px;
border-collapse: collapse;
}
#demo tr {
height:auto;
}
#demo td {
border:dashed 1px #000000;
margin:0px;
padding:10px;
}
#demo hr {
height:1px;
border:1px solid #ff0000;
margin:0px;
padding:0px;
}
-->
</style>
</head>

<div id="demo">
<table>
<tr>
<td>文字　文字　文字　文字　文字　文字　文字　文字　文字　文字　文字　文字
<hr>
文字　文字　文字　文字　文字　文字</td>
</tr>
</table>
</div>

お礼

shibuchaさま、ご回答ありがとうございました。
イメージ通りに出来ました！！
ただ、横線以下の文字にどうしてもcssが反映されないので、
再度ご回答いただければありがたいのです。
色はとりあえずタグで調整しましたが、大きさを変える方法がわかりません。どうぞ宜しくお願いします。

回答No.1

torayoshi

完成図がイマイチ想像出来ないんですが、
装飾用の「四角い枠」は、テーブルの罫線を装飾してみてはいかがでしょうか。
で、予めその四角い枠（テーブル）の中に入れる横線付きの文字を画像として作っておく。
（これはフォトショで作れますよね）
あっ、単に文字に横線を入れるだけなら<s>タグで代用出来ませんか？

↓破線の枠のテーブル
<table bordercolor="好きな色" style="border-style:dashed">
<tr>
<td>横線付き文字の画像URL、もしくは<s>文字</s></td>
</tr>
</table>

お礼

torayoshiさま、ご回答ありがとうございました。
デザインのアイデアが浮かぶたびに躓いてますので
またどうぞ宜しくお願いします。