PDA

View Full Version : Text over a div image


oneeightleft
08-10-2011, 06:06 PM
Ok I've watched all the youtube tutorials, I've read all of the websites... nothing will solve the prob I'm having


I made a simple background in photoshop... basically just suppose to look like a piece of paper and I'll put content in the "text-holder"

my background for the "body" div is not showing up... the plan is to have image_02.jpg repeat as I enter content into the "text-holder"

#wrapper {
width: 1000px;
}

#content {
background-image: url(images/index_02.jpg);
background-repeat: repeat-x;
background-position:center
width: 1000px;
height: 520;
}

#text-holder {
width: 1000px;
}




<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<center>
<body bgcolor="#ACACAC" leftmargin="0" topmargin="50" marginwidth="0" marginheight="0">


<div id="wrapper">

<table id="Table_01" width="1000" height="193" border="0" cellpadding="0" cellspacing="0">

<div id="header">

<tr>
<td>
<img src="images/header.jpg" width="1000" height="70" alt=""></td>
</tr>
</div>

<div id="content">
<div id="text-holder">
<tr>
<td>

</td>
</tr>
</div>
</div>

<div id="footer">
<tr>
<td>
<img src="images/footer.jpg" width="1000" height="71" alt=""></td>
</tr>
</div>
</table>





</div>

</body>

</center>
</html>


this should be extremely simple for a beginner like me, but it's not working

DWcourse
08-10-2011, 06:39 PM
Whoa!

You need to learn some basics first. Your code makes no sense. You're mixing divs and table parts almost t random.

Before you worry about backgrounds etc., you need to get the basics of HTML and CSS down.

1. You shouldn't be using tables for layout.

2. You can have a div in a table cell <td> or an entire table in a div but you can't have divs inside tables that contain part of the table. In other words you can't wrap a div around a table cell ,td> or row <tr>

oneeightleft
08-10-2011, 06:43 PM
ok, i just used the index file that was produced by the photoshop file.

I took the table elements out and now I have no images except for a header image.

<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<center>
<body bgcolor="#ACACAC" leftmargin="0" topmargin="50" marginwidth="0" marginheight="0">


<div id="wrapper">



<div id="header">

<img src="images/capstone.png" width="1000" height="50"></div>

<div id="content">



<p>&nbsp;</p>










</div>

<div id="footer">

</div>






</div>

</body>

</center>
</html>


technically I should be able to add in the images to the divs I have correct?

DWcourse
08-11-2011, 03:26 AM
technically I should be able to add in the images to the divs I have correct?

Technically, yes.