• Locked
1 reply [Last post]
Sun, 2011-05-08 18:07
johnywhy
johnywhy's picture
Offline
Regular
Last seen: 6 weeks 4 days ago
Timezone: GMT-8
Joined: 2010-03-11
Posts: 27
Points: 37

my page contains three spans, inline:
<span id="span1" /> <span id="span2" /> <span id="span3" />

they are positioned properly on the page.

within span3, i want to contain a link surrounding an image. centered on the image, i want some text:

<a id="span3" href="tours.html">
    <img src="tours.jpg"  />
    <span id="headline">
        <i>Text Line 1<br>Text Line 2</i>
    </span>
</a>

to get the text centered on the image, i make it relatively-positioned:
<span id="headline" style="
	width: 240px;
	display: block;
	position: relative;
	left: 850px;
	top: -100px;">
        <i>Headline</i>
    </span>

all good, but problem is that the original inline location of the headline is getting linked, even though the headline has been relatively repositioned.

so, how to eliminate link region in original location of headline?

also posted to http://csscreator.com, http://css-tricks.com, http://www.codingforums.comhttp://www.codingforums.com

Top
Tags:
Mon, 2011-05-09 11:17
#1
Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 11 years 39 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

You're using the wrong

You're using the wrong positioning. Relative positioning must be placed on the containing element, and absolute positioning must be placed on the child element within that you want to position. You should also, in my opinion and others, make the image a background image with a width and height on the containing element to make things cleaner and easier for future modification.

With this in mind, your code should appear as such (using 100px as default values you can change):

<a id="span3" href="tours.html" style="display: block; position: relative; width: 240px; height: 100px; background: url(images/tours.jpg) no-repeat top left;">
    <span id="headline" style="position: relative; top: 40px; left: 100px;">
        <i>Headline</i>
    </span>
</a>

Not sure if that will fix your problem as I didn't quite understand it but it's a starting point.

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.

Top
  • Locked