Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    29
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Placing text over an image and having it line up correctly.

    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.

    Regards,
    Ryan
    Last edited by ryantakers; 12-13-2009 at 05:43 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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">
    <head>
    <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;}
    </style>
    </head>
    <body>
        <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>
            </ul>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    29
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •