Image and Text Positioning

R

Ripper

New Member
Hey everyone,

Just wondering, im having problems with my div positioning of text

Ive had a look at tutorials but just cant seem to get it right,

So what I want is a picture as my background for the site, 900px in width.
then I want to place my text on top of it, to be used for the content of the site, now it seems to look fine on my screen, but when i use a bigger screen, with a bigger resolution the position of the text moves.

How do i do this properly so that the text stays on top of my image.

Thanks
 
B

bcee

New Member
This would depend on your HTML structure and where the background image is positioned. Some HTML and CSS would help...
 
R

Ripper

New Member
Div positioning

Ok

Well I cant seem to find my code for the way I want it in Divs, but I gave it ago by using tables. So atleast you guys will know what im trying to accomplish. The background image is in the middle, and I want my text to sit on top. but i dont want the text position to move when viewed on a larger monitor.
Any ideas anyone?

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">
<head>
<meta http-eqliv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
   href=mylink;
else
   href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>


</head>

  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

<body>
<div align="center">
  <table width="900" cellspacing="0" background="images/case.png" align="center">
    <tr>
      <td width="20" rowspan="10">&nbsp;</td>
      <td width="138" height="69">&nbsp;</td>
      <td width="223">&nbsp;</td>
      <td width="2">&nbsp;</td>
      <td width="110" align="center" valign="bottom">&nbsp;</td>
      <td width="100" align="center" valign="bottom">&nbsp;</td>
      <td width="108" align="center" valign="bottom"><links></td>
      <td width="136">&nbsp;</td>
      <td width="43" colspan="2" rowspan="10">&nbsp;</td>
    </tr>
    <tr>
      <td height="51">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td align="center" valign="middle">
      <links><a href="contact.html">Contact Us</a><links></td>
      <td align="center" valign="middle">
      <links><a href="expert.html">Expert Witness</a><links></td>
      <td align="center" valign="middle">
      <links><a href="conference.html">Conference</a></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td height="50">&nbsp;</td>
      <td valign="bottom"><headers>Case Management<headers></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td height="21">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="5" rowspan="6" valign="top"><textheader>Our Philosophy</textheader>
        <p>To provide individual care for individual people. To maximise our Clients' potential and quality of life, empowering each individual to make choices, maintaining their dignity and realising their full potential.<p>
          <textheader>Aims and Objectives</textheader>
        <ul>
          <li>To support our Clients to enable them to realise their full potential</li>
          <li>To facilitate independence, empowerment, choice and dignity</li>
          <li>Provide a Client centred service so that the needs of our Clients are understood and met</li>
          <li>Employ a competent, caring workforce to provide a quality service</li>
          <li>Consistently meet all the regulation reqlirements in accordance with all the accociated regulatory bodies</li>
          <li>Support and provide clear information for family members and significant others</li>
        </ul>
        
        <textheader>Links</textheader>
        <br><br>
        <A HREF="casemanpop.html" onClick="return popup(this, 'notes')">CPIMS Case Management</A>
        <br>
        <A HREF="brainpop.html" onClick="return popup(this, 'notes')">Brain Injuries</A>
        <br>
        <A HREF="spinalpop.html" onClick="return popup(this, 'notes')">Spinal Injuries</A>
        <br>
        <A HREF="medicopop.html" onClick="return popup(this, 'notes')">Medica-Legal Expert Witness Reports</A>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td height="685">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    </table>
</div>
</body>
</html>
 
L

LandisCreations

New Member
A link the the page in question is really helpful in cases like this. There's a lot of developer tools, Firebug specifically, that can help us to have an interactive look at the page itself.
 
You must log in or register to reply here.
Top