- PR -

Menuコントロール空白部分クリックについて

投稿者投稿内容
手探り
常連さん
会議室デビュー日: 2006/10/20
投稿数: 24
投稿日時: 2007-11-20 09:56
お世話になります。手探りです。

【開発環境】
VS2005 Professional Edition
Webサイト にて開発を行っています

【質問内容】
現在コントロールに文字数が違うものを下記のように展開しております。

(例
親−−−
   |
  こども1
  文字数の多いこども2

このように展開された場合、「こども1」の後ろには「6文字」ほど
空白ができています。
この空白部分をクリックしてもイベントを発生させたいのですが、
方法はあるでしょうか。調べたのですが方法が見つかりませんでした。
何か情報をお持ちの方がおられましたら、お教え願えないでしょうか。
宜しくお願い致します。
まるく
大ベテラン
会議室デビュー日: 2004/01/09
投稿数: 181
投稿日時: 2007-11-20 13:02
引用:

手探りさんの書き込み (2007-11-20 09:56) より:
お世話になります。手探りです。

【開発環境】
VS2005 Professional Edition
Webサイト にて開発を行っています

【質問内容】
現在コントロールに文字数が違うものを下記のように展開しております。

(例
親−−−
   |
  こども1
  文字数の多いこども2

このように展開された場合、「こども1」の後ろには「6文字」ほど
空白ができています。
この空白部分をクリックしてもイベントを発生させたいのですが、
方法はあるでしょうか。調べたのですが方法が見つかりませんでした。
何か情報をお持ちの方がおられましたら、お教え願えないでしょうか。
宜しくお願い致します。



どんな HTML がクライアントにきていますか?
#手元に環境がないので。。。
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2007-11-20 13:21
HTML/CSS ベースで考えると、block 要素にするかあるいは親要素に合わせて width を均一になるように指定するとかですね。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
手探り
常連さん
会議室デビュー日: 2006/10/20
投稿数: 24
投稿日時: 2007-11-20 14:13
まるく様、じゃんぬねっと様 返信ありがとうございます。

今回使用しているコントロールについて、
表記するのが抜けておりました。申し訳ございません。
メニューを展開する為に、Framework 2.0から追加された
サイトナビゲーションのMenuControlを使用しております。
今回の質問は、このコントロールを使用した際の質問です。
申し訳ございません。

>まるく様
HTMLが自動的に生成されますので、どの部分をお教えして良いか
分かりかねたので、求められている部分かどうか分かりませんが
このようになっています。
<table id="Menu1" class="Menu1_2" cellpadding="0" cellspacing="0" border="0" style="z-index: 100; left: 0px; position: absolute; top: 0px">
<tr>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n0"><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="Menu1_1" href="javascript:__doPostBack('Menu1','親')">親</a></td><td style="width:0;"><img src="/MenuTest%ef%bc%93/WebResource.axd?d=7Ap_BPmLjp4dXsL21Q_x-mrGi32a5QydvJzGh01ButQ1&t=633240651890061737" alt="親 の展開" style="border-style:none;vertical-align:middle;" /></td>
</tr>
</table></td>
</tr>
</table>
<div id="Menu1n0Items" class="Menu1_0">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n1">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1" href="javascript:__doPostBack('Menu1','親\\\\こども1')">こども1</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n2">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="Menu1_1" href="javascript:__doPostBack('Menu1','親\\\\文字数の多いこども2')">文字数の多いこども2</a></td>
</tr>
</table></td>
</tr>
</table><div class="Menu1_0" id="Menu1n0ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/MenuTest%ef%bc%93/WebResource.axd?d=z2n6ahlxDWfGhwpVsv4dvf2uRT4b-UgRxmSBiFTix201&t=633240651890061737" alt="上にスクロール" />
</div><div class="Menu1_0" id="Menu1n0ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/MenuTest%ef%bc%93/WebResource.axd?d=ovE_Sg2DRWhupB248ksANoNc83um2niMN9UoKLy-uPA1&t=633240651890061737" alt="下にスクロール" />
</div>
</div>

>じゃんぬねっと様
今回使用しているものは、HTML/CSS ベースのメニューではございません。
申し訳ございません。
こちらの方法は、HTML/CSS ベースで行った時に利用させていただきます。
ありがとうございます。
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2007-11-20 14:50
引用:

手探りさんの書き込み (2007-11-20 14:13) より:

今回使用しているものは、HTML/CSS ベースのメニューではございません。
申し訳ございません。
こちらの方法は、HTML/CSS ベースで行った時に利用させていただきます。
ありがとうございます。


書き方が悪かったみたいです。 そういった意味で書いたのではなく、

引用:

手探りさんの書き込み (2007-11-20 14:13) より:

HTMLが自動的に生成され


ますので、HTML ソースからどのあたりを CSS でスタイル統一するかを検討させるために書きました。 HTML をどうこうする必要はなく CSS だけでも一応可能です。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
まるく
大ベテラン
会議室デビュー日: 2004/01/09
投稿数: 181
投稿日時: 2007-11-20 14:58
引用:

>じゃんぬねっと様
今回使用しているものは、HTML/CSS ベースのメニューではございません。
申し訳ございません。
こちらの方法は、HTML/CSS ベースで行った時に利用させていただきます。
ありがとうございます。



じゃんぬねっとさんが仰っているのは、私の問いかけと本質的には同じです。
要するに最終的には HTML にレンダリングされる訳だから、どういう HTML が出力されるように実装すれば良いのか、という視点から案を書いてくださっています。

というかそういう視点で考えないと答えにはたどり着けません。

で、ご提示の HTML を見るとアンカータグですね。

コード:

<HTML>
<HEAD>
</HEAD>
<BODY>
<a href="..." style="width:200px;">こども1</a>
<br>
<a href="..." style="width:200px;">文字数の多いこども2</a>
</BODY>
</HTML>



#あ、先を越されました。。。

[ メッセージ編集済み 編集者: まるく 編集日時 2007-11-20 15:00 ]
手探り
常連さん
会議室デビュー日: 2006/10/20
投稿数: 24
投稿日時: 2007-11-21 09:18
じゃんぬねっと様、まるく様 おはようございます。

適格なご指摘ありがとうございます。
最終的にはHTMLが出力されるのですから、
その観点からみないと解決はできませんよね。
ご指摘の通りに アンカータグ の幅を指定する事により
求めていたものにいきつきました。ありがとうございます。

最後に1つ質問させて頂きます。
メニューコントロールについては 親−こども 共にアンカータグ になります。
そこで、親 には幅指定をせず こども にのみ幅指定する方法はあるでしょうか?
同じアンカータグなので無理かなと思っているのですが、、、
質問ばかりで申し訳ございません。
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2007-11-21 10:07
引用:

手探りさんの書き込み (2007-11-21 09:18) より:

ご指摘の通りに アンカータグ の幅を指定する事により求めていたものにいきつきました。


幅を固定化してしまうとフォント サイズ変更時のアクセシビリティに影響を及ぼすのでお勧めしません。 block 要素にするかあるいは親要素に合わせて相対的に width を決めるのが定石かなと思います。

引用:

メニューコントロールについては 親−こども 共にアンカータグ になります。
そこで、親 には幅指定をせず こども にのみ幅指定する方法はあるでしょうか?


class やら id やらが振られていますからあるにはありますが... それにしても ASP.NET のレンダリングはもう少し賢くなって欲しいですね。 class の振り方とかおかしいと言わざるを得ないです。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌

スキルアップ/キャリアアップ(JOB@IT)