• Help
  • Search
  • Login
  • Register
  • Home

Forum: web design and graphics community

Celestial Star Forum > General > Support / Suggestions > Table Tutorial Gone Wrong!!
Pages: [1]
« previous next »
  Print  
Author Topic: Table Tutorial Gone Wrong!!  (Read 1261 times)
stephen
Incubus
**
Posts: 57



View Profile
Table Tutorial Gone Wrong!!
« on: November 17, 2007, 06:54:05 PM »
So i've read the tutorial on celestial star about coding a table layout, everything is going fine until i get to the part that says,

<TD>  <IMG SRC="images/yourfile_slice#.jpg" WIDTH=XXX HEIGHT=YYY ALT=""></TD>

With this:
<td width="XXX" style="background: url(yourfile_slice#.jpg) no-repeat;"> Your content here</TD>

I do that and i get
<td width="360" style="background: url ("images/Nice-And-New._05.jpg") no-repeat;">  Your content here</TD>

but when i double click on my .html file it comes up like this!!



What is the problem?
Logged
Blackstone
Administrator
Valkyrie Randgris
*****
Posts: 821

Oh look! People!


View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #1 on: November 17, 2007, 09:08:06 PM »
Double check to make sure that the name of your image is correct. I think that may be your problem. Try replacing Nice-And-New._05.jpg with Nice-And-New_05.jpg. You might have an extra period in there.
Logged
stephen
Incubus
**
Posts: 57



View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #2 on: November 18, 2007, 08:08:28 AM »
Nope, tried everything, still ain't working.
Logged
Blackstone
Administrator
Valkyrie Randgris
*****
Posts: 821

Oh look! People!


View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #3 on: November 18, 2007, 09:13:39 AM »
Your problem is that the background isn't showing up in the content box, correct? Would you be able to post your full code here, that way I can see if there is something else going on that is causing the background to disappear?
Logged
stephen
Incubus
**
Posts: 57



View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #4 on: November 18, 2007, 10:44:06 AM »
<HTML>
<HEAD>
<TITLE>Untitled-1</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>
<!-- ImageReady Slices (Untitled-1) -->
<TABLE WIDTH=700 BORDER=0 CELLPADDING=0 CELLSPACING=0>
   <TR>
      <TD COLSPAN=5>
         <IMG SRC="images/Nice-And-New._01.jpg" WIDTH=700 HEIGHT=56 ALT=""></TD>
   </TR>
   <TR>
      <TD ROWSPAN=7>
         <IMG SRC="images/Nice-And-New._02.jpg" WIDTH=162 HEIGHT=544 ALT=""></TD>
      <TD>
         <IMG SRC="images/Nice-And-New._03.jpg" WIDTH=77 HEIGHT=41 ALT=""></TD>
      <TD ROWSPAN=7>
         <IMG SRC="images/Nice-And-New._04.jpg" WIDTH=79 HEIGHT=544 ALT=""></TD>

      <TD width="360" style="background: url ("images/Nice-And-New._05.jpg") no-repeat;">  Your content here</TD>

      <TD ROWSPAN=7>
         <IMG SRC="images/Nice-And-New._06.jpg" WIDTH=22 HEIGHT=544 ALT=""></TD>
   </TR>
   <TR>
      <TD>
         <IMG SRC="images/Nice-And-New._07.jpg" WIDTH=77 HEIGHT=40 ALT=""></TD>
   </TR>
   <TR>
      <TD>
         <IMG SRC="images/Nice-And-New._08.jpg" WIDTH=77 HEIGHT=41 ALT=""></TD>
   </TR>
   <TR>
      <TD>
         <IMG SRC="images/Nice-And-New._09.jpg" WIDTH=77 HEIGHT=40 ALT=""></TD>
   </TR>
   <TR>
      <TD>
         <IMG SRC="images/Nice-And-New._10.jpg" WIDTH=77 HEIGHT=41 ALT=""></TD>
   </TR>
   <TR>
      <TD>
         <IMG SRC="images/Nice-And-New._11.jpg" WIDTH=77 HEIGHT=40 ALT=""></TD>
   </TR>
   <TR>
      <TD>
         <IMG SRC="images/Nice-And-New._12.jpg" WIDTH=77 HEIGHT=301 ALT=""></TD>
   </TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>








body {
margin: 0px;
padding: 0px;
background: url('background.jpg') repeat-y;
position: absolute;
background-color: #FFFFFF;
font-size: 11px;
color: #000;
font-family: geogria, verdana, arial, sans-serif;
}

#layout {
width: 700px;
height: 600px;
background: url('layout.png') no-repeat;
position: center;
top: 0px;
left: 0px;
}

#content {
position: center;
width: 260px;
top: 220px;
left: 531px;
}

#navigation {
position: "center";
width: 140px;
top: 220px;
left: 405px;
}

h1 {
color: #D3788A;
font-size: 16px;
}

a {
color: #ffffff;
}

a:hover {
text-decoration: overline;
   font-family: handy;
   font-size: 8pt;
   line-height: 10pt;
   color: 000000;
   background-color: #A4E495;
   cursor: crosshair;
   display: block;
        text-align:center;
   text-transform: uppercase;
}
Logged
stephen
Incubus
**
Posts: 57



View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #5 on: November 18, 2007, 10:45:20 AM »
Btw the second code is my css , i dont think that was needed, but... just in case.
Logged
Blackstone
Administrator
Valkyrie Randgris
*****
Posts: 821

Oh look! People!


View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #6 on: November 18, 2007, 10:50:11 AM »
Ahh, I think I've found the problem. You can't have any quotes in the style tag in your HTML. In this code:

Code:
<td width="360" style="background: url ("images/Nice-And-New._05.jpg") no-repeat;">

Take the quotes out of the background: url() bit. So it would end up like this:

Code:
<td width="360" style="background: url(images/Nice-And-New._05.jpg) no-repeat;">

That should do it for you.
Logged
stephen
Incubus
**
Posts: 57



View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #7 on: November 18, 2007, 11:18:17 AM »
Nope, still stayed the same, i also tried to take the brackets out.. etc. etc. but no.
Logged
Blackstone
Administrator
Valkyrie Randgris
*****
Posts: 821

Oh look! People!


View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #8 on: November 18, 2007, 11:55:29 AM »
Okay, check your CSS, then. You have two places where you add a background image. Make sure those urls are correct. The images in your HTML are in an "images" folder, but the images in your CSS aren't. Make sure that you are referencing the right spot in your CSS.

If that doesn't help, then I don't know what is going on. As long as you've taken out those quotes that I mentioned in my last post, there is nothing wrong with the syntax of your files. The only thing it can be is that you typed the name of the file wrong by accident.
Logged
stephen
Incubus
**
Posts: 57



View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #9 on: November 18, 2007, 02:42:25 PM »
body {
margin: 0px;
padding: 0px;
background: url('Nice-And-New._05.jpg') repeat-y;
position: absolute;
background-color: #FFFFFF;
font-size: 11px;
color: #000;
font-family: geogria, verdana, arial, sans-serif;
}

#layout {
width: 700px;
height: 600px;
background: url('Nice-And-New._05.jpg') no-repeat;
position: center;
top: 0px;
left: 0px;
}

#content {
position: center;
width: 260px;
top: 220px;
left: 531px;
}

#navigation {
position: "center";
width: 140px;
top: 220px;
left: 405px;
}

h1 {
color: #D3788A;
font-size: 16px;
}

a {
color: #ffffff;
}

a:hover {
text-decoration: overline;
   font-family: handy;
   font-size: 8pt;
   line-height: 10pt;
   color: 000000;
   background-color: #A4E495;
   cursor: crosshair;
   display: block;
        text-align:center;
   text-transform: uppercase;
}

Thats my new style.css !!  Is it still wrong?
Logged
Blackstone
Administrator
Valkyrie Randgris
*****
Posts: 821

Oh look! People!


View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #10 on: November 18, 2007, 03:32:10 PM »
Well, first of all, you don't need any quotes in CSS whatsoever, in background or in anything else (you have double-quotes in one of your positionings. Otherwise, there is nothing wrong with the syntax. I can't tell if your image names are right or not, because I don't know what they actually are. Do you have this uploaded to the Internet somewhere? It might be easier for me to help you out that way.
Logged
stephen
Incubus
**
Posts: 57



View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #11 on: November 19, 2007, 11:25:53 AM »
Ill upload them to a freewebs account later today!

The style.css / index.html and the images.
And you can tell me whats wrong
K?
Logged
Blackstone
Administrator
Valkyrie Randgris
*****
Posts: 821

Oh look! People!


View Profile
Re: Table Tutorial Gone Wrong!!
« Reply #12 on: November 19, 2007, 07:32:57 PM »
Alright, just give me the URL once you've done so. ^^
Logged
katie-kate
Incubus
**
Posts: 74



View Profile WWW
Re: Table Tutorial Gone Wrong!!
« Reply #13 on: April 25, 2008, 10:35:48 PM »
This appears to be an abandonded topic, but I think the problem is that instead of background: url("IMAGE NAME.JPG") or background: url(IMAGE NAME.JPG), you should use single quotes around the image name--background('IMAGE NAME.JPG'). That's how I've always coded it, and I've never had a problem with images not showing up and it still validates, if you're someone who worries about validation.
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

  • Welcome, Guest
  • Members login
  • Register for free

General

  • General
  • New members
  • Announcements
  • Support / Suggestions

Art boards

  • Creative mediums
  • Requests and offers
  • Tutorials
  • Celestial Star tutorials

Web development

  • Coding
  • Web design
  • Advertisements / affiliation

Off-topic

  • The non-sense
  • Ententainment
Go up
eXTReMe Tracker
  • Valid XHTML
  • Valid CSS
Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC | Seo4Smf v0.2 © Webmaster's Talks
Loading...