[HTML] TD background problems!
Hi! I'm pretty newbie at programming in HTML!
But i would just want to make a easy homepage so what i've done is an easy start.
This is also my site right now
http://www.freewebs.com/test32000
As you can see all is pictures expect the one there i got the blue text! Its a TD background!
Also that is succefull!
But the problem is that the big black box under the background is a picture ATM!
AND IF i will try make it to a td background, it will only make a hole in the middle and the text and the box will go in right of the layout!
(hard to explain, but it goes really wrong there)
Also, here's the source code right now..
Code:
<html>
<head>
<title>DragonHealer's HomePage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<center>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Layout Dragon2.psd) -->
<table id="Table_01" width="800" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="DragonHealed---LAYOUT_01.gif" width="800" height="175" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="DragonHealed---LAYOUT_02.gif" width="95" height="325" alt=""></td>
<td>
<img src="DragonHealed---LAYOUT_03.gif" width="137" height="36" alt=""></td>
<td background="DragonHealed---LAYOUT_04.gif" width="318" height="36"><center><Font color="Blue">Text</Font></center></td>
<td>
<img src="DragonHealed---LAYOUT_05.gif" width="133" height="36" alt=""></td>
<td rowspan="2">
<img src="DragonHealed---LAYOUT_06.gif" width="117" height="325" alt=""></td>
</tr>
<td colspan="3">
<img src="DragonHealed---LAYOUT_07.gif" width="588" height="289"></td>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Also, the picture i need to make to a background is the LAYOUT_07 picture!
As u see it says td colspan over it.. whats that!? :S
And also, can someone write me the whole code and tell me what was going wrong.
Re: [HTML] TD background problems!
Code:
<td colspan="3">
</td>
Is how many columns you want it to expand over in this case 3 columns.
The background code would be:
Code:
background-image:url("../images/image.ext");
Replace "image.ext" with the image file name.
Edit: It would be easier to create the site layout using css rather than table. If the above is just for a splash disregard this statement.
Re: [HTML] TD background problems!
Quote:
Originally Posted by Nightwalker83
Code:
<td colspan="3">
</td>
Is how many columns you want it to expand over in this case 3 columns.
The background code would be:
Code:
background-image:url("../images/image.ext");
Replace "image.ext" with the image file name.
Edit: It would be easier to create the site layout using css rather than table. If the above is just for a splash disregard this statement.
And were do i put my text!? :ehh:
And also.. It is any generator or something i can get the HTML codes to CSS codes? Or can i do it to CSS code in PhotoShop (there i made the HTML). ?!?
[EDIT]
Well i putted in the code
background-image:url("DragonHealed---LAYOUT_07.gif");
Instead of the other i had.
I was try type after the ; in the end but it didn't work at all.. Also the whole site was like, crash again or what to say.
Also i tried take away the colspan too but it didn't work either.
Watch the siteeee
http://www.freewebs.com/test32000
Re: [HTML] TD background problems!
Use this code as an example:
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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arachnoid Web Services" />
<meta name="description" content="Three Flea Circus" />
<meta name="keywords" content="Three Flea, Clowns, Children, Kids, Entertainment" />
<title>Three Flea Circus - Home</title>
<!--Replace three_flea_style.css with th name of the style sheet use want to use. -->
<link rel="stylesheet" type="text/css" href="../css/three_flea_style.css" />
</head>
<body background = "../images/back_ground.jpg">
<div id="container">
<div id="banner"><img src="../images/tfc_banner.jpg" /></div>
<div id="navigation">
<img src="../images/clown.jpg" alt="Clown" />
<p>Home</p>
<img src="../images/clown.jpg" alt="Clown" />
<p>Events</p>
<img src="../images/clown.jpg" alt="Clown" />
<p>Pictures</p>
<img src="../images/clown.jpg" alt="Clown" />
<p>The Group</p>
<img src="../images/clown.jpg" alt="Clown" />
<p>Book a Show</p>
<img src="../images/clown.jpg" alt="Clown" />
</div>
<div id="main">
<p class = "first">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
</p>
<hr />
</div>
<div id="bottomnav">Home | Events | Pictures</div>
</div>
</body>
</html>
This is the css file:
Code:
body {
background-color: #9933FF;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt; color: #FF0066;
}
p {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
p.first:first-letter {font-size: 14pt; font-style: italic;}
a:link {color: #FFFFFF;}
a:visited {color: #FFFFFF;}
a:hover {color: #FFFFFF; background: #0033FF; text-decoration: none;}
a:active {color: #9933FF; background: #0033FF; text-decoration: none;}
h2 {text-align: center; color:#006400; font-size: 20pt}
h5 {text-align: center; color: #9933FF; font-size: 18pt}
#container
{
width: 1024px;
}
#banner
{
height:120px;
text-align: center;
}
#navigation
{
background-color: #FF0066;
color:#DDDDDD;
float: left;
text-align: center;
}
#main
{
margin-left: 15px;
}
#bottomnav
{
text-align: center;
}
Modify any or all of that code for what you need.
Edit:
This is how I did the splash page for one of my school assignments:
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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arachnoid Web Services" />
<meta name="description" content="Joe's online Fruit and Vegetable shop" />
<meta name="keywords" content="Fruit, Vegetables, Veg" />
<title>Joe's Fruit and Vegetables</title>
<link rel="stylesheet" type="text/css" href="./css/joe's style.css" />
</head>
<body>
<div id="main">
<div align="center">
<table width="620" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="images/splash_01.jpg" width="620" height="55" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/spacer.gif" width="1" height="55" alt="Joe's Fruit and Vegetables" /></td>
</tr>
<tr>
<td>
<img src="images/splash_02.jpg" width="139" height="88" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/splash_03.jpg" width="107" height="88" alt="Joe's Fruit and Vegetables" /></td>
<td rowspan="4"> <a href="html/home.html" title="Joe's Fruit and Vegetables" ><img src="images/splash_04.jpg" alt="Joe's Fruit and Vegetables" width="186" height="328" border="0" /></a></td>
<td rowspan="3">
<img src="images/splash_05.jpg" width="188" height="203" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/spacer.gif" width="1" height="88" alt="Joe's Fruit and Vegetables" /></td>
</tr>
<tr>
<td>
<img src="images/splash_06.jpg" width="139" height="103" alt="Joe's Fruit and Vegetables" /></td>
<td rowspan="4"> <a href="html/home.html" title="Joe's Fruit and Vegetables"><img src="images/splash_07.jpg" alt="Joe's Fruit and Vegetables" width="107" height="317" border="0" /></a></td>
<td>
<img src="images/spacer.gif" width="1" height="103" alt="Joe's Fruit and Vegetables" /></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/splash_08.jpg" width="139" height="214" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt="Joe's Fruit and Vegetables" /></td>
</tr>
<tr>
<td>
<img src="images/splash_09.jpg" width="188" height="125" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/spacer.gif" width="1" height="125" alt="Joe's Fruit and Vegetables" /></td>
</tr>
<tr>
<td>
<img src="images/splash_10.jpg" width="186" height="77" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/splash_11.jpg" width="188" height="77" alt="Joe's Fruit and Vegetables" /></td>
<td> <img src="images/spacer.gif" width="1" height="77" alt="Joe's Fruit and Vegetables" /></td>
</tr></table>
<object idid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="75" height="25" align="middle">
<param name="SRC" value="media/enterButton.swf"><param name="LOOP" value="false"><param name="PLAY" value="false">
<param name="movie" value="media/enterButton.swf" />
<param name="quality" value="high" />
<embed src="media/enterButton.swf" width="75" height="25" loop="false" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" play="false"></embed></object>
<embed src="media/joes_tune.mov" width="32" height="32" hidden="true" autostart="true" loop="true" align="middle"></embed>
<p id="first" align="left">Joe's Fruit and Vegetables is an online that supermarket allows you
to do your grocery shopping from home.</p>
</div>
</div>
</body>
</html>
CSS:
Code:
body {
background-color: #66FFCC;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
p {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
ul {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
table {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
form {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
.bold {font-weight: bold}
p.first:first-letter {font-size: 14pt; font-style: italic;}
a:link {color: #006400;}
a:visited {color: #32CD32;}
a:hover {color: #FFFFFF; background: #006400; text-decoration: none;}
a:active {color: #FF0066; background: #006400; text-decoration: none;}
h2 {text-align: center; color:#006400; font-size: 12pt}
#container
{
width: 1024px;
}
#banner
{
height:42px;
}
#navigation
{
float: left;
text-align: center;
width: auto;
}
#main
{
margin-left: 130px;
}
Re: [HTML] TD background problems!
Quote:
Originally Posted by Nightwalker83
Use this code as an example:
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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arachnoid Web Services" />
<meta name="description" content="Three Flea Circus" />
<meta name="keywords" content="Three Flea, Clowns, Children, Kids, Entertainment" />
<title>Three Flea Circus - Home</title>
<!--Replace three_flea_style.css with th name of the style sheet use want to use. -->
<link rel="stylesheet" type="text/css" href="../css/three_flea_style.css" />
</head>
<body background = "../images/back_ground.jpg">
<div id="container">
<div id="banner"><img src="../images/tfc_banner.jpg" /></div>
<div id="navigation">
<img src="../images/clown.jpg" alt="Clown" />
<p>Home</p>
<img src="../images/clown.jpg" alt="Clown" />
<p>Events</p>
<img src="../images/clown.jpg" alt="Clown" />
<p>Pictures</p>
<img src="../images/clown.jpg" alt="Clown" />
<p>The Group</p>
<img src="../images/clown.jpg" alt="Clown" />
<p>Book a Show</p>
<img src="../images/clown.jpg" alt="Clown" />
</div>
<div id="main">
<p class = "first">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
</p>
<hr />
</div>
<div id="bottomnav">Home | Events | Pictures</div>
</div>
</body>
</html>
This is the css file:
Code:
body {
background-color: #9933FF;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt; color: #FF0066;
}
p {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
p.first:first-letter {font-size: 14pt; font-style: italic;}
a:link {color: #FFFFFF;}
a:visited {color: #FFFFFF;}
a:hover {color: #FFFFFF; background: #0033FF; text-decoration: none;}
a:active {color: #9933FF; background: #0033FF; text-decoration: none;}
h2 {text-align: center; color:#006400; font-size: 20pt}
h5 {text-align: center; color: #9933FF; font-size: 18pt}
#container
{
width: 1024px;
}
#banner
{
height:120px;
text-align: center;
}
#navigation
{
background-color: #FF0066;
color:#DDDDDD;
float: left;
text-align: center;
}
#main
{
margin-left: 15px;
}
#bottomnav
{
text-align: center;
}
Modify any or all of that code for what you need.
Edit:
This is how I did the splash page for one of my school assignments:
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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arachnoid Web Services" />
<meta name="description" content="Joe's online Fruit and Vegetable shop" />
<meta name="keywords" content="Fruit, Vegetables, Veg" />
<title>Joe's Fruit and Vegetables</title>
<link rel="stylesheet" type="text/css" href="./css/joe's style.css" />
</head>
<body>
<div id="main">
<div align="center">
<table width="620" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="images/splash_01.jpg" width="620" height="55" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/spacer.gif" width="1" height="55" alt="Joe's Fruit and Vegetables" /></td>
</tr>
<tr>
<td>
<img src="images/splash_02.jpg" width="139" height="88" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/splash_03.jpg" width="107" height="88" alt="Joe's Fruit and Vegetables" /></td>
<td rowspan="4"> <a href="html/home.html" title="Joe's Fruit and Vegetables" ><img src="images/splash_04.jpg" alt="Joe's Fruit and Vegetables" width="186" height="328" border="0" /></a></td>
<td rowspan="3">
<img src="images/splash_05.jpg" width="188" height="203" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/spacer.gif" width="1" height="88" alt="Joe's Fruit and Vegetables" /></td>
</tr>
<tr>
<td>
<img src="images/splash_06.jpg" width="139" height="103" alt="Joe's Fruit and Vegetables" /></td>
<td rowspan="4"> <a href="html/home.html" title="Joe's Fruit and Vegetables"><img src="images/splash_07.jpg" alt="Joe's Fruit and Vegetables" width="107" height="317" border="0" /></a></td>
<td>
<img src="images/spacer.gif" width="1" height="103" alt="Joe's Fruit and Vegetables" /></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/splash_08.jpg" width="139" height="214" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt="Joe's Fruit and Vegetables" /></td>
</tr>
<tr>
<td>
<img src="images/splash_09.jpg" width="188" height="125" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/spacer.gif" width="1" height="125" alt="Joe's Fruit and Vegetables" /></td>
</tr>
<tr>
<td>
<img src="images/splash_10.jpg" width="186" height="77" alt="Joe's Fruit and Vegetables" /></td>
<td>
<img src="images/splash_11.jpg" width="188" height="77" alt="Joe's Fruit and Vegetables" /></td>
<td> <img src="images/spacer.gif" width="1" height="77" alt="Joe's Fruit and Vegetables" /></td>
</tr></table>
<object idid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="75" height="25" align="middle">
<param name="SRC" value="media/enterButton.swf"><param name="LOOP" value="false"><param name="PLAY" value="false">
<param name="movie" value="media/enterButton.swf" />
<param name="quality" value="high" />
<embed src="media/enterButton.swf" width="75" height="25" loop="false" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" play="false"></embed></object>
<embed src="media/joes_tune.mov" width="32" height="32" hidden="true" autostart="true" loop="true" align="middle"></embed>
<p id="first" align="left">Joe's Fruit and Vegetables is an online that supermarket allows you
to do your grocery shopping from home.</p>
</div>
</div>
</body>
</html>
CSS:
Code:
body {
background-color: #66FFCC;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
p {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
ul {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
table {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
form {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
.bold {font-weight: bold}
p.first:first-letter {font-size: 14pt; font-style: italic;}
a:link {color: #006400;}
a:visited {color: #32CD32;}
a:hover {color: #FFFFFF; background: #006400; text-decoration: none;}
a:active {color: #FF0066; background: #006400; text-decoration: none;}
h2 {text-align: center; color:#006400; font-size: 12pt}
#container
{
width: 1024px;
}
#banner
{
height:42px;
}
#navigation
{
float: left;
text-align: center;
width: auto;
}
#main
{
margin-left: 130px;
}
Dude that didn't help me at all.
I tried the first code and put my pictures links instead of the clown one..
Bur it didn't even show the pics etc.
Can you not only do my code but the working one with CSS then?
Re: [HTML] TD background problems!
Quote:
Originally Posted by MyRealName
Dude that didn't help me at all.
Sorry, I found your posts a bit hard to understand.
Quote:
Can you not only do my code but the working one with CSS then?
Do you want me to create a splash page using your images with css? I'll see what I can do.
Edit:
Try putting:
Code:
body {
background-image:url("DragonHealed---LAYOUT_07.gif");
}
In the css file.
Edit:
Could you upload or email me images in a zip file and I'll try and look at this tomorrow! :)
