Jump to content
xisto Community
Sign in to follow this  
Followers 0
Saint_Michael

Need Help With Image Wrapping

By Saint_Michael, in Programming

Recommended Posts

Saint_Michael    3

Saint_Michael
Posted (edited)

ok my problem now is that i need it to auto width the image that needs to be use so then I can use <div> tags for the content without the need for the image to expand from left to right.

 

heres the css for the image wrap

 

<style type="text/css">span {	background-image: url(images/gfxtrap_42.gif);	background-repeat: repeat-y;	background-position: top left, bottom right;	height: 200px;	border: 0px;}</style>
 

heres the rest of the website code.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!-- 	@import "topnav.css";	@import "leftnav.css";	-->		</style><style type="text/css">span {	background-image: url(images/gfxtrap_42.gif);	background-repeat: repeat-y;	height: 200px;		width:  800px	border: 0px;}</style><script language="JavaScript" SRC="menu.js"></SCRIPT></head><body bgcolor="#dbdbdb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><DIV STYLE="position: absolute; left: 100px; top: 3px"><table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">	<tr>		<td colspan="15">			<img src="images/gfxtrap_01.gif" width="662" height="16" alt=""></td>		<td colspan="3" rowspan="9" background="images/gfxtrap_02.gif" width="138" height="199" alt=""><DIV STYLE="position: absolute; left: 661px; top: 0px"><img src="logo.gif" width="138" height="195"></div></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="3" rowspan="2">			<img src="images/gfxtrap_03.gif" width="58" height="84" alt=""></td>		<td colspan="10">			<img src="images/gfxtrap_04.gif" width="381" height="74" alt=""></td>		<td colspan="2" rowspan="2">			<img src="images/gfxtrap_05.gif" width="223" height="84" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="74" alt=""></td>	</tr>	<tr>		<td colspan="10">			<img src="images/gfxtrap_06.gif" width="381" height="10" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="10" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="3">			<img src="images/gfxtrap_07.gif" width="56" height="55" alt=""></td>		<td colspan="2"><div id="button"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td><div id="button1"><img src="images/spacer.gif" alt="" /><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"></div></a></td>		<td colspan="4"><div id="button2"><img src="images/spacer.gif" alt="" /><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"></div></a></td>		<td><div id="button3"><img src="images/spacer.gif" alt="" /><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()"></div></a></td>		<td><div id="button4"><img src="images/spacer.gif" alt="" /><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"></div></a></td>		<td><div id="button5"><img src="images/spacer.gif" alt="" /><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '150px')" onMouseout="delayhidemenu()"></div></a></td>		<td colspan="2"><div id="button6"><img src="images/spacer.gif" alt="" /><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '150px')" onMouseout="delayhidemenu()"></div></a></td>		<td><div id="button7"><img src="images/spacer.gif" alt="" /><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu7, '150px')" onMouseout="delayhidemenu()"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="32" alt=""></td>	</tr>	<tr>		<td colspan="6" rowspan="2">			<img src="images/gfxtrap_16.gif" width="138" height="23" alt=""></td>		<td colspan="7">			<img src="images/gfxtrap_17.gif" width="468" height="14" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="14" alt=""></td>	</tr>	<tr>		<td colspan="7" rowspan="20" background="images/gfxtrap_18.gif" width="468" height="404" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="9" alt=""></td>	</tr>	<tr>		<td rowspan="19">			<img src="images/gfxtrap_19.gif" width="40" height="395" alt=""></td>		<td colspan="6"></td>		<td rowspan="19"><div id="button8"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a><img src="images/gfxtrap_21.gif" width="7" height="395" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button9"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6" rowspan="2"><div id="button10"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="12" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="16"><img src="images/gfxtrap_24.jpg" width="96" height="351" alt=""></td>		<td rowspan="16"><img src="images/gfxtrap_25.gif" width="42" height="351" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="4" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button11"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button12"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button13"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button14"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button15"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button16"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button17"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button18"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button19"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button20"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="18" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button21"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"<div id="button22"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button23"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td colspan="6"><div id="button24"><img src="images/spacer.gif" alt="" /><a href="default.htm"></div></a></td>		<td>			<img src="images/spacer.gif" width="1" height="16" alt=""></td>	</tr>	<tr>		<td>			<img src="images/gfxtrap_40.gif" width="16" height="121" alt=""></td>		<td colspan="5" background="images/gfxtrap_41.gif" width="131" height="121" alt=""><div style="position: absolute; left: 60px; top: 435px">	  <!--ONESTAT SCRIPTCODE START-->	  <!--// Modification of this code is not allowed and will permanently disable your account!// Account ID : 254482// Website URL: http://http://gfxtrap.com/// Copyright (C) 2002-2005 OneStat.com All Rights Reserved-->	  <div id="OneStatTag">		<script type="text/javascript"><!--function OneStat_Pageview(){	var d=document;	var sid="254482";	var CONTENTSECTION="";	var osp_URL=d.URL;	var osp_Title=d.title;	var t=new Date();	var p="http"+(d.URL.indexOf('https:')==0?'s':'')+"://stat.onestat.com/stat.aspx?tagver=2&sid="+sid;	p+="&url="+escape(osp_URL);	p+="&ti="+escape(osp_Title);	p+="&section="+escape(CONTENTSECTION);	p+="&rf="+escape(parent==self?document.referrer:top.document.referrer);	p+="&tz="+escape(t.getTimezoneOffset());	p+="&ch="+escape(t.getHours());	p+="&js=1";	p+="&ul="+escape(navigator.appName=="Netscape"?navigator.language:navigator.userLanguage);	if(typeof(screen)=="object"){	   p+="&sr="+screen.width+"x"+screen.height;p+="&cd="+screen.colorDepth;	   p+="&jo="+(navigator.javaEnabled()?"Yes":"No");	}	d.write('<a href="http://http://www.onestat.com/aspx/login.aspx?sid=&%2339;+sid+&;'>http://http://www.onestat.com/aspx/login.aspx?sid=&%2339;+sid+&; target=_blank><img id="ONESTAT_TAG" border="0" src="'+p+'" alt="This site tracked by OneStat.com. Get your own free site counter."></'+'a>');}OneStat_Pageview();//-->			</script>		<noscript>		<a href="http://http://www.onestat.com/ border="0" src="http://stat.onestat.com/stat.aspx?tagver=2&sid=254482&js=No&" alt="online hit counter" /></a><br />		<a href="http://http://www.onestat.com/ hit counter</a>		</noscript>		<div style="DISPLAY: none; COLOR: black; FONT-FAMILY: 'Verdana';"><a href="http://www.onestat.com; style="text-decoration:none;">online hit counter</a><br />		  <a href="http://www.onestatfree.com; style="text-decoration:none;">website analysis</a></div>	  </div>	  <!--ONESTAT SCRIPTCODE END--></td>		<td>			<img src="images/spacer.gif" width="1" height="121" alt=""></td>	</tr>	<tr>		<td colspan="18">[b]THIS IS WHERE THE EXPANSION IS STARTING[/b]<span>sdfgkl;aslgjsldgj;klsdgjksgjk;skjgsjd;gksdfgkl;aslgjsldgj;klsdgjksgjk;skjgsjd;gksdfgkl;aslgjsldgj;klsdgjksgjk;skjgsjd;gksdfgkl;aslgjsldgjs<br></span>[b]THIS IS WHERE THE EXPANSION IS ENDS[/b]</td>		<td>			<img src="images/spacer.gif" width="1" height="8" alt=""></td>	</tr>	<tr>		<td colspan="18">			<img src="images/gfxtrap_43.gif" width="800" height="13" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="13" alt=""></td>	</tr>	<tr>		<td colspan="2" rowspan="2">			<img src="images/gfxtrap_44.gif" width="56" height="29" alt=""></td>		<td colspan="4">			<img src="images/gfxtrap_45.gif" width="94" height="22" alt=""></td>		<td colspan="8" rowspan="2">			<img src="images/gfxtrap_46.gif" width="390" height="29" alt=""></td>		<td colspan="2">			<img src="images/gfxtrap_47.gif" width="207" height="22" alt=""></td>		<td colspan="2" rowspan="2">			<img src="images/gfxtrap_48.gif" width="53" height="29" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="22" alt=""></td>	</tr>	<tr>		<td colspan="4">			<img src="images/gfxtrap_49.gif" width="94" height="7" alt=""></td>		<td colspan="2">			<img src="images/gfxtrap_50.gif" width="207" height="7" alt=""></td>		<td>			<img src="images/spacer.gif" width="1" height="7" alt=""></td>	</tr>	<tr>		<td>			<img src="images/spacer.gif" width="40" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="16" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="2" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="38" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="47" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="7" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="37" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="7" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="2" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="79" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="64" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="95" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="5" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="101" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="122" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="85" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="11" height="1" alt=""></td>		<td>			<img src="images/spacer.gif" width="42" height="1" alt=""></td>		<td></td>	</tr></table></body></html>
Edited by OpaQue (see edit history)

Share this post

Link to post
Share on other sites

Saint_Michael    3

Saint_Michael
Posted

the question is I need to stretch the whole image out from left to right with out the need to put text in it and then use a <div> tag for the content.

Share this post

Link to post
Share on other sites

Tyssen    0

Tyssen
Posted

You can't stretch a background image. You can repeat it though. You can stretch an image in the HTML though if you specify its width and height in the CSS and use ems as your unit, e.g.:

 

img#yourImage { width: 2em; height: 3em; }

Share this post

Link to post
Share on other sites

Saint_Michael    3

Saint_Michael
Posted

well my other problem is that im using a imaged background as well so thats why i need to stretch the image out .it would have been fine if I used it without the background and just used the normal background of the website.

Share this post

Link to post
Share on other sites

Saint_Michael    3

Saint_Michael
Posted (edited)

Posted Image

 

if thats the case I shouldn't be having this problem then with this size of the image. But it comes out the full image when i max it out with the armount of characters that i need to do it.

Edited by Saint_Michael (see edit history)

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

Ad that em measurement doesn't seem to work onMozilla, although it works with Opera and IE. Mozilla idnores the increase in size, apparently. I even cleaned the cache so it wouldn't pick it up out of there.

Share this post

Link to post
Share on other sites

Saint_Michael    3

Saint_Michael
Posted

if worse case senario with the template i have to just core out the inside and then just go from their.

Share this post

Link to post
Share on other sites

Tyssen    0

Tyssen
Posted

if thats the case I shouldn't be having this problem then with this size of the image. But it comes out the full image when i max it out with the armount of characters that i need to do it.

I have no idea what that's s'posed to mean. Got a link to a page?

Share this post

Link to post
Share on other sites

Saint_Michael    3

Saint_Michael
Posted

I posted the image to what i was referring to but I think I have to is core out the inside of template and hten go from their.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept