Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Need Help With Image Wrapping
Saint_Michael
post Feb 21 2006, 04:03 AM
Post #1


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,460
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
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
CODE

<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.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta 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://www.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://www.onestat.com/aspx/login.aspx?sid='+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://www.onestat.com"><img border="0"

src="http://stat.onestat.com/stat.aspx?tagver=2&amp;sid=254482&amp;js=No&amp;" alt="online hit counter" /></a><br />
        <a href="http://www.onestat.com">online 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;gk
sdfgkl;aslgjsldgj;klsdgjksgjk;skjgsjd;gksdf

gkl;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>


This post has been edited by Saint_Michael: Feb 21 2006, 05:10 AM

(list)

Go to the top of the page
 
+Quote Post
Tyssen
post Feb 21 2006, 05:08 AM
Post #2



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
Sorry, what's the actual question?

(list)

Go to the top of the page
 
+Quote Post
Saint_Michael
post Feb 21 2006, 05:16 AM
Post #3


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,460
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
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.

(list)

Go to the top of the page
 
+Quote Post
Inspiron
post Feb 21 2006, 05:20 AM
Post #4


Trap Grand Marshal Member
***********

Group: Members
Posts: 1,205
Joined: 25-March 05
Member No.: 4,883
Unfortunately, I don't think it is possible for image stretching in CSS. That's the problem which I faced as well and I had to decide a standard dimension to follow.

(list)

Go to the top of the page
 
+Quote Post
Tyssen
post Feb 21 2006, 05:30 AM
Post #5



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
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; }