Username: Password:   Forgot your password?
 
Forums
» View Categories » Coding Help & Templates » Help!
Previous 30
Page of 1 Next 30

Member:43,244
Posts:37
Joined:11-16-2007
Seen:9-10-2008
Nov 29,`07 5:16pm | Quote | ↓
Oy. In attempting to write my own HTML for my comic page, things seem to have gone horribly, horribly wrong.

I might as well take this a few problems at a time.

Here is the temp page where I'm working on the HTML:
http://www.drunkduck.com/Temp_for_Sol/

And here's the current code:



<html>
<head>
<title>DrunkDuck presents...<!--[COMIC_NAME]--> <!--[PAGE_TITLE]--></title>
<meta name="robots" content="All,INDEX,FOLLOW">
<META NAME="AUTHOR" CONTENT="Super Llama">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://www.drunkduck.com/gfx/template_gfx_new/global.css">
<style type="text/css">
<!--
body {
background-color:#000000;

}

p,table,td {
font-family: verdana, arial, 'sans serif';
font-size: 11px;
color: #ffffff;
}
.border {
border: 4px solid #ffffff;
}
.border2 {
border: 1px solid #000000;
}
.bordercom {
border: 2px solid #ffffff;
}
input, textarea
{ background-color: #000000;
font-family: Verdana;
font-size: 11px;
color: #ffffff;
letter-spacing: 1px;
border: 2px solid #ffffff;
padding: 1px; }

option, select {
background-color: #000000;
font-family: Verdana;
font-size: 11px;
color: #FFFFFF;
letter-spacing: normal;
border: 1px solid #ffffff;
padding: 0px; }

A:link { color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; text-decoration: underline; cursor: hand; }
A:visited { color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; text-decoration: underline; cursor: hand; }
A:active { color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; text-decoration: underline; cursor: hand; }
A:hover { color: #999999; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: none; text-decoration: none; cursor: hand; font-size: 11px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; }
.bgcolour2 {
background-color: #000000;
}

.title {
font-family: "Courier New", Courier, mono;
font-size: 40px;
font-style: normal;
font-weight: bold;
color: #000000;
}
.subtitle {
font-family: verdana, arial, 'sans serif';
font-size: 11px;
color: #000000;
font-weight: bold;
}

.nav {
background-color:#000000;
}
.notes img {}
.comments img {}

.toolbar a:link {color:#0099FF; text-decoration:none; font-weight:bold;}
.toolbar a:visited {color:#333333; text-decoration:line-through; font-weight:normal;}
.toolbar a:hover {color:#A3FEFF; text-decoration:underline; font-weight:normal;}
.toolbar a:active {color:#A3FEFF; text-decoration:underline; font-weight:normal;}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" valign="TOP" align="CENTER" marginheight="0" marginwidth="0" background="http://www.drunkduck.com/Temp_for_Sol/gfx/sol_background.png" bgproperties="fixed">

<div id="bg">



<!--Comic Title Area-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td><div align="center"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/comic_title.png "></div></td>
</tr>
</table>



<!--COMIC STRIP-->
<table align=center cellpadding="10" cellspacing="5" height=600 width=600>
<tr align=center>
<td align=center valign=center>


<table border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tl.png" width="20" height="20"></td>
<td width="600" colspan="3" align="center" valign="bottom"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_top.png" width="600" height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tr.png" width="20" height="20"></td>
</tr>
<tr>
<td width="20" align="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_left.png" width="20" height="896"></td>
<td width="600" align="center" valign="middle">

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<div class="strip"><!--[PAGE]--></div>
</td>
</tr>
</table>

</td>

<td width="20" align="right"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png " width="20" height="896"></td>

</tr>
<tr>
<td width="20" height="20" align="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bl.png" width="20" height="20"></td>
<td width="600" colspan="3" align="center" valign="top"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bottom.png " width="600" height="20"></td>
<td width="20" height="20" align="right"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_br.png" width="20" height="20"></td>
</tr>
</table>

<table align="center" border="0" cellspacing="0" cellpadding="0" width="356">
<tr>
<td width="356"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/nav_bar.png" width="356" height="98"></td>
</tr>
</table>



</td>
</tr>
</table>

<!--Bottom Navigation-->

<table align="center" border="0" cellspacing="0" cellpadding="0" width="356">
<tr>
<td width="356"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/nav_bar.png" width="356" height="98"></td>
</tr>
</table>

<table class="nav" align="center" border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td align="center" height="50" width="25%"><!--[NAV_FIRST=http://www.drunkduck.com/Temp_for_Sol/gfx/nav1.png]--></td>
<td align="center" height="50" width="25%"><!--[NAV_PREVIOUS=http://www.drunkduck.com/Temp_for_Sol/gfx/nav2.png]--></td>
<td align="center" height="50" width="25%"><!--[NAV_NEXT=http://www.drunkduck.com/Temp_for_Sol/gfx/nav3.png]--></td>
<td align="center" height="50" width="25%"><!--[NAV_LAST=http://www.drunkduck.com/Temp_for_Sol/gfx/nav4.png]--></td>
</table>

<!-- RSS and PAGE drop down -->
<TABLE width="500" align="center" colspacing="0" colpadding="0" border="0">
<TR>
<TD WIDTH="50%"><!--[RSS]--></TD>
<TD WIDTH="50%"><!--[PAGE_DROPDOWN]--></TD>
</TR>
</TABLE>

<table align=center cellpadding="10" cellspacing="5" height=600 width=600>
<tr align=center>
<td align=center valign=center>

<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tl.png" width="20" height="20"></td>
<td width="600" colspan="3" align="center" valign="bottom"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_top.png" width="600" height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tr.png" width="20" height="20"></td>
<table bgcolor="#000000" colspacing="0" colpadding="0" align="center" border="0" width="400" bgcolor="#000000">
<tr>
<td>
<div class="notes">
<p><!--[AUTHORS_NOTES]-->
</div>
</td>
</tr>
</table>

</td>
</tr>
</table>

<p>
<!--User Comments-->

<table bgcolor="#000000" align=center cellpadding="10" cellspacing="5" height=100 width=600>
<tr align=center>
<td align=center valign=center>

<table colspacing="0" colpadding="5" align="center" border="0" width="600" bgcolor="#000000">
<tr>

<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tl.png" width="20" height="20"></td>
<td width="600" colspan="3" align="center" valign="bottom"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_top.png" width="600" height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tr.png" width="20" height="20"></td>

</tr>

<tr>
<td width="20" align="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_left.png" width="20"></td>
<td colspan="2"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/comments_bar.png" alt="comments" width="600" height="50"></td>
<td width="20" align="right"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png " width="20" height="896"></td>
</tr>
<tr>
<td width="300" align="center" valign="top" bgcolor="#000000">
<!--[COMMENTS=300]-->
</td>
<td align="center" width="300" valign="top">
<p><!--[COMMENT_FORM=280,200]-->
<p><b>(YOUR DESCRIPTION)</b>
<br><!--[DESCRIPTION]-->

</td>
</tr>

<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bl.png" width="20" height="20"></td>
<td width="600" colspan="3" align="center" valign="top"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bottom.png " width="600" height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_br.png" width="20" height="20"></td>


</table>

</td>
</tr>
</table>

</div>
</body></html>


Here are the problems I'm trying to fix at the moment:

-I want some space between the top of the page and the logo at the top of the page.
-The two corner borders on the right side of the comic page are sticking out to the side.

This post was last edited on Nov 29,`07 5:17pm
 
