need some html help

el_ricardo · 04-21-2008, 07:25 PM

hi all, hope this is in the correct forum, didn't seem to fit anywhere else really, move it if you need to!

anyway, I'm designing a website at the minute. The main content is displayed in an iframe, and to fit in with the rest of the design, I used z-index to place a border around it. (the site is made from torn paper, I don't want the straight edges around it) Here is the div tag for the top border image for the iframe (the table containing the iframe's z-index being 1):

Code:

<div style="{z-index:2;position:absolute;top:228;left:294;}">
<img src="images/topbg2.gif" border="0" />
</div>

thanks

**Jaxo** · 04-22-2008, 11:25 PM

Sorry el_ricardo I am not sure what your question is. Could you try again please?

It is also very helpful to include a link or the code for your site in your post.

Hopefully we can help you out.

el_ricardo · 04-23-2008, 04:44 AM

ok, here's the code, it's long so i've highlighted the areas that are giving me trouble in bold:

Code:

<html>
<head>
<title>website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">

	<!-- ImageReady Slices (website.psd) -->
  <img src="images/spacer.gif" width="1" height="80">
  <table id="Table_01" width="724" height="554" border="0" cellpadding="0" cellspacing="0" >
    <tr>
      <td>
        <img src="images/spacer.gif" width="11" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="4" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="17" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="10" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="8" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="103" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="2" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="7" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="532" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="29" height="1" alt=""></td>
	    <td></td>
    </tr>
    <tr>
      <td colspan="10">
        <img src="images/website_01.jpg" width="723" height="23" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="23" alt=""></td>
    </tr>
    <tr>
      <td colspan="4">
        <img src="images/website_02.jpg" width="42" height="78" alt=""></td>
	    <td colspan="4">
		    <a href="index2.html" target="iframe1"
				onmouseover="window.status='home';  return true;"
				onmouseout="window.status='';  return true;">
		      <img src="images/Untitled-1_03.jpg" hoversrc="images/homedown.gif" width="120" height="78" border="0" alt=""></a></td>
	    <td colspan="2" rowspan="3">
		    <img src="images/website_04.jpg" width="561" height="118" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="78" alt=""></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="5">
        <img src="images/website_05.jpg" width="32" height="261" alt=""></td>
	    <td colspan="4" rowspan="3">
		    <a href="birthday.html" target="iframe1"
				onmouseover="window.status='birthday cards';  return true;"
				onmouseout="window.status='';  return true;">
		      <img src="images/Untitled-1_06.jpg" hoversrc="images/birthdaydown.gif" width="123" height="86" border="0" alt=""></a></td>
	    <td>
		    <a href="index2.html" target="iframe1"
				onmouseover="window.status='home';  return true;"
				onmouseout="window.status='';  return true;">
		      <img src="images/Untitled-1_03-08.jpg" width="7" height="1" border="0" alt=""></a></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
      <td>
        <img src="images/website_08.jpg" width="7" height="39" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="39" alt=""></td>
    </tr>

    <tr>
      <td width="539" height="353" colspan="2" rowspan="6" background="images/bg.gif" style="{postion:absolute;z-index:1}"><iframe target="index2.html" border="0" name="iframe1" width="535" height="348" frameborder="0"></iframe></td>
	    <td rowspan="8">
		    <img src="images/website_10.jpg" width="29" height="412" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="46" alt=""></td>
    </tr>    
    <div style="{top:182px;left:163px;position:relative;z-index:2;}">
  <img src="images/topbg.png" border="0" />
  </div>
    <tr>
      <td rowspan="2">
        <img src="images/website_11.jpg" width="10" height="175" alt=""></td>
	    <td colspan="3">
		    <a href="valentines.html" target="iframe1"
				onmouseover="window.status='valentines cards';  return true;"
				onmouseout="window.status='';  return true;">
		      <img src="images/Untitled-1_11.jpg" hoversrc="images/valentinesdown.gif" width="113" height="90" border="0" alt=""></a></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="90" alt=""></td>
    </tr>
    <tr>
      <td>
        <img src="images/website_13.jpg" width="8" height="85" alt=""></td>
	    <td colspan="2">
		    <a href="thankyou.html" target="iframe1"
				onmouseover="window.status='thankyou cards';  return true;"
				onmouseout="window.status='';  return true;">
		      <img src="images/Untitled-1_14.jpg" hoversrc="images/thankyoudown.gif" width="105" height="85" border="0" alt=""></a></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="85" alt=""></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">
        <img src="images/website_15.jpg" width="15" height="97" alt=""></td>
	    <td colspan="5">
		    <a href="congratulations.html" target="iframe1"
				onmouseover="window.status='congratulations cards';  return true;"
				onmouseout="window.status='';  return true;">
		      <img src="images/Untitled-1_17.jpg" hoversrc="images/congratulationsdown.gif" width="140" height="95" border="0" alt=""></a></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="95" alt=""></td>
    </tr>
    <tr>
      <td colspan="5">
        <img src="images/website_17.jpg" width="140" height="2" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
      <td rowspan="3">
        <img src="images/website_18.jpg" width="11" height="94" alt=""></td>
	    <td colspan="5" rowspan="2">
		    <a href="contact.html" target="iframe1"
				onmouseover="window.status='contact me';  return true;"
				onmouseout="window.status='';  return true;">
		      <img src="images/Untitled-1_20.gif" hoversrc="images/contactdown.gif" width="142" height="83" border="0" alt=""></a></td>
	    <td rowspan="3">
		    <img src="images/website_20.jpg" width="2" height="94" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="35" alt=""></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">
        <img src="images/website_21.jpg" width="539" height="59" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="48" alt=""></td>
    </tr>
    <tr>
      <td colspan="5">
        <img src="images/website_22.jpg" width="142" height="11" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="11" alt=""></td>
    </tr>
  </table>
  <!-- End ImageReady Slices -->
  <script type="text/javascript" src="imgRoll.js"></script>
</div>
</body>
</html>

hope that helps, I've been going round in circles over this for 2 days now!

**Jaxo** · 04-23-2008, 10:54 PM

el_ricardo,

Sorry if I have missed it, but you have not described what your issue is.

Do you happen to have the page online so we can look at it in a browser or a screen shot if not?

We will get this figured out.

Thanks for posting the code though.

el_ricardo · 04-24-2008, 06:17 AM

Ok here's a screenshot, as you can see there's a chunk of the website that refuses to stay where it's supposed to. The problem is that I'm editing the website in dreamweaver, so the browser preview window in dreamweaver obviously has different dimensions to a firefox window, so the style options don't work! even i can get it to look right on my screen, as soon as the website's viewed on a different resolution it's gonna get messed up again!

if all else fails however, as long as it can be viewed on a 1024x768 screen everything should be ok. This is part of a uni project, and in my assessment I'm going to have my laptop (with 1024x768 res) so my tutors can see it.

would it help to use a scrolling div box instead of an iframe? guessing it might be a bit more manageable...

edit: not sure why the picture's so small, but you can still make it out

**Jaxo** · 04-24-2008, 05:18 PM

Quote:

Originally Posted by el_ricardo

This is part of a uni project, and in my assessment I'm going to have my laptop (with 1024x768 res) so my tutors can see it.

From Forum Rules:

Quote:

EDUCATIONAL ASSISTANCE

While we are happy to promote the education of users, we feel it is inappropriate to circumvent the learning process by directly assisting with assignments and projects of an educational nature. Direct answers to school or college assignments are not allowed and will not be given. However, if a user is having trouble comprehending a certain topic, the members and staff at TSF will be happy to provide assistance with understanding the topic.

Perhaps moderator can give a thumbs up or down on this?

**Redcore** · 04-24-2008, 09:53 PM

I wouldn't mind us helping him...he MADE the site, just needs a nudge in the right direction.

el_ricardo · 04-25-2008, 07:59 AM

oh come on, might i add that the choice to build a website was completely my own, as webdesign is a completely unrelated subject to the project that i'm working on (a print project, as in traditional printing techniques) I'm only building this site so i can better present the project in context, a website wasn't even included in the brief!

I really need some help with this though, i really can't get my head round it, and my deadline for this project is next week!

**Jaxo** · 04-25-2008, 10:30 AM

Sounds like it's within our powers to help.

I would love to see your site in a browser so I can have a go at it.

Private message sent to you!

el_ricardo · 04-25-2008, 08:17 PM

I don't have anywhere to host it (final thing will just be saved on the laptop's hard disk and viewed locally) so i've attached a zip archive with all the files in, I hope that's ok.

the main page is just website.html, everything should work, and it should be obvious where my problem lies when viewed in a browser lol, haven't gotten round to making all the links work yet, so it's just the index that works, but that's irrelevent given my problem

hope that helps, and thanks for giving us a hand with this

**Jaxo** · 04-26-2008, 12:26 AM

Try this out. It's not pretty but it will move the image back over to the left.

Find this code:

Code:

<div> style="{top:182px;left:163px;position:relative;z-index:2;}">
  <img src="images/topbg.png" border="0" />
  </div>

Try and see if this works:

Code:

<div style="{top: 225px; left: 425px; position: absolute; z-index: 2;}">
  <img border="0" src="images/topbg.png" />
  </div>

This will allow you to adjust the top px and left px to put the image in the right place using poition:absolute;.

Hope that helps! Let me know if there was something else that you needed help with.

**Jaxo** · 04-29-2008, 12:41 AM

Any luck getting the site figured out?

el_ricardo · 05-05-2008, 12:51 AM

yeah, botched it together in the end with an onscreen ruler so it just displays correctly on my laptop's display, thanks a lot guys, and sorry for the late reply, been busy

**Jaxo** · 05-05-2008, 10:18 AM

Good luck with your presentation!

Unless you already presented, then how did it go?

04-21-2008, 07:25 PM	#1 (permalink)
el_ricardo Registered User Join Date: Jun 2005 Location: wakefield, UK Posts: 68 OS: WinXP pro sp3, Vista sp1, Ubuntu 8.04, OpenSuse	need some html help hi all, hope this is in the correct forum, didn't seem to fit anywhere else really, move it if you need to! anyway, I'm designing a website at the minute. The main content is displayed in an iframe, and to fit in with the rest of the design, I used z-index to place a border around it. (the site is made from torn paper, I don't want the straight edges around it) Here is the div tag for the top border image for the iframe (the table containing the iframe's z-index being 1): Code: <div style="{z-index:2;position:absolute;top:228;left:294;}"> <img src="images/topbg2.gif" border="0" /> </div> thanks __________________ --= ] r i c a r d o [ =--

04-22-2008, 11:25 PM	#2 (permalink)
Jaxo Design Team Member Join Date: Feb 2008 Location: Deming, NM Posts: 256 OS: XP SP2 & Vista	Re: need some html help Sorry el_ricardo I am not sure what your question is. Could you try again please? It is also very helpful to include a link or the code for your site in your post. Hopefully we can help you out. __________________ Help TSF Fight Cancer! Web Developer Tools: Firebug for Firefox \| IE Developer Toolbar \| Run multiple versions of IE

04-23-2008, 10:54 PM	#4 (permalink)
Jaxo Design Team Member Join Date: Feb 2008 Location: Deming, NM Posts: 256 OS: XP SP2 & Vista	Re: need some html help el_ricardo, Sorry if I have missed it, but you have not described what your issue is. Do you happen to have the page online so we can look at it in a browser or a screen shot if not? We will get this figured out. Thanks for posting the code though. __________________ Help TSF Fight Cancer! Web Developer Tools: Firebug for Firefox \| IE Developer Toolbar \| Run multiple versions of IE

04-24-2008, 09:53 PM	#7 (permalink)
Redcore Design Team Member Join Date: Aug 2007 Location: Jamestown, CA Posts: 478 OS: WinXP My System	Re: need some html help I wouldn't mind us helping him...he MADE the site, just needs a nudge in the right direction. __________________ Free Resources PC Protection - Comodo Firewall \| AVG Anti-Virus \| WinPatrol \| Ad-Aware \| Spybot S&D \| SpywareBlaster \| Web Design/Programming - KompoZer (Editor) \| Paint.NET (Graphic) \| GIMP+GIMPShop (Graphic) \| FileZilla (FTP Client) \| Free Hosting \|

04-25-2008, 07:59 AM	#8 (permalink)
el_ricardo Registered User Join Date: Jun 2005 Location: wakefield, UK Posts: 68 OS: WinXP pro sp3, Vista sp1, Ubuntu 8.04, OpenSuse	Re: need some html help oh come on, might i add that the choice to build a website was completely my own, as webdesign is a completely unrelated subject to the project that i'm working on (a print project, as in traditional printing techniques) I'm only building this site so i can better present the project in context, a website wasn't even included in the brief! I really need some help with this though, i really can't get my head round it, and my deadline for this project is next week! __________________ --= ] r i c a r d o [ =--

04-25-2008, 10:30 AM	#9 (permalink)
Jaxo Design Team Member Join Date: Feb 2008 Location: Deming, NM Posts: 256 OS: XP SP2 & Vista	Re: need some html help Sounds like it's within our powers to help. I would love to see your site in a browser so I can have a go at it. Private message sent to you! __________________ Help TSF Fight Cancer! Web Developer Tools: Firebug for Firefox \| IE Developer Toolbar \| Run multiple versions of IE

04-26-2008, 12:26 AM	#11 (permalink)
Jaxo Design Team Member Join Date: Feb 2008 Location: Deming, NM Posts: 256 OS: XP SP2 & Vista	Re: need some html help Try this out. It's not pretty but it will move the image back over to the left. Find this code: Code: <div> style="{top:182px;left:163px;position:relative;z-index:2;}"> <img src="images/topbg.png" border="0" /> </div> Try and see if this works: Code: <div style="{top: 225px; left: 425px; position: absolute; z-index: 2;}"> <img border="0" src="images/topbg.png" /> </div> This will allow you to adjust the top px and left px to put the image in the right place using poition:absolute;. Hope that helps! Let me know if there was something else that you needed help with. __________________ Help TSF Fight Cancer! Web Developer Tools: Firebug for Firefox \| IE Developer Toolbar \| Run multiple versions of IE

04-29-2008, 12:41 AM	#12 (permalink)
Jaxo Design Team Member Join Date: Feb 2008 Location: Deming, NM Posts: 256 OS: XP SP2 & Vista	Re: need some html help Any luck getting the site figured out? __________________ Help TSF Fight Cancer! Web Developer Tools: Firebug for Firefox \| IE Developer Toolbar \| Run multiple versions of IE

05-05-2008, 12:51 AM	#13 (permalink)
el_ricardo Registered User Join Date: Jun 2005 Location: wakefield, UK Posts: 68 OS: WinXP pro sp3, Vista sp1, Ubuntu 8.04, OpenSuse	Re: need some html help yeah, botched it together in the end with an onscreen ruler so it just displays correctly on my laptop's display, thanks a lot guys, and sorry for the late reply, been busy __________________ --= ] r i c a r d o [ =--

05-05-2008, 10:18 AM	#14 (permalink)
Jaxo Design Team Member Join Date: Feb 2008 Location: Deming, NM Posts: 256 OS: XP SP2 & Vista	Re: need some html help Good luck with your presentation! Unless you already presented, then how did it go? __________________ Help TSF Fight Cancer! Web Developer Tools: Firebug for Firefox \| IE Developer Toolbar \| Run multiple versions of IE