- PR -

【ASP.NET】Webページの余白(右余白)

«前のページへ 1|2
投稿者投稿内容
homes
常連さん
会議室デビュー日: 2002/08/06
投稿数: 38
投稿日時: 2004-10-15 10:10
ありがとうございます。
最小構成にて一度挑戦してみます。
まずは単純にボタンとDataGridを配置して
他のコントロールは配置せずにDataGridの動きを
見てみようと思います。
結果は後ほど報告させて頂きます。
homes
常連さん
会議室デビュー日: 2002/08/06
投稿数: 38
投稿日時: 2004-10-15 14:17
報告致します。
下記の最小構成のコードにて試してみました。
結果は同じ症状が続いております(-_-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout" rightmargin="200">
<form name="Form1" method="post" action="WebForm1.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDw3ODgxNzI4NzE7dDw7bDxpPDE+Oz47bDx0PDtsPGk8Mz47PjtsPHQ8QDA8Ozs7Ozs7Ozs7Oz47Oz47Pj47Pj47Pqukr9LbHjRxjMdr3xAY80M+EDd/" />

<FONT face="MS UI Gothic" style="MARGIN-RIGHT: 200px">
<input type="submit" name="Button1" value="Button" id="Button1" style="width:112px;Z-INDEX: 101; LEFT: 48px; POSITION: absolute; TOP: 40px" />
</FONT>
</form>
</body>
</HTML>
黄漢升
会議室デビュー日: 2004/10/15
投稿数: 2
投稿日時: 2004-10-15 14:50
初めて書き込みします。

引用:

homesさんの書き込み (2004-10-15 14:17) より:
<FONT face="MS UI Gothic" style="MARGIN-RIGHT: 200px">
<input type="submit" name="Button1" value="Button" id="Button1" style="width:112px;Z-INDEX: 101; LEFT: 48px; POSITION: absolute; TOP: 40px" />
</FONT>


これを見ると <font> にスタイルシートで右マージンを設定していますよね。
<font> は確かインライン要素です。

一方、スタイルシートのマージンは、
ブロック要素にのみ適用される属性だったような気がします。

これが原因でマージンが設定されないのではないでしょうか？

<font>をブロック要素である<div>に置き換えると、
マージンが反映されましたので・・・。
homes
常連さん
会議室デビュー日: 2002/08/06
投稿数: 38
投稿日時: 2004-10-15 15:53
返信ありがとうございます。
下記の通り直してみました。
結果はまったく変わらずでした。
下記はWebフォームのHTMLソースを表示しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout" rightmargin="200">
<form id="Form1" method="post" runat="server">
<Div style="MARGIN-RIGHT: 200px">
<asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 48px; POSITION: absolute; TOP: 40px" runat="server"
Width="120px" Text="Button"></asp:Button>
<asp:DataGrid id="GridMain" style="Z-INDEX: 102; LEFT: 56px; POSITION: absolute; TOP: 96px" runat="server"
Width="456px" Height="184px"></asp:DataGrid>
</Div>
</form>
</body>
</HTML>
えんぞ@？
ぬし
会議室デビュー日: 2004/07/06
投稿数: 271
お住まい・勤務地: はまっこ
投稿日時: 2004-10-15 16:20
（要点のみ）
Buttonコントロール／DataGridコントロールにstyle属性がありますが、それぞれどのような意味をなすか調べてみて下さい。
黄漢升
会議室デビュー日: 2004/10/15
投稿数: 2
投稿日時: 2004-10-15 16:47
あ、よく見るとこれ position:absolute ですね。

私は absolute ではなく相対配置で確認してました(-_-;

absoluteだと、私の上げた例では無理ですね・・・。

＜追加＞
absoluteの場合、次のような方法で右側にスペースを作るというのはどうでしょうか？

--------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<input type="submit" name="Button1" value="Button" id="Button1" style="left:10px; top:50px; position:absolute;" />
<table cellspacing="0" rules="all" id="GridMain" style="width:400px; left:10px; top:100px; position:absolute; border:1px;">
<tr><td>IntegerValue</td><td>StringValue</td><td>CurrencyValue</td></tr>
<tr><td>0</td><td>Item 0</td><td>1.23</td></tr>
<tr><td>1</td><td>Item 1</td><td>2.46</td></tr>
<tr><td>2</td><td>Item 2</td><td>3.69</td></tr>
<tr><td>3</td><td>Item 3</td><td>4.92</td></tr>
</table>
</form>

<!-- 右側の空白確保の為のスペーサー：データグリッド部分の配置が left:10px、top:100px、width:;400px、border:1px、なので、その右横に幅10pxの空白ボックスをhiddenで配置 -->
<!-- わかりやすくするため、枠を表示させて、hiddenを visible にしています -->
<div id="spacer" style="left:410px; top:100px; width:10px; height:10px; position:absolute; visibility:visible; border:1px solid #ff0000;"></div>


</body>
</HTML>

----------------

これはaspxへの直打ちで、
ページの横幅が400pxを超えない時にしか有効ではありませんけれど、
サーバーサイドで座標を計算して設定してあげれば、
データグリッド部分のサイズが変わっても大丈夫・・・かな。

＜さらに追記＞
上の例はかなり適当で、思いつきで書いたものなので、
もっとスマートな方法があれば、どなたか教えてください。

＃個人的には absolute は、使わないで済むなら使わないでおきたいです。
＃いろいろと面倒ですし・・・。


[ メッセージ編集済み 編集者: 黄漢升 編集日時 2004-10-15 17:46 ]

[ メッセージ編集済み 編集者: 黄漢升 編集日時 2004-10-15 17:53 ]
homes
常連さん
会議室デビュー日: 2002/08/06
投稿数: 38
投稿日時: 2004-10-16 08:57
みなさま大変ありがとうございました。
POSISON:relative　に変更したところ、
余白ができました。
実は私はHTMLの知識がほとんど無く、今までコントロールも
ドラッグアンドドロップで配置していただけなのでそのままの設定で
使えるものと思っておりました。
今回の件で基礎となるHTMLの知識の重要性を痛感させられました。
えんぞ@見習さん、黄漢升さん、長い時間無知な者にお付き合い頂き、
ありがとうございました。
«前のページへ 1|2

スキルアップ／キャリアアップ（JOB@IT）