how do i make it so the image around my html slice expands when typed in ?

gameshow863 · #1 01-Jun-2004, 12:23

f2.pg.photos.yahoo.com
this is what the pages looks like at first

f2.pg.photos.yahoo.com
this is what it looks like after i have typed to
the very bootom of my html box.

For some reason the images around my html slice break apart when the html boxes is expanded. i need to know how to fix this. I need detailed info. Thank you

WaltP · #2 01-Jun-2004, 19:17

Quote:

Originally Posted by gameshow863

http://f2.pg.photos.yahoo.com/ph/cap...&.dnm=4aad.jpg
this is what the pages looks like at first

http://f2.pg.photos.yahoo.com/ph/cap...&.dnm=db52.jpg
this is what it looks like after i have typed to
the very bootom of my html box.

For some reason the images around my html slice break apart when the html boxes is expanded. i need to know how to fix this. I need detailed info. Thank you

It's hard to tell you how to fix it since you didn't post how you made the page. Try posting the HTML code so we can see what you did.

gameshow863 · #3 01-Jun-2004, 22:06

HTML Code:


<html>
<head>
<title>sample3.jpg</title>
<meta http-equiv="Content-Type" content="text/html;">
<!-- Fireworks MX Dreamweaver MX target.  Created Tue Jun 01 12:40:00 GMT-0400 (Eastern Daylight Time) 2004-->
</head>
<body bgcolor="#99cc00">
<table border="0" cellpadding="0" cellspacing="0" width="786">
<!-- fwtable fwsrc="product_page.png" fwbase="sample3.jpg" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
  <tr>
   <td><img src="spacer.gif" width="15" height="1" border="0" alt=""></td>
   <td><img src="spacer.gif" width="149" height="1" border="0" alt=""></td>
   <td><img src="spacer.gif" width="35" height="1" border="0" alt=""></td>
   <td><img src="spacer.gif" width="391" height="1" border="0" alt=""></td>
   <td><img src="spacer.gif" width="27" height="1" border="0" alt=""></td>
   <td><img src="spacer.gif" width="145" height="1" border="0" alt=""></td>
   <td><img src="spacer.gif" width="24" height="1" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>

  <tr>
   <td colspan="7"><img name="sample3_r1_c1" src="sample3_r1_c1.jpg" width="786" height="305" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="305" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="5"><img name="sample3_r2_c1" src="sample3_r2_c1.jpg" width="15" height="695" border="0" alt=""></td>
   <td rowspan="4" valign="top" bgcolor="#99cc00"><p></p></td>
   <td colspan="5"><img name="sample3_r2_c3" src="sample3_r2_c3.jpg" width="622" height="1" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="4"><img name="sample3_r3_c3" src="sample3_r3_c3.jpg" width="35" height="694" border="0" alt=""></td>
   <td rowspan="2" valign="top" bgcolor="#99cc00"><p></p></td>
   <td colspan="3"><img name="sample3_r3_c5" src="sample3_r3_c5.jpg" width="196" height="132" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="132" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="3"><img name="sample3_r4_c5" src="sample3_r4_c5.jpg" width="27" height="562" border="0" alt=""></td>
   <td valign="top" bgcolor="#99cc00"><p></p></td>
   <td rowspan="3"><img name="sample3_r4_c7" src="sample3_r4_c7.jpg" width="24" height="562" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="549" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="sample3_r5_c4" src="sample3_r5_c4.jpg" width="391" height="13" border="0" alt=""></td>
   <td rowspan="2"><img name="sample3_r5_c6" src="sample3_r5_c6.jpg" width="145" height="13" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
  <tr>
   <td><img name="sample3_r6_c2" src="sample3_r6_c2.jpg" width="149" height="12" border="0" alt=""></td>
   <td><img src="spacer.gif" width="1" height="12" border="0" alt=""></td>
  </tr>
</table>
</body>
</html>

WaltP · #4 01-Jun-2004, 23:58

Try adding border=1 in your table description to see if that tells you anything. Other than that, with 24 image tags, no comments or explanations, there's not much we can do. We can't even tell where the text is supposed to go.

JdS · #5 02-Jun-2004, 07:03

Hello gameshow863,

When you use a fixed (height) size image as a border, and when the text in the next cell fills beyond e.g. 695px, your image is not going fill the length of the border cell. What were you expecting?

You should use a background-repeated image if your image is simple (and repeatable) otherwise you could make the ends of your image fade into a solid background color similar to that in the border cell.

If my explanation is looking like Greek to you, please do not hesitate to reply with your question(s), I 'll be happy to help you out with example markup.

gameshow863 · #6 02-Jun-2004, 10:52

Quote:

Originally Posted by JdS

Hello gameshow863,

When you use a fixed (height) size image as a border, and when the text in the next cell fills beyond e.g. 695px, your image is not going fill the length of the border cell. What were you expecting?

You should use a background-repeated image if your image is simple (and repeatable) otherwise you could make the ends of your image fade into a solid background color similar to that in the border cell.

If my explanation is looking like Greek to you, please do not hesitate to reply with your question(s), I 'll be happy to help you out with example markup.

yes it is very much looking like Greek, pls help. Show me how its done

JdS · #7 03-Jun-2004, 06:48

Without access to your 'border' images, I can only show you the 'repeatable' image border example.

First of all, create a solid, orange coloured gif and save it as orange.gif. The image file should be 5 x 1 (width x height) pixels. Note that this image is only 1 px in height; so actually a tiny image file.

Now in a sample table with 3 columns, this is probably how you can use this 'repeatable' border image to fake borders on either side of the middle column:

HTML Code:


<table border="0" cellpadding="0" cellspacing="0" width="300">
  <tr>
    <!-- LEFT BORDER -->
    <td style="width:5px; background:url(/images/orange.gif) gray repeat-y top left;"></td>
    <td style="width:290px; background-color:white"><p>Insert more text here to make this cell as long as you want.</p></td>
    <!-- RIGHT BORDER -->
    <td style="width:5px; background:url(/images/orange.gif) gray repeat-y top left;"></td>
  </tr>
</table>

Then the left and right column 'style' attributes are the same; what they define is:

width = 5 pixels
background = an image found at /image/orange.gif repeated lengthwise starting from the top and left of the column; plus make the background of this column grey/gray.

Notice that I used the colour gray for the 'border' columns' background colour; the normal thing to do would be to assign a colour that is similar to the colour in the 'repeated' image just in case the image does not load for whatever reasons.

If you need an example how this can be useful, search for anything on www.gidsearch.com and note the 'gradient' borders on either side the search results, these are simply 1 pixel high image files repeated many times lengthwise.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

how do i make it so the image around my html slice expands when typed in ?

here is my html code for this site, please help

yes it is very much looking like Greek, pls help