Web Design Discussion - Floating Text

Print Page | Close Window

Floating Text

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: Web Design Discussion
Forum Description: Discussion on web design and development subjects.
URL: https://forums.webwiz.net/forum_posts.asp?TID=24168
Printed Date: 28 March 2026 at 5:58pm
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: Floating Text

Posted By: MortiOli
Subject: Floating Text
Date Posted: 13 August 2007 at 9:59pm

I wonder if someone could enlighten me on how I can float text over the following image, under the neck of the guitar;

I've been trying allsorts, but can't seem to get it Ouch

Help please!

Replies:

Posted By: Mart
Date Posted: 13 August 2007 at 10:16pm

Try something like this (may need tweaking):


<div style="width:320px;height:112px;background: url('url')">
<div style="position:relative;left:150px; top:25px">
Text
</div>
</div>

That's untested though, basically what i'm saying is make a div with position set to relative, you can then use the left and top properties to modify the offset of the text in pixels

Posted By: MortiOli
Date Posted: 14 August 2007 at 6:24pm

Brilliant! Cheers!

And with some jiggery pokery, I've managed to get the background image to be clickable;


	<div style="background: url('<% = strTitleImage %>')" id="logo">
		<a href="<% = strWebsiteURL %>" title="<% = strWebsiteName %> <% = strTxtHomepage %>"><span>CKY Alliance UK</span></a>
			<div style="position:relative;left:125px; top:85px">
			Text
			</div>
	</div>


#logo
{
    width: 340px;
    height: 112px;
    position: relative;
}
 #logo a
{
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 112px;
}
 #logo a span
{
    display: none;
}

Thanks Mart!