Snap borders to an image?

W

Wofiel

New Member
First and foremost, the site on which I'm trying to do this is located here.
You can see my attempt so far.

I've tried a few different ways, but I can't seem to get the dark grey borders to snap to the actual comic, and I was wondering if I could get a hand in regards to it.

Here's what my template looks like at the moment:
Code: 
<table border="0">

<tr><td><strong><nobr><?=$COMIC_TITLE?></nobr></strong></td><td align="right"><strong><nobr><?=$COMIC_DATE?></nobr></strong></td></tr>
<br>
<!-- ImageReady Slices (Untitled-1) -->
<table id="Table_01" width="850" height="1028" border="0" cellpadding="-1" cellspacing="-1">
	<tr>
		<td colspan="2">
			<img src="../bits/Top.png" width="825" height="25" alt=""></td>
		<td rowspan="3">
			<img src="../bits/Right.png" width="25" height="1028" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="../bits/Left.png" width="25" height="1003" alt=""></td>
		<td>
			<?=$COMIC?></td>
	</tr>
	<tr>
		<td>
			<img src="../bits/Bottom.png" width="800" height="25" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
<br>

<tr><td colspan="2"><?=$COMIC_COMMENT?></td></tr>
<tr>
	<td width="25%" align="center"><?if(!$IS_FIRST):?><a href="<?=$FIRST_URL?>">First</a><?endif?></td>
	<td width="25%" align="center"><?if(!$IS_FIRST):?><a href="<?=$PREV_URL?>">Previous</a><?endif?></td>
	<td width="25%" align="center"><?if(!$IS_LAST):?><a href="<?=$NEXT_URL?>">Next</a><?endif?></td>
	<td width="25%" align="center"><?if(!$IS_LAST):?><a href="<?=$LAST_URL?>">Last</a><?endif?></td>
</tr>
</table>

<br>

<?if($NEWS):?>
	<table cellspacing="1" cellpadding="5" border="0" class="tb">
	<tr class="th"><td>News</td></tr>
	<?=$NEWS?>
	</table>
	<div><a href="news.php">More News</div>
<?endif?>


As you can see, I tried using ImageReady in this revision, but still to no avail.

Any help would be greatly appreciated, thanks in advance.
 
R

rarepearldesign

New Member
If you slice your images better, I will give you properly written div/css code to do what you want.

Slice the images so that the bottom and top are the same length and have the rounded corners on both ends, and the sides, well, you then only need one side you can reuse.

If you do that and give me the width/height, I will post the divs/css code.
 
R

rarepearldesign

New Member
If you make the images like I said
1. Top: 850 x 25 with both rounded corners
2. Side: 978 x 25 with no rounded corners
3. Bottom: 850 x 25 with both rounded corners

This code should work just fine

Code: 
<head>
    <title>Untitled Page</title>
    <style type="text/css">
	    #mainContainer
	    {   width:100%;
	    }
	    #comicTitleContainer
	    {   width:850px;
	        margin:0 auto;
	        margin-bottom:10px;
	    }
	    #comicContainer
	    {   width:850px;
	        margin:0 auto;
	    }
	    #comicTitle
	    {   float:left;
	        font-weight:bold;
	    }
	    #comicDate
	    {   float:right;
	        font-weight:bold;
	    }
	    .clearFloats
	    {   clear:both;
	    }
	    #comicTop
	    {   margin-top:10px;
	        width:850px;
	        height:25px;
	        background-image:url(../bits/Top.png);
	        background-repeat:no-repeat;
	    }
	    #comicMiddle
	    {   padding:0px;
	        margin:0px;
	        width:850px;
	        height:978px;
	    }
	    #comicMiddle #leftSide, #comicMiddle #rightSide
	    {   height:978px;
	        width:25px;
	        float:left;
	        background-image:url(../bits/Side.png);
	        background-repeat:no-repeat;
	    }
	    #comicMiddle #center
	    {   height:978px;
	        width:800px;
	        float:left;
	    }
	    #comicBottom
	    {   margin-top:10px;
	        width:850px;
	        height:25px;
	        background-image:url(../bits/Bottom.png);
	        background-repeat:no-repeat;
	    }
    </style>
</head>
<body>
<div id="mainContainer">
    <div id="comicTitleContainer">
          <div id="comicTitle"><?=$COMIC_TITLE?>sdfsdf</div>
          <div id="comicDate"><?=$COMIC_DATE?>sdfsdfsd</div>
          <div class="clearFloats"></div>
     </div>
     <div id="comicContainer">
        <div id="comicTop"></div>
	<div id="comicMiddle">
	     <div id="leftSide"></div>
	     <div id="center"></div>
	     <div id="rightSide"></div>
	     <div class="clearFloats"></div>
	</div>
	<div id="comicBottom"></div>
     </div>
</div>
</body>
</html>
 
Last edited:
wetgravy

wetgravy

New Member
if you are using tables, the easiest way to display a comic with a custom border like that is to do a 3x3 table grid. the corners would be your rounded caps and the sides would be the border lengths. and obviously the middle is the graphic ... if you do it that way, you can have a border that will also adjust with your image if say one page is 200x600 then the next is 300x300. as for it not spacing right ... you have margin issues. make sure your margins on your entire site are set to zero.
 
You must log in or register to reply here.
Top