News:

Click here for Toll-Free Service for your business starting at $2.00 per month

Main Menu

Background stretching using HTML not working...please help.

Started by Paris, February 13, 2006, 10:46:08 PM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Paris

February 13, 2006, 10:46:08 PM
Im trying to stretch the backgrounds for my navigations and content area all the way to the footer but ive done everything i can and with the code im using it should work....i mean it worked for a friend of mine, her layout is styled almost exactly like mine, and she is using the same codes to stretch her backgrounds as me(i let her...dont worry...its not against copyright law) and its working fine for her. Unfotunately, i have no idea why and how it is working for her...and i think she did something different....but wont get into telling me for some reason. All she said was that the HTML code should make it work...and I should know how myself.

Anyways, I really hope someone can help me. Below are the code and the images:

Code Select

<HTML>
<HEAD>
<style type="text/css">
body     {
         cursor: crosshair;
         margin: 0px;
         padding: 0px;
         background-color: fcbc5c;
         scrollbar-3dlight-color: #C0C0C0;
         scrollbar-arrow-color: #ffffff;
         scrollbar-base-color: #767676;
         scrollbar-darkshadow-color: #414141;
         scrollbar-face-color: #767676;
         scrollbar-highlight-color: #C0C0C0;
         scrollbar-shadow-color: #414141;
         scrollbar-track-color: 365665;
}
.head    {
         color: #fc7809;
         font-size:10pt;
         font-family: verdana;
         text-decoration: none;
         font-weight: bold;

}
.head2    {
         color: #fffa62;
         font-size:10pt;
         font-family: verdana;
         text-decoration: none;
         font-weight: bold;

}
.update    {
         color: #fc7809;
         font-size: 8pt;
         font-family: verdana;
         text-decoration: none;
         font-weight: bold;

}
.outline {
         background-color:#fcbc5c;
         border-style:solid;
         border-left:solid;
         border-right:solid;
         border-top:none;
         border-bottom:none;
         border-color:#fc7809;
         border-width:1px;
                 
}
.top     {
         background-image:url(cont_head1.gif);
         background-attachment:center;
         

}   
.conttxt {
         color: #fc7809;
         font-size: 8pt;
         font-family: verdana;
         text-decoration: none;
         font-weight: 900;
}
table    {
         color: #fc7809;
         font-size: 8pt;
         font-family: verdana;
         text-decoration: none;
         font-weight: 900;
       
}
A:link, A:visited, A:active {
   color: #fc7809;
   font-size: 7pt;
   font-family: verdana;
   text-decoration: none;
   font-weight: 500;
   
}
A:hover {
   color: #fcd728;
   font-size: 7pt;
   font-family: verdana;
   text-decoration: none;
   cursor: help;
}
</style>
<TITLE>:.:>>---Charmed-Designs Inc.--Pure Bliss-Version 4.0--<<:.:</TITLE>
</HEAD>
<body bgcolor="#fcbc5c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" align="center">
<TABLE WIDTH="775" HEIGHT="441" BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER>
<center><img src="Bliss_header.jpg" width="775" height="441" border="0" alt="" usemap="#Bliss_header_Map" align="center">
<map name="Bliss_header_Map">
<area shape="rect" alt="" coords="710,387,753,408" href="tos.php" target="_self">
<area shape="rect" alt="" coords="599,392,689,412" href="contact.php" target="_self">
<area shape="rect" alt="" coords="157,408,190,425" href="siteinfo.php" target="_self">
<area shape="rect" alt="" coords="82,412,136,432" href="index.php" target="_self">
<area shape="rect" alt="" coords="0,416,71,433" href="index.php" target="_self">
</map>
</center>

<TR>
<TD>
<TD VALIGN="TOP" ALIGN="CENTER" WIDTH="186" STYLE="BACKGROUND:URL(navlbg.jpg);BACKGROUND-REPEAT:NO-REPEAT;">
<br><br>
<!------------------------------------------------------------------------------------------------------------------------>
<table width=156 border=0 cellspacing=0 cellpadding=0>
<tr>
<td height="23" width="156" background="nav_head.gif" class="head" align="center"><b>Header</b></td>

</tr>
<tr><td STYLE="BACKGROUND:URL(nav_bg.gif);BACKGROUND-REPEAT:NO-REPEAT;">
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a>
</td>
</tr>
<tr>
<td height="10" width="156" background="nav_foot.gif">
</tr>
</table>
<br>

<table width=156 border=0 cellspacing=0 cellpadding=0>
<tr>
<td height="23" width="156" background="nav_head.gif" class="head" align="center"><b>Header</b></td>

</tr>
<tr><td STYLE="BACKGROUND:URL(nav_bg.gif);BACKGROUND-REPEAT:NO-REPEAT;">

<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a>
</td>
</tr>
<tr>
<td height="10" width="156" background="nav_foot.gif">
</tr>

</table>
<br>

<table width=156 border=0 cellspacing=0 cellpadding=0>
<tr>
<td height="23" width="156" background="nav_head.gif" class="head" align="center"><b>Header</b></td>

</tr>
<tr><td STYLE="BACKGROUND:URL(nav_bg.gif);BACKGROUND-REPEAT:NO-REPEAT;">
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>

<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a>
</td>
</tr>

<tr>
<td height="10" width="156" background="nav_foot.gif">
</tr>
</table>
<br>

<table width=156 border=0 cellspacing=0 cellpadding=0>
<tr>
<td height="23" width="156" background="nav_head.gif" class="head" align="center"><b>Header</b></td>
</tr>
<tr><td STYLE="BACKGROUND:URL(nav_bg.gif);BACKGROUND-REPEAT:NO-REPEAT;">
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>

<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>

<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a>
</td>
</tr>

<tr>
<td height="10" width="156" background="nav_foot.gif">
</tr>
</table>
<!------------------------------------------------------------------------------------------------------------------------>

</TD>
<TD COLSPAN=2 VALIGN="TOP" ALIGN="CENTER" WIDTH="401" STYLE="BACKGROUND:URL(content.jpg);BACKGROUND-REPEAT:NO-REPEAT;PADDING-TOP:25PX;PADDING-LEFT:6PX;PADDING-RIGHT:6PX;">
<!------------------------>
<p class="top" valign="bottom" align="center"> » Header</p>
<table width="337" border=0 cellspacing=0 cellpadding=0 align=center>
<tr>
<td height="36" width"337" background="cont_head2.gif" class="head2" align="center" valign="bottom"><b>Header</b></td>
</tr>
<tr>
<td class="outline">
<table width="100%" border="0" cellspacing="0" align="center">
<tr>
<div style="float:left;padding:3px;"><img alt="" src="bliss_avi.gif" style="border: none;" /></div>Text here Text here Text here Text here Text here
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text
<br><br>
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here.

</tr>
</table>
<tr>
<td colspan="2" class="outline">
<table width="100%" border="0" cellspacing="5" align="center">
<tr>
<td class="update" width="50%">Date</td><td class="update" width="50%"><a href="index.php">Subject</a></td>
</tr>
</table>
</td>

</tr>
<tr>
<td height="28" width="337" background="cont_foot.gif">
</tr>
</table>
<br>

<table width="337" border=0 cellspacing=0 cellpadding=0 align=center>
<tr>
<td height="36" width"337" background="cont_head2.gif" class="head2" align="center" valign="bottom"><b>Header</b></td>
</tr>
<tr>
<td class="outline">
<table width="100%" border="0" cellspacing="0" align="center">
<tr>
<div style="float:left;padding:3px;"><img alt="" src="bliss_avi.gif" style="border: none;" /></div>Text here Text here Text here Text here Text here
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text
<br><br>
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here.

</tr>
</table>
<tr>
<td class="outline">
<table width="100%" border="0" cellspacing="5" align="center">
<tr>
<td class="update" width="50%">Date</td><td class="update" width="50%"><a href="index.php">Subject</a></td>
</tr>
</table>

</td>
</tr>
<tr>
<td height="28" width="337" background="cont_foot.gif">
</tr>
</table>
<br>
<center>
<table border="0" style="padding:2px;"><tr><td id="navhover"><a href="index.php"> « <b>Previous</b> </a></td> <td id="navhover"><a href="index.php"> <b>1</b> </a></td>  <td id="navhover"><a href="index.php"> <b>2</b> </a></td>  <td id="navhover"><a href="index.php"> <b>3</b> </a></td>  <td> <b>4</b> </td> </tr>

</table>
</center><!------------------------------------------------------------------------------------------------------------------------>

</TD>
<TD VALIGN="TOP" ALIGN="CENTER" WIDTH="188" STYLE="BACKGROUND:URL(navrbg.jpg);BACKGROUND-REPEAT:NO-REPEAT;PADDING-TOP:5PX;">
<!------------------------------------------------------------------------------------------------------------------------>
<table width=156 border=0 cellspacing=0 cellpadding=0>
<tr>
<td height="23" width="156" background="nav_head.gif" class="head" align="center"><b>Header</b></td>
</tr>
<tr><td  STYLE="BACKGROUND:URL(nav_bg.gif);BACKGROUND-REPEAT:NO-REPEAT;">
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a>

<a href="gallery" target="_blank">☼ Link here</a>
</td>
</tr>
<tr>
<td height="10" width="156" background="nav_foot.gif">
</tr>
</table>
<br>

<table width=156 border=0 cellspacing=0 cellpadding=0>
<tr>
<td height="23" width="156" background="nav_head.gif" class="head" align="center"><b>Header</b></td>
</tr>
<tr><td STYLE="BACKGROUND:URL(nav_bg.gif);BACKGROUND-REPEAT:REPEAT;">

<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a>
</td>
</tr>

<tr>
<td height="10" width="156" background="nav_foot.gif">
</tr>
</table>
<br>

<table width=156 border=0 cellspacing=0 cellpadding=0>
<tr>
<td height="23" width="156" background="nav_head.gif" class="head" align="center"><b>Header</b></td>
</tr>
<tr><td  STYLE="BACKGROUND:URL(nav_bg.gif);BACKGROUND-REPEAT:NO-REPEAT;">
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a>
</td>
</tr>
<tr>
<td height="10" width="156" background="nav_foot.gif">
</tr>
</table>
<br>

<table width=156 border=0 cellspacing=0 cellpadding=0>
<tr>
<td height="23" width="156" background="nav_head.gif" class="head" align="center"><b>Header</b></td>
</tr>
<tr><td STYLE="BACKGROUND:URL(nav_bg.gif);BACKGROUND-REPEAT:NO-REPEAT;">
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a>
</td>
</tr>
<tr>
<td height="10" width="156" background="nav_foot.gif">
</tr>
</table>
<br>

<table width=156 border=0 cellspacing=0 cellpadding=0>
<tr>
<td height="23" width="156" background="nav_head.gif" class="head" align="center"><b>Header</b></td>
</tr>
<tr><td STYLE="BACKGROUND:URL(nav_bg.gif);BACKGROUND-REPEAT:NO-REPEAT;">
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a><br>
<a href="index.php">☼ Link here</a>
<br>
</td></tr>
<tr>
<td height="10" width="156" background="nav_foot.gif">
</tr>

</table>
<!------------------------------------------------------------------------------------------------------------------------>

</TD>
</TR>

<TR>
<TD ALIGN="CENTER" VALIGN="TOP" COLSPAN="8" STYLE="BACKGROUND:URL(bliss_footer.jpg);BACKGROUND-REPEAT:NO-REPEAT;HEIGHT:124PX;TEXT-ALIGN:CENTER;PADDING-
TOP:13PX;"></TD>
</TR>
</TABLE>
</TD>
</TR>

</TABLE>
</BODY>
</HTML>


(bliss_header.jpg)


(bliss_footer.jpg)


(nav_head.gif)


(nav_bg.gif)


(nav_foot.gif)


(navlbg.jpg)


(navrbg.jpg)


(content.jpg)


(cont_head1.gif)


(cont_head2.gif)


(cont_foot.gif)


(bliss_avi.gif)


Okay, well that should be it....if something is missing then please just tell me and ill post it.

I also can't  figure out why the (cont_head1.jpg) isnt showing up, the text that should be on it is, but the image isnt. The code looks right to me, but maybe something is wrong.??.

Here are the screenshots of the top and bottom of how the layout looks:

Screenshot 1(top)


Screenshot 2(bottom)


I really hope someone can help....soon. ^_^

sixthcrusifix

#1
February 13, 2006, 10:54:05 PM Last Edit: February 13, 2006, 11:43:10 PM by sixthcrusifix
took me a while to figure out what you were asking for, I think you provided a little too much information. Anyway I think I can help but it's gonna take me a while to look at all of the code you posted so hold on...


I notice that your screenshots are from C"Documents and Settings

Could you giv eme the URL to your site so I can physically see this?


you rely to much on CSS, you really don't need to be stretching these they don't match up. you need a BG image that can repeat and match with them...




Anyway I sorta fixed both of your problems via Table Nesting.

Look Here:

http://crystalchasm.net/testpage.php
Visite me website at http://www.sixthcrusifix.com

Paris

#2
February 14, 2006, 01:48:45 AM
OMG thank you so much for solving my problem!!! Wow your good...i mean that was alot of code to look at and figure out..lol. Thanx!!

sixthcrusifix

#3
February 14, 2006, 09:21:26 AM
Quote from: paris on February 14, 2006, 01:48:45 AM
OMG thank you so much for solving my problem!!! Wow your good...i mean that was alot of code to look at and figure out..lol. Thanx!!

loll thanks. do you need me to give you the background iameg I used ? You can probably get it from looking trhough the code o nmy page. There is a better solution I'm sure but for now what I did works and is very easily taken off.
Visite me website at http://www.sixthcrusifix.com
Print
Go Up Pages1
User actions