...

View Full Version : Tables/CSS



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 =\

twodayslate
06-06-2007, 08:28 PM
What is usually do to put text on an image is
1. Position the text to be on top of the image
2. make the image a background image

edit:// Just looked at the images (they look nice), I would use divs. and make the images background images.

Brotherhood313
06-06-2007, 09:28 PM
Thats what I have been trying to do, I cant get it to work since the tables are set up like this.
I put for example instead of

<img src="images/header.png" width="365" height="90" alt="">

I would put:

<div id="header">Test</div>

And because of the tables I believe, it just doesnt want to work for me. I cant figure it out.

twodayslate
06-06-2007, 09:43 PM
<div style="background: url(URL OF IMAGE);">TEXT HERE</div>

That is what you want correct?

edit:// If that is not what you want you can do the same thing with the table

<td style="background: url(URL OF IMAGE);">TEXT HERE</td>

Brotherhood313
06-06-2007, 09:48 PM
Perfect. Thank you so much :)

This problem has been solved. Feel free to close.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum