Brotherhood313
06-06-2007, 07:51 PM
Pretty much I have tried a lot of different things to get this to work but nothing seems to be happening.
I want to have simple Text/Links on top of an image. Normally this would be easy but for some reason its just not working for me.
There is some extra code that is not needed in both of these im sure. This is due to me messing around trying to get it to work. As I said, I honestly cant figure it out.
Any help is greatly appreciated.
HTML:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="thebrotherhood313@gmail.com" />
<title>Portfolio</title>
<style type="text/css" media="screen" title="Main Stylesheet">@import "style.css";</style>
</head>
<body>
<center><table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="800" height="135" colspan="6">
<img src="images/spacer.gif" width="800" height="135" alt=""></td>
</tr>
<tr>
<td width="135" height="465" rowspan="5">
<img src="images/spacer.gif" width="135" height="465" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/header.png" width="365" height="90" alt=""></td>
<td>
<img src="images/logo.png" width="165" height="89" alt=""></td>
<td width="135" height="465" rowspan="5">
<img src="images/spacer.gif" width="135" height="465" alt=""></td>
</tr>
<tr>
<td>
<img src="images/portfolio_06.png" width="165" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/content.png" width="340" height="225" alt=""></td>
<td>
<img src="images/portfolio_08.png" width="1" height="225" alt=""></td>
<td colspan="2">
<img src="images/bottom-right.jpg" width="189" height="225" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/footer.png" width="530" height="13" alt=""></td>
</tr>
<tr>
<td width="530" height="137" colspan="4">
<img src="images/spacer.gif" width="530" height="137" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="135" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="340" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="165" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="135" height="1" alt=""></td>
</tr>
</table></center>
</body>
</html>
CSS:
body {
background: url(images/background.jpg) repeat-x;
text-align: center;
margin: 0px auto;
font-family: arial;
font-size: 11px;
}
#container {
width: 530px;
margin: 0px auto;
text-align: left;
padding: 135px;
#header {
width: 365px;
background: url(images/header.png)
height: 90px;
padding: 0px;
}
#header .header {
background-image: url(images/header.png);
width: 365px;
height: 90px;
color: #FFF
}
#header a {
font-size: 20px;
font-family: arial;
color: #000;
text-decoration: none;
}
#header a:hover {
text-decoration: underline;
}
#content {
width: 530px;
background-color: #FFF;
float: center;
margin: 0px auto;
}
#content .header {
background-color: #FFF;
width: 325px;
padding-left: 10px;
color: #000;
}
#content .text {
background-color: #FFF;
width: 325px;
padding-left: 40px;
color: #bfbfbf;
}
#footer {
width: 544px;
background: url(images/footer-bg.jpg) repeat-x;
height: 15px;
padding: 5px;
margin-top: 5px;
color: #bfbfbf;
font-size: 10px;
}
.end {
clear: both;
}
Right now the background and "content" box are fine. I just need to get text on top of those without the boxes being spread all of the screen.
Image files are attached. I dont have a test website, I am doing this off of my computer.
Edit: And if I have to use CSS to move the images around on the page, thats fine. Its just that I couldnt get that working either so I switched to tables. Which apparently arent working either =\
I want to have simple Text/Links on top of an image. Normally this would be easy but for some reason its just not working for me.
There is some extra code that is not needed in both of these im sure. This is due to me messing around trying to get it to work. As I said, I honestly cant figure it out.
Any help is greatly appreciated.
HTML:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="thebrotherhood313@gmail.com" />
<title>Portfolio</title>
<style type="text/css" media="screen" title="Main Stylesheet">@import "style.css";</style>
</head>
<body>
<center><table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="800" height="135" colspan="6">
<img src="images/spacer.gif" width="800" height="135" alt=""></td>
</tr>
<tr>
<td width="135" height="465" rowspan="5">
<img src="images/spacer.gif" width="135" height="465" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/header.png" width="365" height="90" alt=""></td>
<td>
<img src="images/logo.png" width="165" height="89" alt=""></td>
<td width="135" height="465" rowspan="5">
<img src="images/spacer.gif" width="135" height="465" alt=""></td>
</tr>
<tr>
<td>
<img src="images/portfolio_06.png" width="165" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/content.png" width="340" height="225" alt=""></td>
<td>
<img src="images/portfolio_08.png" width="1" height="225" alt=""></td>
<td colspan="2">
<img src="images/bottom-right.jpg" width="189" height="225" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/footer.png" width="530" height="13" alt=""></td>
</tr>
<tr>
<td width="530" height="137" colspan="4">
<img src="images/spacer.gif" width="530" height="137" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="135" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="340" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="165" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="135" height="1" alt=""></td>
</tr>
</table></center>
</body>
</html>
CSS:
body {
background: url(images/background.jpg) repeat-x;
text-align: center;
margin: 0px auto;
font-family: arial;
font-size: 11px;
}
#container {
width: 530px;
margin: 0px auto;
text-align: left;
padding: 135px;
#header {
width: 365px;
background: url(images/header.png)
height: 90px;
padding: 0px;
}
#header .header {
background-image: url(images/header.png);
width: 365px;
height: 90px;
color: #FFF
}
#header a {
font-size: 20px;
font-family: arial;
color: #000;
text-decoration: none;
}
#header a:hover {
text-decoration: underline;
}
#content {
width: 530px;
background-color: #FFF;
float: center;
margin: 0px auto;
}
#content .header {
background-color: #FFF;
width: 325px;
padding-left: 10px;
color: #000;
}
#content .text {
background-color: #FFF;
width: 325px;
padding-left: 40px;
color: #bfbfbf;
}
#footer {
width: 544px;
background: url(images/footer-bg.jpg) repeat-x;
height: 15px;
padding: 5px;
margin-top: 5px;
color: #bfbfbf;
font-size: 10px;
}
.end {
clear: both;
}
Right now the background and "content" box are fine. I just need to get text on top of those without the boxes being spread all of the screen.
Image files are attached. I dont have a test website, I am doing this off of my computer.
Edit: And if I have to use CSS to move the images around on the page, thats fine. Its just that I couldnt get that working either so I switched to tables. Which apparently arent working either =\