ASP.NET

29-Dec-06 4:57

A web designer that *sucks* gave me this HTML to build a dynamic news/event section with. The trouble is that the HTML isn't clean and something about it causes it to not look right. Is there a simpler way to do this maybe without divs. I've wasted 60 hours trying to make this crap work and I just don't know HTML well enough at all to make it look better.

Here's a link to how it looks and you can see the problem in the bottom of the events table.

http://www.code-frog.com/divs_suck.htm

Here's the code:

<table border="0" cellspacing="0" cellpadding="0" id="table5">
<tr>
<td><img border="0" src="table_title_recentnews.gif" width="282" height="22"></td>
</tr>
<tr>
<td background="background_recentnews.gif" valign="top" align="left" style="height: 133px"><div align="center">
<table border="0" width="274" cellspacing="3" cellpadding="0" id="table6">
<tr>
<td width="7" valign="top"><p align="center"> <font face="Tahoma"> <span style="font-size: 8pt">•</span></font></td>
<td width="267" valign="top"><font face="Tahoma" style="font-size: 8pt"> October 31, 2006 - All Saints Mass at BKHS1 at 9:30am.</font> <font face="Tahoma" style="font-size: 7pt"> <u><b><a href="SaintsMass1.aspx">more info</a></b></u></font></td>
</tr>
</table>
<div align="center">
<table border="0" width="274" cellspacing="3" cellpadding="0" id="table7">
<tr>
<td width="7" valign="top"><p align="center"> <font face="Tahoma"> <span style="font-size: 8pt">•</span></font></td>
<td width="267" valign="top"><font face="Tahoma" style="font-size: 8pt"> October 31, 2006 - All Saints Mass at BKHS2 at 9:30am.</font> <font face="Tahoma" style="font-size: 7pt"> <u><b><a href="SaintsMass2.aspx">more info</a></b></u></font></td>
</tr>
</table>
<div align="center">
<table border="0" width="274" cellspacing="3" cellpadding="0" id="table8">
<tr>
<td width="7" valign="top"><p align="center"> <font face="Tahoma"> <span style="font-size: 8pt">•</span></font></td>
<td width="267" valign="top"><font face="Tahoma" style="font-size: 8pt"> October 31, 2006 - All Saints Mass at BKHS3 at 9:30am.</font> <font face="Tahoma" style="font-size: 7pt"> <u><b><a href="SaintsMass3.aspx">more info</a></b></u></font></td>
</tr>
</table>
</div>
</div>
</div></td>
</tr>
<tr>
<td><img border="0" src="spacer_eight_pixels.gif" width="8" height="8"><br>
<img border="0" src="table_title_upcomingevents.gif" width="282" height="22"></td>
</tr>
<tr>
<td background="background_upcomingevents.gif" height="97" align="center" valign="top"><div align="center">
<table border="0" width="274" cellspacing="3" cellpadding="0" id="table14">
<tr>
<td width="7" valign="top"><p align="center"><font face="Tahoma"> <span style="font-size: 8pt">•</span></font></td>
<td width="267" valign="top"><font face="Tahoma" style="font-size: 8pt"> November 29, DWA1 - Freshman</font> <font face="Tahoma" style="font-size: 7pt"> <u><b><a href="Freshman1.aspx">more info</a></b></u></font></td>
</tr>
</table>
<div align="center">
<table border="0" width="274" cellspacing="3" cellpadding="0" id="table15">
<tr>
<td width="7" valign="top"><p align="center"><font face="Tahoma"> <span style="font-size: 8pt">•</span></font></td>
<td width="267" valign="top"><font face="Tahoma" style="font-size: 8pt"> November 29, DWA2 - Freshman</font> <font face="Tahoma" style="font-size: 7pt"> <u><b><a href="Freshman2.aspx">more info</a></b></u></font></td>
</tr>
</table>
<div align="center">
<table border="0" width="274" cellspacing="3" cellpadding="0" id="table16">
<tr>
<td width="7" valign="top"><p align="center"><font face="Tahoma"> <span style="font-size: 8pt">•</span></font></td>
<td width="267" valign="top"><font face="Tahoma" style="font-size: 8pt"> November 29, DWA3 - Freshman</font> <font face="Tahoma" style="font-size: 7pt"> <u><b><a href="Freshman3.aspx">more info</a></b></u></font></td>
</tr>
</table>
<div align="center">
<table border="0" width="274" cellspacing="3" cellpadding="0" id="table17">
<tr>
<td width="7" valign="top"><p align="center"><font face="Tahoma"> <span style="font-size: 8pt">•</span></font></td>
<td width="267" valign="top"><font face="Tahoma" style="font-size: 8pt"> November 29, DWA4 - Freshman</font> <font face="Tahoma" style="font-size: 7pt"> <u><b><a href="Freshman4.aspx">more info</a></b></u></font></td>
</tr>
</table>
</div>
</div>
</div>
</div></td>
</tr>
</table>

Grapes-R-Fun29-Dec-06 5:19

29-Dec-06 5:19

good GOD!!! This dude/chick makes my head spin with all those nested tables and divs. Uhh... maybe a CSS?!?! WTF | :WTF:

Why don't you build your own structure, and place the *meat* where you want it to appear? Run them at server so you can manipulate the html elements for dynamic data insertion.

p.s.

Coffee (Nila)

code-frog29-Dec-06 5:27

29-Dec-06 5:27

Grapes-R-Fun wrote:
Why don't you build your own structure

I'm attempting this but lack the experience to know how to produce the outlines that around each row and the subsequent tables. I *HATE* html. Sigh | :sigh:

Grapes-R-Fun29-Dec-06 5:49

29-Dec-06 5:49

Let me put something together for you then. In the meantime, are you using C# or VB.Net as your code behind?

Nila

code-frog29-Dec-06 5:56

29-Dec-06 5:56

C#
Here's what I'm trying to do: (I'm omitting a lot of code here and tried to keep it short and sweet.)

protected void Page_Load(object sender, EventArgs e)
{
PageContent _PG = new PageContent();

string tmpHTML = "";

tmpHTML += " <table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" id=\"table5\">" + "\r\n";
tmpHTML += " <tr>" + "\r\n";
tmpHTML += " <td>" + "\r\n";
tmpHTML += " <img border=\"0\" src=\"table_title_recentnews.gif\" width=\"282\" height=\"22\"></td>" + "\r\n";
tmpHTML += " </tr>" + "\r\n";
tmpHTML += " <tr>" + "\r\n";
tmpHTML += " <td background=\"background_recentnews.gif\" valign=\"top\" align=\"left\" style=\"height: 133px\">" + "\r\n";

tmpHTML += _PG.BuildNewsContent();

tmpHTML += " </td>" + "\r\n";
tmpHTML += " </tr>" + "\r\n";
tmpHTML += " <tr>" + "\r\n";
tmpHTML += " <td>" + "\r\n";
tmpHTML += " <img border=\"0\" src=\"spacer_eight_pixels.gif\" width=\"8\" height=\"8\"><br>" + "\r\n";
tmpHTML += " <img border=\"0\" src=\"table_title_upcomingevents.gif\" width=\"282\" height=\"22\"></td>" + "\r\n";
tmpHTML += " </tr>" + "\r\n";
tmpHTML += " <tr>" + "\r\n";
tmpHTML += " <td background=\"background_upcomingevents.gif\" height=\"97\" align=\"center\" valign=\"top\">" + "\r\n";

tmpHTML += _PG.BuildEventContent();

tmpHTML += " </td>" + "\r\n";
tmpHTML += " </tr>" + "\r\n";
tmpHTML += " </table>" + "\r\n";

InLineHTML.Text = tmpHTML; //This InLineHTML is an ASP:LITERAL

}
public string BuildNewsContent()
{
string tmpHTML = "";
string _Result = "";
int _DivCounter = 0;
bool _bFirstPass = true;
int tableRow = 6;

while (thisReader.Read())
{
_DivCounter += 1;

tmpHTML += " <div align=\"center\">" + "\r\n";
tmpHTML += " <table border=\"0\" width=\"274\" cellspacing=\"3\" cellpadding=\"0\" id=\"table" + tableRow.ToString() + "\">" + "\r\n";
tmpHTML += " <tr>" + "\r\n";
tmpHTML += " <td width=\"7\" valign=\"top\">" + "\r\n";
tmpHTML += " <p align=\"center\">" + "\r\n";
tmpHTML += " <font face=\"Tahoma\">" + "\r\n";
tmpHTML += " <span style=\"font-size: 8pt\">•</span></font></td>" + "\r\n";
tmpHTML += " <td width=\"267\" valign=\"top\">" + "\r\n";
tmpHTML += " <font face=\"Tahoma\" style=\"font-size: 8pt\">" + "\r\n";
tmpHTML += thisReader["DateText"].ToString().Trim() + " - " + thisReader["SummaryText"].ToString().Trim() + "</font>" + "\r\n";
tmpHTML += " <font face=\"Tahoma\" style=\"font-size: 7pt\">" + "\r\n";
tmpHTML += " <u><b><a href=\"" + thisReader["MoreInfoURL"].ToString().Trim() + "\">more info</a></b></u></font></td>" + "\r\n";
tmpHTML += " </tr>" + "\r\n";
tmpHTML += " </table>" + "\r\n";

tableRow += 1;
}
for (int i = 1; i < _DivCounter + 1; i++)
{
tmpHTML += "</div>" + "\r\n";
}

_Result = tmpHTML;
return _Result;
}

public string BuildEventContent()
{
string tmpHTML = "";
string _Result = "";
int _DivCounter = 0;
bool _bFirstPass = false;
int tableRow = 14;

while (thisReader.Read())
{
if (_bFirstPass == false)
{
tmpHTML += " <div align=\"center\">";
_DivCounter += 1;
}
else
{
_bFirstPass = false;
}

tmpHTML += " <table border=\"0\" width=\"274\" cellspacing=\"3\" cellpadding=\"0\" id=\"table" + tableRow.ToString() + "\">" + "\r\n";
tmpHTML += " <tr>" + "\r\n";
tmpHTML += " <td width=\"7\" valign=\"top\">" + "\r\n";
tmpHTML += " <p align=\"center\"><font face=\"Tahoma\">" + "\r\n";
tmpHTML += " <span style=\"font-size: 8pt\">•</span></font></td>" + "\r\n";
tmpHTML += " <td width=\"267\" valign=\"top\">" + "\r\n";
tmpHTML += " <font face=\"Tahoma\" style=\"font-size: 8pt\">" + "\r\n";
tmpHTML += thisReader["EventText"].ToString().Trim() + "</font>" + "\r\n";
tmpHTML += " <font face=\"Tahoma\" style=\"font-size: 7pt\">" + "\r\n";
tmpHTML += " <u><b><a href=\"" + thisReader["MoreInfoURL"].ToString().Trim() + "\">more info</a></b></u></font></td>" + "\r\n";
tmpHTML += " </tr>" + "\r\n";
tmpHTML += " </table>" + "\r\n";

tableRow += 1;
}
for (int i = 0; i < _DivCounter; i++)
{
tmpHTML += "</div>" + "\r\n";
}
_Result = tmpHTML;

return _Result;
}

DavidNohejl29-Dec-06 6:04

29-Dec-06 6:04

That could be fairly simple repeater control... When I get home I'll write it. Cool | :cool:

"Throughout human history, we have been dependent on machines to survive. Fate, it seems, is not without a sense of irony. " - Morpheus

code-frog29-Dec-06 6:05

29-Dec-06 6:05

Yeah, I've not ever used a repeater before. I'll look into that and see if I can solve the mystery. Rose | [Rose]

Grapes-R-Fun29-Dec-06 7:05

29-Dec-06 7:05

Wow, just got back from lunch and look at the forum's growth!!! Laugh | :laugh:

If you wanna do it like a repeater, take a look at this site- it's a quick tutorial
http://aspnet.4guysfromrolla.com/articles/092706-1.aspx

Nila

Your web site...

Grapes-R-Fun29-Dec-06 7:14

29-Dec-06 7:14

OMG, your flash website looks REALLY cool! Did you develop it, or did you hire someone to do it for you?

Nila

Re: Your web site...

code-frog29-Dec-06 9:00

29-Dec-06 9:00

Actually a guy I work with a lot did it for me. We are not quite done yet but pretty close.

Re: Your web site...

Grapes-R-Fun29-Dec-06 9:29

29-Dec-06 9:29

It looks awesome! Wink | ;)

Nila

DavidNohejl29-Dec-06 5:57

29-Dec-06 5:57

Looks like that background image is not tall enough. Smile | :)

"Throughout human history, we have been dependent on machines to survive. Fate, it seems, is not without a sense of irony. " - Morpheus

code-frog29-Dec-06 5:59

29-Dec-06 5:59

I was just trying to fix this but didn't know how to do it dynamically. What if there are 10 rows at one point but only 3 the next week? How do I make it scale?

DavidNohejl29-Dec-06 6:16

29-Dec-06 6:16

well I would define some minimal height (not in css, but physical height of your background picture), and everything extra would be just white background => so table (td, tr?) would have both background picture and background color. Pic fading from gray to white, following by white background - as many pixels as needed. Uh, you know what I mean. Poke tongue | ;-P

"Throughout human history, we have been dependent on machines to survive. Fate, it seems, is not without a sense of irony. " - Morpheus

DavidNohejl29-Dec-06 9:57

29-Dec-06 9:57

This is what I've come up.

// default.aspx

<form id="Form1" method="post" runat="server" >
<asp:repeater runat="server" id="rptNews">
<HeaderTemplate>
<table border="0" width="274" cellspacing="3" cellpadding="0" id="news-table" class="myTable" >
<th> </th>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("Text") %>
<a href="">more info</a>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:repeater>

<asp:repeater runat="server" id="rptEvents">
<HeaderTemplate>
<table border="0" width="274" cellspacing="3" cellpadding="0" id="events-table" class="myTable" >
<th> </th>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("Text") %>
<a href="">more info</a>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:repeater>

</form>

// stylesheet
.myTable
{
background-color:white;
border-style:solid;
border-width:1px;
border-color:black;
background-image:url('http://www.code-frog.com/background_recentnews.gif');
background-position:bottom;
background-repeat:no-repeat;
margin:10px;
padding:0px;
}

#news-table th
{
background-image:url('http://www.code-frog.com/table_title_recentnews.gif');
}

#events-table th
{
background-image:url('http://www.code-frog.com/table_title_upcomingevents.gif');
}

In my test page I used ArrayList filled with random amount of ListItem objects, worked fine. Wink | ;)

While it doesnt look 100% as your current page, it takes just a little playing with css to make table header look like original. By the way, IMO it's better use text then image when possible for these things like table headers, it's important information about page structure - if i put into google "code frog upcoming events" I want to find that page, it's way easier to find it when *text* "upcoming events" is on that page, rather then image...

"Throughout human history, we have been dependent on machines to survive. Fate, it seems, is not without a sense of irony. " - Morpheus

Off Topic

code-frog29-Dec-06 6:02

29-Dec-06 6:02

Hey DNH, good to see you. Hope everything is going well. I remember way back when I first started doing ASP .Net you offering me some good advice. Things have gone well from there but my HTML is horrid (and I'm okay with that) and it sometimes causes problems when I'm given bad HTML to work with. Sigh | :sigh: