Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > Problem laying out pages with divs or asp:table

Reply
Thread Tools

Problem laying out pages with divs or asp:table

 
 
David
Guest
Posts: n/a
 
      07-16-2009
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.
 
Reply With Quote
 
 
 
 
David
Guest
Posts: n/a
 
      07-16-2009
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.

 
Reply With Quote
 
 
 
 
Craig
Guest
Posts: n/a
 
      07-17-2009

"David" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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>



 
Reply With Quote
 
David
Guest
Posts: n/a
 
      07-17-2009
Ok. Thanks. Sometimes, apparently, there isn't always an easier way.

"Craig" wrote:

>
> "David" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > 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>
>
>
>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
ASP Version 2 Beginner Question - Laying out Complex Forms Roger Stenson ASP .Net Web Controls 1 05-04-2008 12:35 AM
What is the recomended method for Laying out HTML forms? Owen Brunker HTML 23 02-29-2008 07:35 PM
Laying out a form in java frank Java 10 12-11-2006 02:51 PM
BlackBerry: laying out nonscrolling Field widgets on MainScreen John Goche Java 0 02-05-2006 12:01 AM
Need suggestions for laying out dynamic content on page... Jack Black ASP .Net 0 09-27-2004 11:34 PM



Advertisments