Problem laying out pages with divs or asp:table

  • Thread starter Thread starter David
  • Start date Start date
D

David

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.
 
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 said:
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.
Click to expand...


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>
 
Back
Top