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

12-13-2009, 05: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, 09: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, 09: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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum