Forum Moderators: not2easy
I have been trying to learn and understand CSS but in the meantime, I have a project that needs to get done and I'm having a couple of problems.
I'm hoping someone can tell me if what I want to do is possible with CSS so I can finish this little project while I continue to learn CSS.
I need to place some text over some background images but I've run into 2 problems:
1) positioning and
2) differences in display between Netscape and MSIE
I want to place text over both the top and bottom of the picture frame border. If I get the top positioned correctly in MSIE, it doesn't position properly in Netscape. I have had no success is positioning the text at the bottom in either browser. Also, in both browsers, there is an unwanted space at the very top of the browser window as well as the text pushing down the bottom of the picture frame.
Following is the code I'm using:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html><head>
<STYLE TYPE="text/css">
<!--
div.hyp1 {position: relative;
top: 85px;
left: 1px;
font: bold 26pt Amazone BT;
color: #d0a040}
div.hyp2 {position: relative;
top: 20px;
left: 1px;
font: 14pt Amazone BT;
color: #d0a040;}
-->
</STYLE>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">
<table width="470" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="470" align="center">
<table width="470" cellpadding="0" cellspacing="0" border="0" align="center">
</tr>
<div class="hyp1">
<p align="center">Christ Lutheran Church</p>
</div>
<td align="left" background="woodedgetopleftbg.gif" width="162" height="85"></td>
<td align="left" background="woodedgetopbg.gif" width="150" height="85"></td>
<td align="left" background="woodedgetoprightbg.gif" width="158" height="85"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="470" align="center">
<table width="470" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="left" background="woodedgeleftbg.gif" width="85" height="200"></td>
<td align="left" valign="top" background="Church6.jpg" width="300" height="200">
<p align="center"><font size="6" face="Amazone BT" color="#d0a040">Welcome</font>
</p>
</td>
<td align="left" background="woodedgerightbg.gif" width="85" height="200"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="470" align="center">
<table width="470" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<div class="hyp2">
<p align="center">
<font face="Amazone BT" color="#d0a040">24 Society Road<br>Niantic, CT 06357</font>
</p>
</div>
<td align="left" background="woodedgebottomleftbg.gif" width="162" height="92"></td>
<td align="left" background="woodedgebottombg.gif" width="150" height="92"></td>
<td align="left" background="woodedgebottomrightbg.gif" width="158" height="92">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Any and all help is definitely appreciated.
Thanks,
--Yizit
It is hard to see what you are trying to do here without having the images. Perhpas you could send me a personal message and I could have a look at an active URL.
You have:
.....
<tr>
<div></div>
<td></td>
<td></td>
</tr>
.....
i.e. you are placing your div in a table row, but outside of a table cell, which is simply really bad!
[edit: no urls or "site review" posts, please. See CSS Forum Charter [webmasterworld.com] for details.]
Islandlizard - OK, thanks. That gives me a start as to what to look at. I'll experiment with placing the div's in other areas of the script.
Thanks to both of you for your help.
Regards,
--Yizit
[edited by: createErrorMsg at 9:41 am (utc) on Oct. 13, 2005]
I did some remaking and turned it into XHTML strict and valid CSS. I don't think I did the aligning correctly and used widths and heights in CSS. Perhaps exploring a flexible border would be an idea. The content is also in a box. Maybe someone can figure out how to make it merge with the border.
Here you go:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
.body {
margin : 0;
padding : 0;
color : #000;
background-color : #fff;
}
a {
color : #0000ff;
background-color : #fff;
}
a:hover {
color : #ff0000;
background-color : #fff;
}
a:visited {
color : #800080;
background-color : #fff;
}
.maintable {
width : 470px;
}
.topleft {
background-image : url(woodedgetopleftbg.gif);
background-position : top left;
width : 162px;
height : 85px;
}
.topmid {
background-image : url(woodedgetopbg.gif);
background-position : top;
height : 85px;
width : 150px;
}
.topright {
background-image : url(woodedgetoprightbg.gif);
background-position : top right;
width : 158px;
height : 85px;
}
.bottomleft {
background-image : url(woodedgebottomleftbg.gif);
background-position : bottom left;
width : 162px;
height : 85px;
}
.bottommid {
background-image : url(woodedgebottombg.gif);
background-position : bottom;
width : 150px;
height : 85px;
}
.bottomright {
background-image : url(woodedgebottomrightbg.gif);
background-position : bottom right;
width : 158px;
height : 85px;
}
.lefthandside {
background-image : url(woodedgeleftbg.gif);
width : 85px;
height : 200px;
}
.righthandside {
background-image : url(woodedgerightbg.gif);
width : 85px;
height : 200px;
}
.content {
font-family : "Amazone BT", arial, sans-serif;
color : #d0a040;
width : 300px;
height : 200px;
background-image : url(Church6.jpg);
background-repeat : no-repeat;
background-position : center;
padding : 0;
margin : 0;
text-align : center;
background-color : #fff;
}
.header {
font-size : 36px;
font-weight : bold;
}
.contentinfo {
font-size : 24px;
}
.contentmoreinfo {
font-size : 20px;
}
.maintable {
text-align : center;
width : 100%;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="maintable">
<tr>
<td valign="top"><table cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table cellpadding="0" cellspacing="0">
<tr>
<td class="topleft"> </td>
<td class="topmid"> </td>
<td class="topright"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table cellpadding="0" cellspacing="0">
<tr>
<td class="lefthandside"> </td>
<td valign="top" class="content"><div class="header">Christ Lutheran Church</div>
<br />
<div class="contentinfo">Welcome</div>
<br />
<div class="contentmoreinfo">24 Society Road - Niantic, CT 06357</div></td>
<td class="righthandside"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table cellpadding="0" cellspacing="0">
<tr>
<td class="bottomleft"> </td>
<td class="bottommid"> </td>
<td class="bottomright"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
