none
マスターページを使用したページを横に並べたい RRS feed

  • 質問

  • マスターページを使用して、ページフォームを作ると
    上下に

    「ヘッダ」
    「コンテンツ」

    というような形でページが作られますが

    これを
    「左(ヘッダ)」「右(コンテンツ)」

    というように、並べることはできないでしょうか

    思いつきで下の用なページを作ってみたのですが、うまくいきませんでした
    たぶんちょっとしたことだと思うのですが、何かヒントは無いでしょうか

    ------------------------------------------------------------------------マスターページ
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>

    <!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>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <h1>たらりらたらりら</h1>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>
    </html>

    ------------------------------------------コンテンツページ
    <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="content.aspx.cs" Inherits="WebApplication1.content" %>
    <div style="float:left">     <-HTMLで左寄せ★★★★★★★★★★★★★★★★★
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    </div>
    <div style="float:right">    <-HTMLで右寄せ★★★★★★★★★★★★★★★★★
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <p>
        <br />
        ららら</p>
    </asp:Content>
    </div>

    2013年3月11日 9:57

回答

  • 以下ご参考までに、連携します。

     

    以下のほうな方法で横並びができますよ。

    マスターページ

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="HeadContent" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
      <form id="Form1" runat="server">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
      </form>
    </body>
    </html>

    コンテンツページ

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
        <div style="float:left;">
            たりらりら
        </div>
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
        <div style="float:left;">
            ららら
        </div>
        <div style="clear:both;"></div>
    </asp:Content>
     

    横並びしか考えていないため、余白などは、marginなどで別途調整してください。

     

    後、サンプルのコードですので、styleはべた書きにさせていただきましたが、可能であればclassを指定してあげたほうが良いと思います。

    • 回答としてマーク いちろう 2013年3月13日 1:19
    2013年3月11日 10:44

すべての返信

  • 以下ご参考までに、連携します。

     

    以下のほうな方法で横並びができますよ。

    マスターページ

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="HeadContent" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
      <form id="Form1" runat="server">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
      </form>
    </body>
    </html>

    コンテンツページ

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
        <div style="float:left;">
            たりらりら
        </div>
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
        <div style="float:left;">
            ららら
        </div>
        <div style="clear:both;"></div>
    </asp:Content>
     

    横並びしか考えていないため、余白などは、marginなどで別途調整してください。

     

    後、サンプルのコードですので、styleはべた書きにさせていただきましたが、可能であればclassを指定してあげたほうが良いと思います。

    • 回答としてマーク いちろう 2013年3月13日 1:19
    2013年3月11日 10:44
  • Content1の定義位置がheadの中なんですけれど、これは意図したものなんでしょうか。
    2013年3月12日 3:03
  • ありがとうございます

    中に書かなきゃいけなかったんですね

    出来上がったhtmlを見ながら、cssに移していって見ます

    元からあるIDが、ContentPlaceHolderIDと合成されたりちょっと癖があるので、その辺も調べながらやってみます

    2013年3月13日 1:19
  • とくに意図はありません
    親ページと、子ページの関係を間違って理解していたためそうなりました
    2013年3月13日 1:20
  • 思い違いがあるようですね。

    head 要素の中の ContentPlaceHolder に含めるのは、コンテンツのヘッダではなく、それぞれのページで使用する JavaScript やスタイルの定義です。以下のページの「head タグ内の ContentPlaceHolder の使い方」を見てください。

    ASP.NET マスターページとは
    http://atamoco.boy.jp/asp/20100817_1.php


    コンテンツのヘッダ、サイドバー、フッタなどは body 要素に含めます。表示位置は css でどのようにでも変更できます。

    2013年3月13日 2:14