Member:16,468
Posts:488
Joined:2-13-2007
Seen:11-28-2009
Nov 29,`07 8:30pm | Quote | ↓
</br> will make some space between objects. put in as manay as you need.
i'm not sure what you mean by the corner boarders. the whole page looks even to me. could you screencap what you see? it might be browser related.---never mind i was looking at the wrong comic--- i'll look into it.

i think it's because they aren't aligned right

Someone Said:

<td width="20" height="20" align="right"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_br.png" width="20" height="20"></td>


this code aligns the one graphic to the right. i think aligning them left will push them over and next to the top and bottom border. i can't test it to be sure this will work. the other one doesn't have an alignment setting above it.

This post was last edited on Nov 29,`07 8:50pm
 
Member:43,244
Posts:37
Joined:11-16-2007
Seen:9-10-2008
Nov 30,`07 8:54am | Quote | ↓
"bongotezz" Said:

i think it's because they aren't aligned right

Someone Said:

<td width="20" height="20" align="right"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_br.png" width="20" height="20"></td>


this code aligns the one graphic to the right. i think aligning them left will push them over and next to the top and bottom border. i can't test it to be sure this will work. the other one doesn't have an alignment setting above it.


I tried that. It doesn't do a thing.

After some experimentation, I think the problem is somewhere in here.

<td width="600" align="center" valign="middle">

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<div class="strip"><!--[PAGE]--></div>
</td>
</tr>
</table>

</td>

<td width="20" align="right"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png " width="20" height="896"></td>

When I delete the code for the right border, the two corner pieces move closer to where they're supposed to be, and when I move the comic out of the border, the corner pieces fit just fine, but the right border moves to the left of where it's supposed to be.
 
Member:43,061
Posts:23
Joined:11-13-2007
Seen:8-19-2008
Nov 30,`07 12:26pm | Quote | ↓
Why do you have a colspan of "3" on the top and bottom borders? There's only one column there in the table. That would also help explain why it jumps to the other side of the right border. Try taking that out, that might fix it. Your frame has a different table structure than the ones I use for a similar purpose on my pages, but that's the only code that jumps out at me as being out of place.

This post was last edited on Nov 30,`07 12:27pm
 
Member:43,244
Posts:37
Joined:11-16-2007
Seen:9-10-2008
Nov 30,`07 2:56pm | Quote | ↓
Well, the old problem is fixed, but now a new one has arisen.

I think you can see from the top set of nav arrows and the borders surrounding it what I was going for. How do I fix the out of whack areas?

Also, I'm trying to make it so that the borders surrounding the arrows are transparent, while the actual space the arrows take up have a black background. Is there any way to do that?

Here's the new code for the comic section, including the top nav arrows and the borders:

<!--COMIC STRIP-->

<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tl.png" width="20" height="20"></td>
<td width="600" align="center" valign="bottom"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_top.png" width="600" height="20"></td>
<td width="20" height="20" align="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tr.png" width="20" height="20"></td>
</tr>
<tr>
<td width="20" align="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_left.png" width="20" height="896"></td>
<td align="center" valign="top">
<div class="strip"><!--[PAGE]--></div>
</td>
<td width="20" align="right"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png " width="20" height="896"></td>
</tr>
<tr>
<td width="20" height="20" align="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bl.png" width="20" height="20"></td>
<td width="600" calign="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_newbottom.png " width="600" height="20"></td>
<td width="20" height="20" align="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_br.png" width="20" height="20"></td>
</tr>

<table class="nav" align="center" border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="20" align="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_left.png " width="20" height="50"></td>
<td align="center" height="50" width="25%"><!--[NAV_FIRST=http://www.drunkduck.com/Temp_for_Sol/gfx/nav1.png]--></td>
<td align="center" height="50" width="25%"><!--[NAV_PREVIOUS=http://www.drunkduck.com/Temp_for_Sol/gfx/nav2.png]--></td>
<td align="center" height="50" width="25%"><!--[NAV_NEXT=http://www.drunkduck.com/Temp_for_Sol/gfx/nav3.png]--></td>
<td align="center" height="50" width="25%"><!--[NAV_LAST=http://www.drunkduck.com/Temp_for_Sol/gfx/nav4.png]--></td>
<td width="20" align="right"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png " width="20" height="50"></td>
</tr>
<tr>
<td width="20" height="20" align="center"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bl.png" width="20" height="20"></td>
<td width="300" calign="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bottom.png " width="300" height="20"></td>
<td width="20" height="20" align="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_br.png" width="20" height="20"></td>
</tr>
</table>

</table>



</td>
</tr>
</table>
 
Member:43,061
Posts:23
Joined:11-13-2007
Seen:8-19-2008
Nov 30,`07 3:17pm | Quote | ↓
Here's what I can see:

First the table for the nav buttons are inside the table for the comic page/frames in a nonsensical place; there's no table row tag to define it as a new row, nor a table data cell to align it within context of the table. Personally, I'd ditch it as being inside the table and make it a second table directly below the first. Next, the 25% width might be gumming things up, I'd set it as a concrete number (65, which is 25% of the 300 width minus the two 20 width sides).

As for the background being black, nothing is making it that way...It might be defined in the CSS for "nav" that's associated to the table. You could try removing that.

EDIT: I peeked at the page source, it's totally the designation of .nav as the CSS. All .nav defines is the background color as black.

This post was last edited on Nov 30,`07 4:11pm
 
Member:43,244
Posts:37
Joined:11-16-2007
Seen:9-10-2008
Nov 30,`07 6:39pm | Quote | ↓
Fix'd.

However, things have once again gone wrong. This time in the Author's comments box.

The code:

<table align="center" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tl.png" width="20" height="20"></td>
<td width="400" align="center" valign="bottom"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_top.png" width="400" height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tr.png" width="20" height="20"></td>
</tr>
<tr>
<table bgcolor="#000000" colspacing="0" colpadding="0" align="center" border="0" width="400">
<td width="20" align="center"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_left.png " width="20"></td>
<td>
<div class="notes">
<p><!--[AUTHORS_NOTES]-->
</div>
</td>
<td width="20" align="center"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png " width="20"></td>
</table>
<tr>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bl.png" width="20" height="20"></td>
<td width="400" align="center" valign="bottom"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bottom.png" width="400" height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_br.png" width="20" height="20"></td>
</tr>
</tr>
</table>


Is there a way for the side borders to always be the length of the comment box, even when it's height changes?
 
Member:43,061
Posts:23
Joined:11-13-2007
Seen:8-19-2008
Nov 30,`07 7:01pm | Quote | ↓
I know there's a way to do it with CSS where you can set the border image to repeat and therefore appear continuous for the length of the frame. I'd have to look it up, but you could probably code it up pretty easily. As for the wonkiness, the table that the authors comments in are not set in a table data cell, and that wouldn't work anyway (unless you set the TD to colspan="3" However, the only reason I can see is so the background color is black. You can set the middle data cell as the only one with a black background by plugging bgcolor="#000000" into the <td> tag, so I'd do that and cut out that extra table.
 
Member:43,061
Posts:23
Joined:11-13-2007
Seen:8-19-2008
Nov 30,`07 8:56pm | Quote | ↓
Here, I fixed the table. I tested it and it looks to me like it's working except for the side lengths:

<table align="center" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tl.png" width="20"

height="20"></td>
<td width="400" align="center" valign="bottom"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_top.png"

width="400" height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tr.png" width="20"

height="20"></td>
</tr>
<tr>
<td width="20" align="center"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_left.png " width="20"></td>
<td bgcolor="#000000">
<div class="notes">
<p><!--[AUTHORS_NOTES]-->
</div>
</td>
<td width="20" align="center"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png "

width="20"></td></tr>
<tr>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bl.png" width="20"

height="20"></td>
<td width="400" align="center" valign="bottom"><img

src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bottom.png" width="400" height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_br.png" width="20"

height="20"></td>
</tr>
</tr>
</table>
 
Member:43,061
Posts:23
Joined:11-13-2007
Seen:8-19-2008
Nov 30,`07 9:11pm | Quote | ↓
ha-HA! I figured it out.

<table align="center" border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tl.png" width="20" height="20"></td>
<td width="400" align="center" valign="bottom"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_top.png" width="400"

height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tr.png" width="20" height="20"></td>
</tr>
<tr>
<td width="20" align="center"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_left.png " width="20" height="100%"></td>
<td bgcolor="#000000">
<div class="notes">
<p><!--[AUTHORS_NOTES]-->
</div>
</td>
<td width="20" align="center"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png " width="20" height="100%"></td></tr>
<tr>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bl.png" width="20" height="20"></td>
<td width="400" align="center" valign="bottom"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bottom.png" width="400"

height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_br.png" width="20" height="20"></td>
</tr>
</tr>
</table>

The secret is to set the height of the side border images to 100%. You can use height and width tags to alter the dimensions of a picture by sticking them inside the img tag. Setting it to 100% makes sure the image is the whole length of the table, regardless of whether there's one line of text or one thousand.
 
Member:43,061
Posts:23
Joined:11-13-2007
Seen:8-19-2008
Nov 30,`07 10:01pm | Quote | ↓
I hope I'm not being too forward, but I was bored and I fixed your user-comments section while I was at it:

<table align=center cellpadding="10" cellspacing="5" height=100 width=600>
<tr align=center>
<td align=center valign=center>

<table colspacing="0" colpadding="5" cellspacing="0" cellpadding="0" align="center" border="0" width="600">
<tr>

<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tl.png" width="20" height="20"></td>
<td width="600" colspan="2" align="center" valign="bottom"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_top.png" width="600"

height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tr.png" width="20" height="20"></td>

</tr>

<tr>
<td width="20" align="left"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_left.png" width="20" height="100%"></td>
<td width="600" colspan="2"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/comments_bar.png" alt="comments" width="600"

height="50"></td>
<td width="20" align="right"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png " width="20" height="100%"></td>
</tr>
<tr>
<td width="20" align="right"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_left.png " width="20" height="100%"></td>
<td width="300" align="center" valign="top" bgcolor="#000000">
<!--[COMMENTS=300]-->
</td>
<td align="center" width="300" valign="top" bgcolor="#000000">
<p><!--[COMMENT_FORM=280,200]-->
<p><b>(YOUR DESCRIPTION)</b>
<br><!--[DESCRIPTION]-->

</td>
<td width="20" align="right"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png " width="20" height="100%"></td>
</tr>
<tr>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bl.png" width="20" height="20"></td>
<td width="600" colspan="2" align="center" valign="top"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bottom.png " width="600"

height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_br.png" width="20" height="20"></td>
</tr>

</table>

</td>
</tr>
</table>
 
Member:43,244
Posts:37
Joined:11-16-2007
Seen:9-10-2008
Nov 30,`07 10:38pm | Quote | ↓
"batsofchaos" Said:

The secret is to set the height of the side border images to 100%. You can use height and width tags to alter the dimensions of a picture by sticking them inside the img tag. Setting it to 100% makes sure the image is the whole length of the table, regardless of whether there's one line of text or one thousand.


I've tried that before, but the right and left borders just disappear completely when I did that. And that seems to be the case now, too.
 
Member:43,061
Posts:23
Joined:11-13-2007
Seen:8-19-2008
Nov 30,`07 10:44pm | Quote | ↓
It looks fine in Firefox, but I checked on Internet Explorer and you're right. It must not work in IE...
 
Member:43,061
Posts:23
Joined:11-13-2007
Seen:8-19-2008
Dec 1,`07 1:13am | Quote | ↓
I was right, it could be done with CSS, and I tested it in both Firefox and IE to successful results! Let me know if you have the same luck. This is for the user comments field. Basically a style gets imbedded in the table data cell that tells it to set the appropriate border image as the background and to repeat the image on the y axis. Should be easy enough to modify over to the authors comments section as well.

<table align=center cellpadding="10" cellspacing="5" height=100 width=600>
<tr align=center>
<td align=center valign=center>

<table colspacing="0" colpadding="5" cellspacing="0" cellpadding="0" align="center" border="0" width="600">
<tr>

<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tl.png" width="20" height="20"></td>
<td width="600" colspan="2" align="center" valign="bottom"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_top.png" width="600"

height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_tr.png" width="20" height="20"></td>

</tr>

<tr>
<td width="20" align="left" style="background-image:url(http://www.drunkduck.com/Temp_for_Sol/gfx/border_left.png);

background-position:center; background-repeat: repeat-y;"></td>
<td width="600" colspan="2"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/comments_bar.png" alt="comments" width="600"

height="50"></td>
<td width="20" align="right" style="background-image:url(http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png);

background-position:center; background-repeat: repeat-y;"></td>
</tr>
<tr>
<td width="20" align="right" style="background-image:url(http://www.drunkduck.com/Temp_for_Sol/gfx/border_left.png);

background-position:center; background-repeat: repeat-y;"></td>
<td width="300" align="center" valign="top" bgcolor="#000000">
<!--[COMMENTS=300]-->
</td>
<td align="center" width="300" valign="top" bgcolor="#000000">
<p><!--[COMMENT_FORM=280,200]-->
<p><b>(YOUR DESCRIPTION)</b>
<br><!--[DESCRIPTION]-->

</td>
<td width="20" align="right" style="background-image:url(http://www.drunkduck.com/Temp_for_Sol/gfx/border_right.png);

background-position:center; background-repeat: repeat-y;"></td>
</tr>
<tr>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bl.png" width="20" height="20"></td>
<td width="600" colspan="2" align="center" valign="top"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_bottom.png " width="600"

height="20"></td>
<td width="20" height="20"><img src="http://www.drunkduck.com/Temp_for_Sol/gfx/border_br.png" width="20" height="20"></td>
</tr>

</table>

</td>
</tr>
</table>

Previous 30
Page of 1 Next 30

Reply
 

Not Registered?
Signup for a FREE Account!


Registered users can:
Comment on comics!
Create their own comics!
Vote in polls and contests!
Use the forums!
   Latest News
   DD Cam (Now Featuring: DDBook)