Problem laying out pages with divs or asp:table

Discussion in 'ASP .Net' started by David, Jul 16, 2009.

  1. David

    David Guest

    I'm having trouble with the looks of an asp.net Master page.

    What I want is a header that has two rows, and then the individual page
    content under that. On the left is a large area with some introductory text,
    covering 70% of the row. (i.e."Welcome to my cool web page, etc....") On
    the right, the page logo, at a width of 30% of the page. In the second row,
    5 commonly used navigation hyperlinks. The rest of the page is page specific
    content.

    So, I tried the following pseudo-markup.



    <asp:table>
    <asp:tablerow width="100%">
    <asp:tablecell width="70%">Intro text</asp:tablecell>
    <asp:tablecel witdth="30%"><asp:image logo/></asp:tablecell>
    </asp:tablerow>
    <asp:tablerow widht="100%>
    <asp:tablecell width="20%"><asp:hyperlink
    Text="Home".../></asp:tablecell>
    <.....insert four more table cells, width 20% here>
    </asp:tablerow>
    <asp:tablerow width="100%">
    <asp:contentplaceholder ..../>
    <asp:tablerow>

    It didn't work. I guess the tablecells end up lining up with each other,
    and the second of the hyperlinks from the second row ended up next to the
    logo. After much messing around with asp:tables and <table><tr><td> tags, I
    decided to go with style sheets.

    I tried the following psuedomarkup:

    style sheet:


    ..UpperBanner
    {
    width:70%;
    }

    ..Logo
    {
    width:30%;

    }

    ..MenuItem
    {
    width:20%
    }.

    And the markup:

    <div class="UpperBanner">Intro Text</div>
    <div class="Logo"><asp:image logo/></div>
    <br/>
    <div class="MenuItem">Nav link 1</div>
    <div class="MenuItem">Nav link 2</div>
    <div class="MenuItem">Nav link 3</div>
    <div class="MenuItem">Nav link 4</div>
    <div class="MenuItem">Nav link 5</div>
    <br>
    <div>
    <asp:ContentPlaceHolder ..../>
    </div>

    Everything was the correct size, but each "div" started at a new line. I
    tried various combinations of "left" values and "position" values, but no
    luck. I found a couple of examples, but all of them featured absolute
    positioning using pixel values, which I wanted to avoid.

    I also tried <tr> and defining 10 <td? elements, each wtih a width of 10%,
    and using columnspan attributes to take up different 10% chunks of space, but
    that didn't work.


    Is there a good, web accessible, description of using either divs, <table>s
    or <asp:table>s to do a web layout where the elements of each row are of
    different witdths? What I really want is three rows of stuff. The first row
    has two elements. 70% on the left side, 30% on the left. The second row has
    five adjacent elements, each taking up 20%. The third row has a single
    element that takes up 100% of the screen width.
     
    David, Jul 16, 2009
    #1
    1. Advertising

  2. David

    David Guest

    The following code works, almost:

    <asp:Table runat="server">
    <asp:TableRow runat="server" Width="100%">
    <asp:TableCell ID="TableCell25" runat="server" Width="10%"></asp:TableCell>
    <asp:TableCell ID="TableCell27" runat="server" Width="10%"></asp:TableCell>
    <asp:TableCell ID="TableCell28" runat="server" Width="10%"></asp:TableCell>
    <asp:TableCell ID="TableCell29" runat="server" Width="10%"></asp:TableCell>
    <asp:TableCell ID="TableCell30" runat="server" Width="10%"></asp:TableCell>
    <asp:TableCell ID="TableCell31" runat="server" Width="10%"></asp:TableCell>
    <asp:TableCell ID="TableCell32" runat="server" Width="10%"></asp:TableCell>
    <asp:TableCell ID="TableCell33" runat="server" Width="10%"></asp:TableCell>
    <asp:TableCell ID="TableCell34" runat="server" Width="10%"></asp:TableCell>
    <asp:TableCell ID="TableCell35" runat="server" Width="10%"></asp:TableCell>
    </asp:TableRow>
    <asp:TableRow runat="server" width="100%">
    <asp:TableCell runat="server" ColumnSpan="7">Welcome to my web
    page.</asp:TableCell>
    <asp:TableCell runat="server" ColumnSpan="3"><asp:Image ID="Image1"
    runat="server" ImageUrl="~/Images/ypicture.bmp" /></asp:TableCell>
    </asp:TableRow>
    <asp:TableRow runat="server" Width="100%">
    <asp:TableCell runat="server" ColumnSpan="2">
    <asp:Label ID="LoginLabel" runat="server" Text="dummy"/> </asp:TableCell>
    <asp:TableCell ID="TableCell36" runat="server" ColumnSpan="2">
    <asp:HyperLink ID="HyperLink3" runat="server" Text="Nav2"
    NavigateUrl="~\somepage.aspx" ></asp:HyperLink>
    </asp:TableCell>
    <asp:TableCell ID="TableCell37" runat="server" ColumnSpan="2">
    <asp:HyperLink ID="HyperLink4" runat="server" Text="My page"
    NavigateUrl="~\mypage.aspx"></asp:HyperLink>
    </asp:TableCell>
    <asp:TableCell ID="TableCell38" runat="server" ColumnSpan="2">
    <asp:HyperLink ID="HyperLink5" runat="server" Text="another"
    NavigateUrl="~/another.aspx"></asp:HyperLink>
    </asp:TableCell>
    <asp:TableCell ID="TableCell39" runat="server" ColumnSpan="2">
    <asp:HyperLink ID="HyperLink6" runat="server" Text="My page"
    NavigateUrl="~\LogonRequiredPages\mypage.aspx"></asp:HyperLink>
    </asp:TableCell>

    </asp:TableRow>
    </asp:Table>

    I say "almost" because it doesn't actually fill up 100% of the window. If
    the content for a given column isn't wide enough to fill the space allocated,
    the column shrinks. I can work around that, but I would rather not have to.
    Besides, the solution seems goofy. There has to be a more straightforward
    way.

    "David" wrote:

    > I'm having trouble with the looks of an asp.net Master page.
    >
    > What I want is a header that has two rows, and then the individual page
    > content under that. On the left is a large area with some introductory text,
    > covering 70% of the row. (i.e."Welcome to my cool web page, etc....") On
    > the right, the page logo, at a width of 30% of the page. In the second row,
    > 5 commonly used navigation hyperlinks. The rest of the page is page specific
    > content.
    >
    > So, I tried the following pseudo-markup.
    >
    >
    >
    > <asp:table>
    > <asp:tablerow width="100%">
    > <asp:tablecell width="70%">Intro text</asp:tablecell>
    > <asp:tablecel witdth="30%"><asp:image logo/></asp:tablecell>
    > </asp:tablerow>
    > <asp:tablerow widht="100%>
    > <asp:tablecell width="20%"><asp:hyperlink
    > Text="Home".../></asp:tablecell>
    > <.....insert four more table cells, width 20% here>
    > </asp:tablerow>
    > <asp:tablerow width="100%">
    > <asp:contentplaceholder ..../>
    > <asp:tablerow>
    >
    > It didn't work. I guess the tablecells end up lining up with each other,
    > and the second of the hyperlinks from the second row ended up next to the
    > logo. After much messing around with asp:tables and <table><tr><td> tags, I
    > decided to go with style sheets.
    >
    > I tried the following psuedomarkup:
    >
    > style sheet:
    >
    >
    > .UpperBanner
    > {
    > width:70%;
    > }
    >
    > .Logo
    > {
    > width:30%;
    >
    > }
    >
    > .MenuItem
    > {
    > width:20%
    > }.
    >
    > And the markup:
    >
    > <div class="UpperBanner">Intro Text</div>
    > <div class="Logo"><asp:image logo/></div>
    > <br/>
    > <div class="MenuItem">Nav link 1</div>
    > <div class="MenuItem">Nav link 2</div>
    > <div class="MenuItem">Nav link 3</div>
    > <div class="MenuItem">Nav link 4</div>
    > <div class="MenuItem">Nav link 5</div>
    > <br>
    > <div>
    > <asp:ContentPlaceHolder ..../>
    > </div>
    >
    > Everything was the correct size, but each "div" started at a new line. I
    > tried various combinations of "left" values and "position" values, but no
    > luck. I found a couple of examples, but all of them featured absolute
    > positioning using pixel values, which I wanted to avoid.
    >
    > I also tried <tr> and defining 10 <td? elements, each wtih a width of 10%,
    > and using columnspan attributes to take up different 10% chunks of space, but
    > that didn't work.
    >
    >
    > Is there a good, web accessible, description of using either divs, <table>s
    > or <asp:table>s to do a web layout where the elements of each row are of
    > different witdths? What I really want is three rows of stuff. The first row
    > has two elements. 70% on the left side, 30% on the left. The second row has
    > five adjacent elements, each taking up 20%. The third row has a single
    > element that takes up 100% of the screen width.
     
    David, Jul 16, 2009
    #2
    1. Advertising

  3. David

    Craig Guest

    "David" <> wrote in message
    news:...
    > I'm having trouble with the looks of an asp.net Master page.
    >
    > What I want is a header that has two rows, and then the individual page
    > content under that. On the left is a large area with some introductory
    > text,
    > covering 70% of the row. (i.e."Welcome to my cool web page, etc....") On
    > the right, the page logo, at a width of 30% of the page. In the second
    > row,
    > 5 commonly used navigation hyperlinks. The rest of the page is page
    > specific
    > content.
    >
    > So, I tried the following pseudo-markup.
    >
    >
    >
    > <asp:table>
    > <asp:tablerow width="100%">
    > <asp:tablecell width="70%">Intro text</asp:tablecell>
    > <asp:tablecel witdth="30%"><asp:image logo/></asp:tablecell>
    > </asp:tablerow>
    > <asp:tablerow widht="100%>
    > <asp:tablecell width="20%"><asp:hyperlink
    > Text="Home".../></asp:tablecell>
    > <.....insert four more table cells, width 20% here>
    > </asp:tablerow>
    > <asp:tablerow width="100%">
    > <asp:contentplaceholder ..../>
    > <asp:tablerow>
    >
    > It didn't work. I guess the tablecells end up lining up with each other,
    > and the second of the hyperlinks from the second row ended up next to the
    > logo. After much messing around with asp:tables and <table><tr><td>
    > tags, I
    > decided to go with style sheets.
    >
    > I tried the following psuedomarkup:
    >
    > style sheet:
    >
    >
    > .UpperBanner
    > {
    > width:70%;
    > }
    >
    > .Logo
    > {
    > width:30%;
    >
    > }
    >
    > .MenuItem
    > {
    > width:20%
    > }.
    >
    > And the markup:
    >
    > <div class="UpperBanner">Intro Text</div>
    > <div class="Logo"><asp:image logo/></div>
    > <br/>
    > <div class="MenuItem">Nav link 1</div>
    > <div class="MenuItem">Nav link 2</div>
    > <div class="MenuItem">Nav link 3</div>
    > <div class="MenuItem">Nav link 4</div>
    > <div class="MenuItem">Nav link 5</div>
    > <br>
    > <div>
    > <asp:ContentPlaceHolder ..../>
    > </div>
    >
    > Everything was the correct size, but each "div" started at a new line. I
    > tried various combinations of "left" values and "position" values, but no
    > luck. I found a couple of examples, but all of them featured absolute
    > positioning using pixel values, which I wanted to avoid.
    >
    > I also tried <tr> and defining 10 <td? elements, each wtih a width of 10%,
    > and using columnspan attributes to take up different 10% chunks of space,
    > but
    > that didn't work.
    >
    >
    > Is there a good, web accessible, description of using either divs,
    > <table>s
    > or <asp:table>s to do a web layout where the elements of each row are of
    > different witdths? What I really want is three rows of stuff. The first
    > row
    > has two elements. 70% on the left side, 30% on the left. The second row
    > has
    > five adjacent elements, each taking up 20%. The third row has a single
    > element that takes up 100% of the screen width.



    David,

    In dealing with HTML or ASP tables, unlike Excel or Word tables where you
    can change the cell size at will, you have to deal with the least common
    denominator, in this case it would be the four (or five – you said four
    cells at 20%) or ten cells.

    So yes, you’re actually barking up the right tree when you create five
    cells, then ColumnSpan=â€x†to what you need.

    This example only goes for 5 wide, but you get the idea.

    <form id="form1" runat="server">
    <asp:table runat="server" Width="100%">

    <asp:tablerow ID="Tablerow1" Width="100%">
    <asp:tablecell ID="Tablecell1" ColumnSpan="3">Intro
    text</asp:tablecell>
    <asp:tablecell ID="Tablecell2" ColumnSpan="2">IMAGE
    HERE</asp:tablecell>
    </asp:tablerow>

    <asp:TableRow>
    <asp:TableCell Width="20%">Apples</asp:TableCell>
    <asp:TableCell Width="20%">Oranges</asp:TableCell>
    <asp:TableCell Width="20%">Pears</asp:TableCell>
    <asp:TableCell Width="20%">Kiwis</asp:TableCell>
    <asp:TableCell Width="20%">Bananas</asp:TableCell>
    </asp:TableRow>

    <asp:tablerow ID="Tablerow2" Width="100%">
    <asp:tablecell ID="Tablecell3" width="20%"><asp:hyperlink
    ID="Hyperlink1" runat="server" Text="Home"/></asp:tablecell>
    </asp:tablerow>

    <asp:tablerow ID="Tablerow3" width="100%">
    <asp:TableCell ID="TableCell4" ColumnSpan="2">Place holder
    here<</asp:TableCell>
    </asp:tablerow>
    </asp:table>
    </form>
     
    Craig, Jul 17, 2009
    #3
  4. David

    David Guest

    Ok. Thanks. Sometimes, apparently, there isn't always an easier way.

    "Craig" wrote:

    >
    > "David" <> wrote in message
    > news:...
    > > I'm having trouble with the looks of an asp.net Master page.
    > >
    > > What I want is a header that has two rows, and then the individual page
    > > content under that. On the left is a large area with some introductory
    > > text,
    > > covering 70% of the row. (i.e."Welcome to my cool web page, etc....") On
    > > the right, the page logo, at a width of 30% of the page. In the second
    > > row,
    > > 5 commonly used navigation hyperlinks. The rest of the page is page
    > > specific
    > > content.
    > >
    > > So, I tried the following pseudo-markup.
    > >
    > >
    > >
    > > <asp:table>
    > > <asp:tablerow width="100%">
    > > <asp:tablecell width="70%">Intro text</asp:tablecell>
    > > <asp:tablecel witdth="30%"><asp:image logo/></asp:tablecell>
    > > </asp:tablerow>
    > > <asp:tablerow widht="100%>
    > > <asp:tablecell width="20%"><asp:hyperlink
    > > Text="Home".../></asp:tablecell>
    > > <.....insert four more table cells, width 20% here>
    > > </asp:tablerow>
    > > <asp:tablerow width="100%">
    > > <asp:contentplaceholder ..../>
    > > <asp:tablerow>
    > >
    > > It didn't work. I guess the tablecells end up lining up with each other,
    > > and the second of the hyperlinks from the second row ended up next to the
    > > logo. After much messing around with asp:tables and <table><tr><td>
    > > tags, I
    > > decided to go with style sheets.
    > >
    > > I tried the following psuedomarkup:
    > >
    > > style sheet:
    > >
    > >
    > > .UpperBanner
    > > {
    > > width:70%;
    > > }
    > >
    > > .Logo
    > > {
    > > width:30%;
    > >
    > > }
    > >
    > > .MenuItem
    > > {
    > > width:20%
    > > }.
    > >
    > > And the markup:
    > >
    > > <div class="UpperBanner">Intro Text</div>
    > > <div class="Logo"><asp:image logo/></div>
    > > <br/>
    > > <div class="MenuItem">Nav link 1</div>
    > > <div class="MenuItem">Nav link 2</div>
    > > <div class="MenuItem">Nav link 3</div>
    > > <div class="MenuItem">Nav link 4</div>
    > > <div class="MenuItem">Nav link 5</div>
    > > <br>
    > > <div>
    > > <asp:ContentPlaceHolder ..../>
    > > </div>
    > >
    > > Everything was the correct size, but each "div" started at a new line. I
    > > tried various combinations of "left" values and "position" values, but no
    > > luck. I found a couple of examples, but all of them featured absolute
    > > positioning using pixel values, which I wanted to avoid.
    > >
    > > I also tried <tr> and defining 10 <td? elements, each wtih a width of 10%,
    > > and using columnspan attributes to take up different 10% chunks of space,
    > > but
    > > that didn't work.
    > >
    > >
    > > Is there a good, web accessible, description of using either divs,
    > > <table>s
    > > or <asp:table>s to do a web layout where the elements of each row are of
    > > different witdths? What I really want is three rows of stuff. The first
    > > row
    > > has two elements. 70% on the left side, 30% on the left. The second row
    > > has
    > > five adjacent elements, each taking up 20%. The third row has a single
    > > element that takes up 100% of the screen width.

    >
    >
    > David,
    >
    > In dealing with HTML or ASP tables, unlike Excel or Word tables where you
    > can change the cell size at will, you have to deal with the least common
    > denominator, in this case it would be the four (or five – you said four
    > cells at 20%) or ten cells.
    >
    > So yes, you’re actually barking up the right tree when you create five
    > cells, then ColumnSpan=â€x†to what you need.
    >
    > This example only goes for 5 wide, but you get the idea.
    >
    > <form id="form1" runat="server">
    > <asp:table runat="server" Width="100%">
    >
    > <asp:tablerow ID="Tablerow1" Width="100%">
    > <asp:tablecell ID="Tablecell1" ColumnSpan="3">Intro
    > text</asp:tablecell>
    > <asp:tablecell ID="Tablecell2" ColumnSpan="2">IMAGE
    > HERE</asp:tablecell>
    > </asp:tablerow>
    >
    > <asp:TableRow>
    > <asp:TableCell Width="20%">Apples</asp:TableCell>
    > <asp:TableCell Width="20%">Oranges</asp:TableCell>
    > <asp:TableCell Width="20%">Pears</asp:TableCell>
    > <asp:TableCell Width="20%">Kiwis</asp:TableCell>
    > <asp:TableCell Width="20%">Bananas</asp:TableCell>
    > </asp:TableRow>
    >
    > <asp:tablerow ID="Tablerow2" Width="100%">
    > <asp:tablecell ID="Tablecell3" width="20%"><asp:hyperlink
    > ID="Hyperlink1" runat="server" Text="Home"/></asp:tablecell>
    > </asp:tablerow>
    >
    > <asp:tablerow ID="Tablerow3" width="100%">
    > <asp:TableCell ID="TableCell4" ColumnSpan="2">Place holder
    > here<</asp:TableCell>
    > </asp:tablerow>
    > </asp:table>
    > </form>
    >
    >
    >
     
    David, Jul 17, 2009
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jack Black
    Replies:
    0
    Views:
    370
    Jack Black
    Sep 28, 2004
  2. John Goche
    Replies:
    0
    Views:
    587
    John Goche
    Feb 5, 2006
  3. frank

    Laying out a form in java

    frank, Dec 8, 2006, in forum: Java
    Replies:
    10
    Views:
    570
    Ian Wilson
    Dec 11, 2006
  4. Owen Brunker
    Replies:
    23
    Views:
    1,007
    Neredbojias
    Feb 29, 2008
  5. Roger Stenson

    ASP Version 2 Beginner Question - Laying out Complex Forms

    Roger Stenson, Apr 30, 2008, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    185
Loading...

Share This Page