Pink Poogle Toy Forum

The official community of Pink Poogle Toy
Main Site
NeoDex
It is currently Sat Feb 22, 2025 9:09 pm

All times are UTC




Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 8 posts ] 
Author Message
 Post subject: Background Image (Easy)
PostPosted: Sat Jun 11, 2005 10:34 pm 
Newbie
Newbie

Posts: 21
Joined: Wed Mar 16, 2005 12:28 pm
It's probably an extremely easy question for you guys, but not for me... Anyway.. I've made a 100% Photoshop (all images) website and I've sliced into about 23 slices (images). The problem is, 2 of the images is supposed to be the 'menu' and the 'content box'. How do you make the 'menu' and 'content box' a background image thus allowing text to be typed over it?


Top
 Profile  
 
 Post subject:
PostPosted: Sun Jun 12, 2005 1:06 am 
Honorary Member
Honorary Member

Posts: 169
Joined: Sat Jun 05, 2004 6:30 pm
Location: Milwaukee, Wisconsin
well first make sure the width(or height) of the table cell is the same as the image your goign to use as your backgournd. then just go: <td background="URL"

pretty simple huh?


[DragonFly Javascript Library] Comming Soon


Top
 Profile  
 
 Post subject:
PostPosted: Sun Jun 12, 2005 1:23 am 
Newbie
Newbie

Posts: 21
Joined: Wed Mar 16, 2005 12:28 pm
How can you make it fixed? So when you type into much text the background won't move.


Top
 Profile  
 
 Post subject:
PostPosted: Sun Jun 12, 2005 1:42 am 
Beyond Godly
Beyond Godly
User avatar

Posts: 4874
Joined: Thu Jul 22, 2004 3:20 pm
Location: Vancouver!
Artist wrote:
How can you make it fixed? So when you type into much text the background won't move.


<td background="URL" width="image width" height="image height"

I believe.


Top
 Profile  
 
 Post subject:
PostPosted: Sun Jun 12, 2005 1:58 am 
Newbie
Newbie

Posts: 21
Joined: Wed Mar 16, 2005 12:28 pm
Can you see which code I have to put where?

http://www.shadow-i.net/~sparkiness


Top
 Profile  
 
 Post subject:
PostPosted: Sun Jun 12, 2005 6:37 am 
PPT God
PPT God

Posts: 1195
Joined: Mon May 31, 2004 6:35 am
What I would do is just use a div layer. It makes an invisible text box over the image so that you don't have to worry about stretching the table or moving the image around. Here is the code for it:
Code:
<td colspan="3"> <img src="images/menu.gif" alt="" height="399"
 width="138"><div style="width:136px; height:397px; overflow:auto;">
Menu goes here. Menu goes here. Menu goes here. Menu goes here.
</div></td>

What I did was I made the div layer slightly smaller than your cell so that it wouldn't stretch out the table. And the "overflow:auto" makes it scroll as soon as you get content in there that is too big for the box.
The same goes for your content box.
Code:
 <td colspan="7" rowspan="2"> <img src="images/content.gif" alt="" height="402" width="509"><div style="width:507px; height:400px; overflow:auto;">
Content goes here. Content goes here. Content goes here. Content goes here.
</div></td>

Let me know if it works for you.


Top
 Profile  
 
 Post subject:
PostPosted: Sun Jun 12, 2005 11:04 am 
Newbie
Newbie

Posts: 21
Joined: Wed Mar 16, 2005 12:28 pm
Doesn't work. :(

Can you try saving my website and putting the code where it belongs? Maybe I'm just doing this wrong. :(


Top
 Profile  
 
 Post subject:
PostPosted: Mon Jun 13, 2005 3:21 am 
PPT God
PPT God

Posts: 1195
Joined: Mon May 31, 2004 6:35 am
Open up the source file for your webpage.
Then hit CTRL+F and enter in "menu" for the menu line. Then copy and paste what I gave you up there ^ over the menu cell. Do the same for the content line.

I went and did it for you, but I haven't checked to see if it works.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>lay</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
</head>
<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0"
 marginwidth="0">
<!-- ImageReady Slices (lay.psd) -->
<table border="0" cellpadding="0" cellspacing="0" width="700">
  <tbody>
    <tr>
      <td colspan="14"> <img src="images/lay_01.gif" alt=""
 height="132" width="700"></td>
      <td> <img src="images/spacer.gif" alt="" height="132" width="1"></td>
    </tr>
    <tr>
      <td rowspan="5"> <img src="images/lay_02.gif" alt="" height="518"
 width="23"></td>
      <td> <a href="http://www.sparkedpixels.com"> <img
 src="images/lay_03.gif" alt="" border="0" height="20" width="79"></a></td>
      <td rowspan="2"> <img src="images/lay_04.gif" alt="" height="54"
 width="9"></td>
      <td colspan="3"> <a href="about.html"> <img
 src="images/lay_05.gif" alt="" border="0" height="20" width="96"></a></td>
      <td rowspan="2"> <img src="images/lay_06.gif" alt="" height="54"
 width="6"></td>
      <td> <a href="resources.html"> <img src="images/lay_07.gif"
 alt="" border="0" height="20" width="126"></a></td>
      <td rowspan="2"> <img src="images/lay_08.gif" alt="" height="54"
 width="15"></td>
      <td> <a href="generaltutorials.html"> <img
 src="images/lay_09.gif" alt="" border="0" height="20" width="161"></a></td>
      <td rowspan="2"> <img src="images/lay_10.gif" alt="" height="54"
 width="9"></td>
      <td colspan="2"> <a href="generaltutorials.html"> <img
 src="images/lay_11.gif" alt="" border="0" height="20" width="161"></a></td>
      <td rowspan="5"> <img src="images/lay_12.gif" alt="" height="518"
 width="15"></td>
      <td> <img src="images/spacer.gif" alt="" height="20" width="1"></td>
    </tr>
    <tr>
      <td> <img src="images/lay_13.gif" alt="" height="34" width="79"></td>
      <td colspan="3"> <img src="images/lay_14.gif" alt="" height="34"
 width="96"></td>
      <td> <img src="images/lay_15.gif" alt="" height="34" width="126"></td>
      <td> <img src="images/lay_16.gif" alt="" height="34" width="161"></td>
      <td colspan="2"> <img src="images/lay_17.gif" alt="" height="34"
 width="161"></td>
      <td> <img src="images/spacer.gif" alt="" height="34" width="1"></td>
    </tr>
    <tr>
      <td colspan="3"> <img src="images/menu.gif" alt="" height="399"
 width="138"><div style="width:136px; height:397px; overflow:auto;">
Menu goes here. Menu goes here. Menu goes here. Menu goes here.
</div></td>
      <td rowspan="3"> <img src="images/lay_19.gif" alt="" height="464"
 width="5"></td>
<td colspan="7" rowspan="2"> <img src="images/content.gif" alt="" height="402" width="509"><div style="width:507px; height:400px; overflow:auto;">
Content goes here. Content goes here. Content goes here. Content goes here.
</div></td>
      <td rowspan="3"> <img src="images/lay_21.gif" alt="" height="464"
 width="10"></td>
      <td> <img src="images/spacer.gif" alt="" height="399" width="1"></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="2"> <img src="images/lay_22.gif" alt=""
 height="65" width="138"></td>
      <td> <img src="images/spacer.gif" alt="" height="3" width="1"></td>
    </tr>
    <tr>
      <td colspan="7"> <img src="images/lay_23.gif" alt="" height="62"
 width="509"></td>
      <td> <img src="images/spacer.gif" alt="" height="62" width="1"></td>
    </tr>
    <tr>
      <td> <img src="images/spacer.gif" alt="" height="1" width="23"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="79"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="9"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="50"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="5"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="41"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="6"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="126"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="15"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="161"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="9"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="151"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="10"></td>
      <td> <img src="images/spacer.gif" alt="" height="1" width="15"></td>
      <td><br>
      </td>
    </tr>
  </tbody>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 8 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users and 60 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group