homepage Welcome to WebmasterWorld Guest from 54.205.247.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Positioning a DIV on a specific element?
aw111




msg:4197282
 7:35 pm on Sep 6, 2010 (gmt 0)

I would like to be able to position a DIV (or SPAN, etc) on a specific element (by ID) or a specific anchor tag by name.
For example, how would I position it on a span which has the following code:
<span id="Bill">
Or alternately, position it at an anchor tag with a specific ID.
Thank you for any help.

 

Major_Payne




msg:4197297
 9:12 pm on Sep 6, 2010 (gmt 0)

Use the CSS position property. There are several, but you might use the absolute positioning one:

#Bill {
width: XXpx;
height: YYpx;
position: absolute;
left: xxpx;
top: yypx;
}

You have:

top | right

top | left

bottom | right

bottom | left

Then there is the use of margin properties.

Ron

aw111




msg:4197554
 9:48 am on Sep 7, 2010 (gmt 0)

But how do I position a different element at the same location if I don't know the exact coordinates - e.g., if the target element is positioned automatically by the browser rather than being placed with absolute positioning? So if "Bill" is at coordinates X,Y, and I want to position a DIV at the same location, how do I obtain the coordinates for "Bill" ?

milosevic




msg:4197755
 2:36 pm on Sep 7, 2010 (gmt 0)

You can't with CSS. (at least not yet)

This sort of thing is achieved with JavaScript. JQuery has built in functions for returning the position of elements. Then you pass this returned data to the absolute postion x/y values for the div to me moved to the same place.

Though I have no idea of the situation, you might find it a lot easier to generate a new element (again with JS) which is a child of the one where you want it to appear, rather than trying to move something around the page.

alias




msg:4197804
 4:18 pm on Sep 7, 2010 (gmt 0)

So, the DIV you want to position is using position absolute?

In that case you can use a workaround like that:

<div id="one">1</div><div id="two">2</div>
<style>
#one { position: absolute; }
</style>

That will position the #one above the #two.

That is not very flexible, but it is the simplest solution if you don't want to use fixed positions or javascript.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved