relative postion 1

sandeepmur · Jan 25, 2004

Hi,

I am placing some text over a image in this fashion:

<IMG SRC="images/link.gif">
<DIV STYLE="position:absolute; top:152px; left:260px; width:200px; height:25px">
<CENTER><font size="-1" color="#000000" style="font-family: Verdana;"><b>Contact</b></FONT></CENTER>
</DIV>

My problem is when the browser resolution changes say to 800x600 or more than 1024, the text "contact" gets displayed somewhere else..

Is there anyway I can gaurantee its appearance always on the gif ?

thnx in adv,
sg

LV · Jan 25, 2004

Try giving the <IMG> an absolute position as well.

WartookMan · Jan 25, 2004

This should do the trick... position it relative to the container object (another DIV). It should also display the same in both in IE and NS 4: [thumbsup2]

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head>
	<title>Image Text</title>
<style type=&quot;text/css&quot;>
<!--
.imagetext {
	font-family: verdana, arial;
	font-size: 80%;
	color: #000000;
	font-weight: bold;
	position: relative;
	top: -27px;
	left: 20px;
}
//-->
</style>
</head>

<body>
<div><img src=&quot;images/link.gif&quot; width=&quot;100&quot; height=&quot;30&quot; border=&quot;0&quot; alt=&quot;&quot;>
<div class=&quot;imagetext&quot;>Contact</div></div>
</body>
</html>

Pete.

Web Developer / Aptrix CMS (LWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

BillyRayPreachersSon · Jan 25, 2004

Wrap the whole lot in a relative div, then change the position of the inner div:

Code:

<DIV STYLE=&quot;position:relative;&quot;>
   <IMG SRC=&quot;images/link.gif&quot;>
   <DIV STYLE=&quot;position:absolute; top:0px; left:0px; width:200px; height:25px&quot;>
      <CENTER><font size=&quot;-1&quot; color=&quot;#000000&quot; style=&quot;font-family: Verdana;&quot;><b>Contact</b></FONT></CENTER>
   </DIV>
</DIV>

Hope this helps!

Dan

sandeepmur · Jan 26, 2004

Thnx for great responses guys!

cheers,
sg

DaveC426913 · Mar 15, 2004

Trying to learn to use DIVs instead of tables.

I want a
- fixed-width left column
- fixed-width right column that's flush-right
- dynamic-width middle column.
i.e the width page expands to fill the page.

This is what I've got.

<div>
<div style="float: left; width: 150; background: blue;">
klsjflsdjflsf
</div>
<div>
slkjslkfjsl
</div>
<div style="float: right; width: 150; background: blue;">
klsjflsdjflsf
</div>
</div>

BillyRayPreachersSon · Mar 15, 2004

Dave,

Check out this link:

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

A fantastic URL for just the sort of thing you're after.

Hope this helps,
Dan

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

relative postion 1

sandeepmur

Programmer

LV

Programmer

WartookMan

Technical User

BillyRayPreachersSon

Programmer

sandeepmur

Programmer

DaveC426913

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor