View Full Version : Placing text over an image and having it line up correctly.

12-13-2009, 06:29 AM
Hi All,

I am designing a website for a friend and they want to be able to update certain aspects of it seasonally. I have opted to design my own very basic CMS which is no problem.
I need this information to be shown over the top of an image, however, getting it to line up to the correct part of the image is proving a challenge. Is there a way to align something with respect to the image boundaries (which are a fixed size). If you visit www.ripenreadycherries.com.au you will see where i am trying to got a table to line up over the wooden sign.
Your help is much appreciated.


12-13-2009, 10:13 AM
Hello ryantakers,
Do you know why tables are not for layout? Have a look at the link about tables in my sig below.

Give this a try instead of the tables -
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #99ccff;
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
#container {
height: 611px;
width: 800px;
margin: 30px auto;
background: url(http://www.ripenreadycherries.com.au/RipeNReady.png);
font-size: 0.8em;
position: relative;
ul#week {
position: absolute;
top: 325px;
left: 560px;
list-style: none;
text-decoration: none;
ul#week li a {
color: #000;
text-decoration: none;
ul#week li a:hover {color: #f00;}
<div id="container">
<ul id="week">
<li><a href="#">Monday</a></li>
<li><a href="#">Tuesday</a></li>
<li><a href="#">Wednesday</a></li>
<li><a href="#">Thursday</a></li>
<li><a href="#">Friday</a></li>
<li><a href="#">Saturday</a></li>
<li><a href="#">Sunday</a></li>
<!--end container--></div>

12-13-2009, 10:35 AM
Thanks very much excavator.
I read through your reasons why tables are bad, and I must confess, I didn't want to use them, its just that there was limited time and information for me to work with css.

Thanks for the help.