C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[13]: Tableの位置ずれ、お気に入りのアイコンの設定方法について


(過去ログ 45 を表示中)

[トピック内 15 記事 (1 - 15 表示)]  << 0 >>

■23618 / inTopicNo.1)  Tableの位置ずれ、お気に入りのアイコンの設定方法について
  
□投稿者/ 開発者駆け出し (17回)-(2008/08/19(Tue) 14:05:33)

分類:[ASP.NET (VB)] 

お世話になります。

環境
OS:XPProSP2
ソフト:VWD2008(VB.NET)

2点お聞きしたいことがあります。

1.ASP.NETのページにUpdataPanelを置き、その上に
Tableが置いてあり、そのテーブルの中にいくつかコントロールがおいてあります。
実行した時に、画面を最大化すると思ったとおりの表示が出来るのですが、
画面を小さくすると一個分位Tableの位置が下にずれてしまいます。横幅が足りない時はスクロールバーでと思い
Tableに対してスクロールバーを入れてみたのですが効果がありません。
画面のサイズに関わらず配置されているコントロールの位置を絶対的に指定する方法ってあるのでしょうか?

2.作成したWebページをお気に入りに登録してもらった時に
お気に入りに入っているアイコンを変更する方法がありますか?
(紙に小文字のeが書いてあるようなアイコンを指定されたアイコンに変更する方法という意味です)
ちょっと分かりづらいかもしれませんが、ご教示お願い致します。
引用返信 編集キー/
■23620 / inTopicNo.2)  Re[1]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ 鶏唐揚 (283回)-(2008/08/19(Tue) 14:22:21)
No23618 (開発者駆け出し さん) に返信
> お世話になります。
> 2点お聞きしたいことがあります。
ASP.NETはわからないので2.に関してだけ。

Faviconを指定してやります
http://ja.wikipedia.org/wiki/Favicon
引用返信 編集キー/
■23622 / inTopicNo.3)  Re[2]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ 開発者駆け出し (19回)-(2008/08/19(Tue) 15:11:00)
No23620 (鶏唐揚 さん) に返信
> ■No23618 (開発者駆け出し さん) に返信
>>お世話になります。
>>2点お聞きしたいことがあります。
> ASP.NETはわからないので2.に関してだけ。
>
> Faviconを指定してやります
> http://ja.wikipedia.org/wiki/Favicon

鶏唐揚様
早速の返信ありがとう御座います。
無事2に関しては実現できました。

引用返信 編集キー/
■23694 / inTopicNo.4)  Re[3]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ 開発者駆け出し (20回)-(2008/08/20(Wed) 14:09:53)
No23622 (開発者駆け出し さん) に返信
> ■No23620 (鶏唐揚 さん) に返信
>>■No23618 (開発者駆け出し さん) に返信
> >>お世話になります。
> >>2点お聞きしたいことがあります。
>>ASP.NETはわからないので2.に関してだけ。
>>
>>Faviconを指定してやります
>>http://ja.wikipedia.org/wiki/Favicon
> 
> 鶏唐揚様
> 早速の返信ありがとう御座います。
> 無事2に関しては実現できました。
> 

もう一つ追加で質問をさせてください。
各aspxファイルのソースのDOCUMENTプロパティのTitleにページの名前を入れて、
実行中にタスクバーにページのタイトルが出るように設定しています。(クイック起動の右に出てるやつです)
ですが、エクセルを表示するページのみなぜか設定されたタイトルが表示されず、
アドレスが表示されてしまいます。
どのように設定すればよいかご教示ください。


1に関して私の説明が分かりづらかったでしょうか?
あれから、各コントロールにスクロールバーを入れてみても効果は見えず、完全に詰まってしまっています。
参考になるサイトやヒントでも頂けるとうれしいです。

引用返信 編集キー/
■23697 / inTopicNo.5)  Re[4]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ ま (107回)-(2008/08/20(Wed) 14:23:02)
No23694 (開発者駆け出し さん) に返信

> 1に関して私の説明が分かりづらかったでしょうか?
> あれから、各コントロールにスクロールバーを入れてみても効果は見えず、完全に詰まってしまっています。
> 参考になるサイトやヒントでも頂けるとうれしいです。

table-layout:fixed

で幅固定です。



引用返信 編集キー/
■23702 / inTopicNo.6)  Re[5]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ 開発者駆け出し (21回)-(2008/08/20(Wed) 15:02:25)
No23697 (ま さん) に返信
> ■No23694 (開発者駆け出し さん) に返信
>
>>1に関して私の説明が分かりづらかったでしょうか?
>>あれから、各コントロールにスクロールバーを入れてみても効果は見えず、完全に詰まってしまっています。
>>参考になるサイトやヒントでも頂けるとうれしいです。
>
> table-layout:fixed
>
> で幅固定です。
>
>
>

ま様返信ありがとう御座います。

ですが、幅を固定したいのではなくて、コントロールの位置を固定したいのです。
表示されているページをTableコントロールの幅以下にすると、Tableコントロールが
Tableコントロールの高さ分下に一個ずれるような形で表示されてしまう現象をなんとかしたいのです。
説明下手でうまく伝わらずすみません。
引用返信 編集キー/
■23719 / inTopicNo.7)  Re[6]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ もょもと (34回)-(2008/08/20(Wed) 16:06:55)
nowrapで自動改行を禁止してみてはどうでしょうか。
引用返信 編集キー/
■23742 / inTopicNo.8)  Re[7]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ 開発者駆け出し (22回)-(2008/08/21(Thu) 12:33:30)
No23719 (もょもと さん) に返信
> nowrapで自動改行を禁止してみてはどうでしょうか。

もょもと様
返信ありがとう御座います。
使ってみましたが変化がありませんでした。

画面上でサイドバーを使用しているのが原因でしょうか?
サイドバーの無いページですと、現象が起きません。
最初にTableコントロールと書きましたが、他のコントロールでもサイドバーのあるページだと
コントロールの横幅以下に画面サイズを変更するとコントロールが一個分下に落ちてしまう現象が起きています。

引用返信 編集キー/
■23786 / inTopicNo.9)  Re[8]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ ま (108回)-(2008/08/21(Thu) 23:18:34)
>>説明下手でうまく伝わらずすみません。

ミニマムコード提示して下さい。
サイドバーのことは後付情報ですよね。なんで最初に書かないのですか?

ところでサイドバーってなんですか?

ブラウザ標準の機能ですか?サードパーティのプラグインなら、コード提示
されてもそのプラグインをインストールしている人じゃなければ試せません
ね。



引用返信 編集キー/
■23798 / inTopicNo.10)  Re[9]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ 開発者駆け出し (23回)-(2008/08/22(Fri) 08:48:28)
2008/08/22(Fri) 09:29:35 編集(投稿者)
2008/08/22(Fri) 09:27:21 編集(投稿者)
<pre><pre>2008/08/22(Fri) 09:26:59 編集(投稿者)
<pre><pre>2008/08/22(Fri) 09:18:33 編集(投稿者)
<pre><pre>2008/08/22(Fri) 09:17:54 編集(投稿者)

<pre><pre>■No23786 (ま さん) に返信
> >>説明下手でうまく伝わらずすみません。
> 
> ミニマムコード提示して下さい。
> サイドバーのことは後付情報ですよね。なんで最初に書かないのですか?
> 
> ところでサイドバーってなんですか?
> 
> ブラウザ標準の機能ですか?サードパーティのプラグインなら、コード提示
> されてもそのプラグインをインストールしている人じゃなければ試せません
> ね。

ま様
返信ありがとう御座います。
> ミニマムコード提示して下さい。
> サイドバーのことは後付情報ですよね。なんで最初に書かないのですか?
サイドバーは関係の無い情報だと思っていましたので書きませんでした。
投稿後も色々テストをしたり、自分で調べたりしてサイドバーが関係しているのかな?
と思い追記させていただきました。
以下ソースです

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="End.aspx.vb" Inherits="EndStep2" Title="ページのタイトル" %>

<%@ MasterType VirtualPath="~/MasterPage.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        .style1
        {
            font-family: "MS ゴシック" , "Courier New" , monospace;
            font-size: large;
        }
        .style3
        {
            font-size: large;
        }
        .style6
        {
            width: 110px;
        }
        .style7
        {
            width: 50px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="height: 390px; width: 630px; overflow: scroll;">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Panel ID="Panel1" runat="Server" Wrap="false">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" EnableViewState="False" UpdateMode="Conditional">
                <ContentTemplate>
                   <table style="width: 610px;" >
                        <tr>
                            <td class="style6">
                                <asp:Label ID="Label12" runat="server" Text="AAAA"></asp:Label>
                            </td>
                            <td class="style7">
                                <asp:Button ID="BT_1" runat="server" Height="35px" Style="text-align: center;" Text="1" Width="35px" />
                            </td>
                            <td class="style7">
                                <asp:Button ID="BT_2" runat="server" Height="35px" Style="text-align: center;" Text="2" Width="35px" />
                                </span>
                            </td>
                            <td class="style7">
                                <asp:Button ID="BT_3" runat="server" Height="35px" Style="text-align: center;" Text="3" Width="35px" />
                                </span>
                            </td>
                            <td class="style7">
                                <asp:Button ID="BT_4" runat="server" Height="35px" Style="text-align: center;" Text="4" Width="35px" />
                                </span>
                            </td>
                            <td class="style7">
                                <asp:Button ID="BT_5" runat="server" Height="35px" Style="text-align: center;" Text="5" Width="35px" />
                            </td>
                            <td class="style7">
                                <asp:Button ID="BT_6" runat="server" Height="35px" Style="text-align: center;" Text="6" Width="35px" />
                            </td>
                            <td class="style7">
                                <asp:Button ID="BT_7" runat="server" Height="35px" Style="text-align: center;" Text="7" Width="35px" />
                            </td>
                            <td class="style7">
                                <asp:Button ID="BT_8" runat="server" Height="35px" Style="text-align: center;" Text="8" Width="35px" />
                            </td>
                            <td class="style7">
                                <asp:Button ID="BT_9" runat="server" Height="35px" Style="text-align: center;" Text="9" Width="35px" />
                            </td>
                            <td class="style7">
                                <asp:Button ID="BT_10" runat="server" Height="35px" Style="text-align: center;" Text="10" Width="35px" />
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
        <br />
    </div>
</asp:Content>

サイドバーはVisualWebDeveloper2008の標準機能です。サードパーティではありません。
msdnライブラリーのウェブページのようにページを分ける機能です。
今回のシステムではサイドバーにサイトマップを作り、そこから各ページに飛べるようにしてあります。
追記)
サイドバーは今回問題のページではなく、マスターページにあるためサイドバーのソースを乗せていませんでした。
以下サイドバーのある、マスターページのソースです。

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>マスターページ</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .style1
        {
            font-family: "MS ゴシック" , "Courier New" , monospace;
        }
        .style2
        {
            font-size: medium;
            text-align: center;
        }
        .style3
        {
            text-align: center;
        }
        .style4
        {
            font-size: large;
            font-weight: bold;
        }
        .style6
        {
            text-align: left;
        }
        .style7
        {
            font-size: medium;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align: center">
        <asp:Panel ID="TitlePN" runat="server">
            <h1 style="color: #FFFFFF; background-color: #0000FF">
                <asp:Label ID="Label1" runat="server" Text="ラベル" style="font-size: xx-large"></asp:Label>
            </h1>
        </asp:Panel>
        <div id="sidebar" class="style3">
            <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ShowLines="True" Font-Size="Medium" 
                Style="text-align: left; font-size: large;">
            </asp:TreeView>
            <br />
        </div>
        <div id="main">
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
        </div>
        <div id="Footer">
            <asp:Label ID="ErrorLB" runat="server" ForeColor="Red" Style="text-align: left;" />
        </div>
    </div>
    </form>
</body>
</html>

引用返信 編集キー/
■23819 / inTopicNo.11)  Re[10]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ ま (111回)-(2008/08/22(Fri) 11:23:35)
サイドバーのことわかりました。

要するにマスターページとコンテンツでフレーム分割しているように見せかけているのですね。

だとしたら、ポコってなるのは、float が絡んできませんか?

だって、サイドバーも、コンテンツも両方共、HTML に展開されると div 要素ですから。

あまり、こーゆーのはよくないかもしれませんが、現象の切り分けのために、以下のやり方
を提案します。VWD2008 はインストールしてないのでASP提出されても確認できません。

●テーブルで囲ってください。
table-layout:fixed でテーブルを固定して、現象が再現しないようであれば、フロート指定で
右コンテンツが横幅に収まりきらなくて”ポコ”ってなっている可能性がありますから。

●絶対位置で指定してみる。
パネルの内部だけ絶対ポジションで配置してみる。


#ポコが何がポコなのかもう少し具体的なイメージが沸くような説明してくれるとうれしいですね。

引用返信 編集キー/
■23838 / inTopicNo.12)  Re[11]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ 開発者駆け出し (24回)-(2008/08/22(Fri) 12:24:16)
No23819 (ま さん) に返信
> サイドバーのことわかりました。
> 
> 要するにマスターページとコンテンツでフレーム分割しているように見せかけているのですね。
> 
> だとしたら、ポコってなるのは、float が絡んできませんか?
> 
> だって、サイドバーも、コンテンツも両方共、HTML に展開されると div 要素ですから。
> 
> あまり、こーゆーのはよくないかもしれませんが、現象の切り分けのために、以下のやり方
> を提案します。VWD2008 はインストールしてないのでASP提出されても確認できません。
> 
> ●テーブルで囲ってください。
> table-layout:fixed でテーブルを固定して、現象が再現しないようであれば、フロート指定で
> 右コンテンツが横幅に収まりきらなくて”ポコ”ってなっている可能性がありますから。
> 
> ●絶対位置で指定してみる。
> パネルの内部だけ絶対ポジションで配置してみる。
> 
> 
> #ポコが何がポコなのかもう少し具体的なイメージが沸くような説明してくれるとうれしいですね。

ま様
返信ありがとう御座います。
テストしてみようと思いますが、違う仕事が入ってしまい、後ほどの結果報告とさせていただきます。
すみません。

 > #ポコが何がポコなのかもう少し具体的なイメージが沸くような説明してくれるとうれしいですね。

+----------------------------------------+
|Masterページのヘッダー               |
+-------+--------------------------------+
|※1   |                              |
|Master | +--------------+             |
|ページの|  | ポコっと      |              |
|サイドバー|  |なるところ    |        |
|     |  +--------------+              |
|       |                                |
+-------+--------------------------------+
 
この状態から画面を小さくしていき

+------------------------+
|Masterページのヘッダー |
+-------+----------------+
|     |              |
|Master | +--------------+             
|ページの|  | ポコっと      |              
|サイドバー|  |なるところ    |        
|     |  +--------------+              
|       |                |
+-------+----------------+
こんな感じにしようとすると普通下にスクロールバーがでて見えない部分も見えるようになるはずですが

+------------------------+
|Masterページのヘッダー |
+-------+----------------+
|     |              |
|Master |        |         
|ページの|                |
|サイドバー|          |
|     |                |
|       |  +--------------+  
|       |  | ポコっと      | 
|       |  |なります    |  
|    | +--------------+
+-------+----------------+
こんな感じにコントロールが一個分下にいってしまうのです。
一個分下に落ちるだけなので、見えない部分もあるためスクロールバーも表示されています。
下に落ちるだけでコントロールが小さくなるわけでもなく、何の意味も無い気がするのですが
なぜか上記のようなげんしょうになってしまっています。



引用返信 編集キー/
■23964 / inTopicNo.13)  Re[11]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ 開発者駆け出し (25回)-(2008/08/25(Mon) 15:58:19)
No23819 (ま さん) に返信
> サイドバーのことわかりました。
>
> 要するにマスターページとコンテンツでフレーム分割しているように見せかけているのですね。
>
> だとしたら、ポコってなるのは、float が絡んできませんか?
>
> だって、サイドバーも、コンテンツも両方共、HTML に展開されると div 要素ですから。
>
> あまり、こーゆーのはよくないかもしれませんが、現象の切り分けのために、以下のやり方
> を提案します。VWD2008 はインストールしてないのでASP提出されても確認できません。
>
> ●テーブルで囲ってください。
> table-layout:fixed でテーブルを固定して、現象が再現しないようであれば、フロート指定で
> 右コンテンツが横幅に収まりきらなくて”ポコ”ってなっている可能性がありますから。
>
> ●絶対位置で指定してみる。
> パネルの内部だけ絶対ポジションで配置してみる。
>
>
> #ポコが何がポコなのかもう少し具体的なイメージが沸くような説明してくれるとうれしいですね。

お世話になります。
先ほどま 様のアドバイスを受けテストをしてみたところ現象が改善されました。
テーブルの下にあるパネルに色をつけたりテーブルに色をつけたりしてみたところ、
どうも画面の大きさがパネルの大きさよりも小さくなると下に落ちる現象が出ているようでした。

なのでアドバイス通り絶対配置でパネルの位置を指定することで本現象を回避することにしました。
ありがとう御座いました。

>
解決済み
引用返信 編集キー/
■23979 / inTopicNo.14)  Re[12]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ ま (113回)-(2008/08/26(Tue) 01:42:49)
2008/08/26(Tue) 01:55:01 編集(投稿者)

直ってよかったですね。

ついでですが、こんな矯正方法もあります。
絶対配置したくないとき。

<div style="overflow:hidden;width:800px;height:1px;background-color:orange;"></div>

横幅を % で指定しちゃうといいように解釈されちゃうので、ちゃんと指定します。
昔レイアウト崩れ防止ではやった spacer.gif の div 版ですね。

とりあえず、変なレイアウト崩れ現象に出くわしたら、
・div 要素全部の背景色と枠線を表示する。全部色変えて。

たったこんだけのことするだけでもどこがおかしいのか、問題の切り分けというより、
問題山積みになりそうですが、見えない部分を視覚化することで新たな問題が見えて
きたりします。早期発見・早期解決へのとっかかりですね。


今日見つけたオモローなページ。
http://www.ajaxload.info/

一昨日インストールしてみたけどちょっと使えないかな?ツール。
http://www.debugbar.com/

CSSなんか即座に反映されるので実行したまんまいじれるのは便利かも???



解決済み
引用返信 編集キー/
■24001 / inTopicNo.15)  Re[13]: Tableの位置ずれ、お気に入りのアイコンの設定方法について
□投稿者/ 開発者駆け出し (26回)-(2008/08/26(Tue) 14:36:03)
2008/08/27(Wed) 11:49:37 編集(投稿者)
No23979 (ま さん) に返信
> 2008/08/26(Tue) 01:55:01 編集(投稿者)
>
> 直ってよかったですね。
>
> ついでですが、こんな矯正方法もあります。
> 絶対配置したくないとき。
>
> <div style="overflow:hidden;width:800px;height:1px;background-color:orange;"></div>

>
> 横幅を % で指定しちゃうといいように解釈されちゃうので、ちゃんと指定します。
> 昔レイアウト崩れ防止ではやった spacer.gif の div 版ですね。
>
> とりあえず、変なレイアウト崩れ現象に出くわしたら、
> ・div 要素全部の背景色と枠線を表示する。全部色変えて。
>
> たったこんだけのことするだけでもどこがおかしいのか、問題の切り分けというより、
> 問題山積みになりそうですが、見えない部分を視覚化することで新たな問題が見えて
> きたりします。早期発見・早期解決へのとっかかりですね。
>
>
> 今日見つけたオモローなページ。
> http://www.ajaxload.info/
>
> 一昨日インストールしてみたけどちょっと使えないかな?ツール。
> http://www.debugbar.com/
>
> CSSなんか即座に反映されるので実行したまんまいじれるのは便利かも???

ありがとうございます。助かりました。

紹介していただいた方法も試してみます。
ページも見てみたのですが、英語サイトのようですので、今度じっくり読んでみます。
お世話になりました。

解決済みにチェックをし忘れたのでチェックしておきます。
解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -