472,958 Members | 2,368 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,958 software developers and data experts.

absolute positioning

hi, i'm trying to position something in the top right corner of a
container, but i can't seem to figure out how to get it working.
here's the html

<div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>

where 'thumb' is my container, and 'del' should be aligned to the top
right. here's the css

..del {
position: absolute;
top: 0;
right: 0;

}

however..it seems to align to the top right of my top level div (the
page container)

anyone know how i might fix this? or perhaps an alternative solution?
(the 'x' is supposed to be overlayed on the top right corner of my
image)

Feb 12 '07 #1
6 2858
On 2007-02-12, Mark <mn*******@gmail.comwrote:
hi, i'm trying to position something in the top right corner of a
container, but i can't seem to figure out how to get it working.
here's the html

<div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>

where 'thumb' is my container, and 'del' should be aligned to the top
right. here's the css

.del {
position: absolute;
top: 0;
right: 0;

}

however..it seems to align to the top right of my top level div (the
page container)

anyone know how i might fix this?
Make the container (div.thumb) position:relative. That should keep it in
the normal flow, where you want it, but cause it to become the
"containing block" for your positioned thing.
Feb 12 '07 #2
Rik
On Mon, 12 Feb 2007 10:58:17 +0100, Mark <mn*******@gmail.comwrote:
hi, i'm trying to position something in the top right corner of a
container, but i can't seem to figure out how to get it working.
here's the html

<div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>

where 'thumb' is my container, and 'del' should be aligned to the top
right. here's the css

.del {
position: absolute;
top: 0;
right: 0;

}

however..it seems to align to the top right of my top level div (the
page container)

anyone know how i might fix this? or perhaps an alternative solution?
(the 'x' is supposed to be overlayed on the top right corner of my
image)
An absolute positioned element will be positioned to the first ancestor
element with a positioning other then 'static'. So you can do this:

div.thumb{
position:relative;
}
..del{
position: absolute;
top: 0;
right:0;
}

--
Rik Wasmus
Feb 12 '07 #3
Scripsit Rik:
><div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>
Side note: the OP should fix the markup, by removing the spurious newline
inside an attribute value (it might not be there in reality, but we cannot
tell since no URL was included [hint hint]), by adding the required alt
attribute, and by changing "&" to "&amp;". Not all markup errors mess up CSS
styling, but that's no excuse for sloppy markup.
An absolute positioned element will be positioned to the first
ancestor element with a positioning other then 'static'.
Indeed. Apparently people all too often regard "absolute positioning" as
absolute positioning. The name is seriously misleading, since "absolute
positioning" is just as relative as "relative positioning", though relative
to something different (namely an enclosing block rather than the position
that the element would have without positioning).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 12 '07 #4
On 2007-02-12, Jukka K. Korpela <jk******@cs.tut.fiwrote:
Scripsit Rik:
>><div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>

Side note: the OP should fix the markup, by removing the spurious newline
inside an attribute value (it might not be there in reality, but we cannot
tell since no URL was included [hint hint]), by adding the required alt
attribute, and by changing "&" to "&amp;". Not all markup errors mess up CSS
styling, but that's no excuse for sloppy markup.
>An absolute positioned element will be positioned to the first
ancestor element with a positioning other then 'static'.

Indeed. Apparently people all too often regard "absolute positioning" as
absolute positioning. The name is seriously misleading, since "absolute
positioning" is just as relative as "relative positioning", though relative
to something different (namely an enclosing block rather than the position
that the element would have without positioning).
It is very confusing I agree. Absolute positioning (as opposed to
"absolute positioning") is achieved in CSS with position: fixed.
Feb 12 '07 #5
An absolute positioned element will be positioned to the first ancestor
element with a positioning other then 'static'. So you can do this:
Rik Wasmus
oh, I didnt know it worked like that. this fixes the problem, thank
you so much!

Feb 12 '07 #6
Side note: the OP should fix the markup, by removing the spurious newline
inside an attribute value (it might not be there in reality, but we cannot
tell since no URL was included [hint hint]), by adding the required alt
attribute, and by changing "&" to "&amp;". Not all markup errors mess up CSS
styling, but that's no excuse for sloppy markup.
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
the newline wasn't in my original markup, I'm usually pretty clean
about that.
if you want a link, here you go http://www.mnbayazit.com/?p=gallery
although you won't be able to see the x's on the photos because you
may only delete photos that you have uploaded
(which you aren't able to do unless you sign up.... which you also
can't do...hence the no link)

Feb 12 '07 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: Tom Szabo | last post by:
Hi, Just wondering if there are any disadvantage in absolute positioning controls on a page? In example instead of putting the text fields into a table to align properly, one would absolute...
7
by: Griff Miller | last post by:
Please see http://home.houston.rr.com/gmiller15/css/vertprob.html . In mozilla 1.6/1.7 it looks the way I want it, with a thin separation between the two boxes. In IE6, the two boxes touch, which...
6
by: Gustaf Liljegren | last post by:
Here's what I'm trying to achieve: 1. A <div>, centered on screen, 600px wide and 100px high, with a background-image (also 600 x 100). 2. Text (an <h1> element) positioned with precision inside...
4
by: mike eli | last post by:
Hi, I have several absolute positioned elements inside an absolute positioned DIV. I would like one of the nested elements to have a dynamic width. I set it's left and right attributes to 5, so...
4
by: Alan Silver | last post by:
Hello, Having been a light reader of this ng for a few months now (after several years absence), I have noticed that absolute positioning seems to be considered a Very Bad Thing around here....
3
by: horusprim | last post by:
Is there a CSS absolute positioning rendering bug in FF1.02 and IE 6? I have been experimenting with precision absolute positioning in CSS. The following test content was used in the...
2
by: nonsensitor | last post by:
I'm just learning xhtml & css, primarily from westciv's online tutorials and css guide. I've run into a couple of problems with a page I'm developing that I can't figure out. The first problem is...
20
by: mehstg1319 | last post by:
Hi there Not sure if anyone can help me, I am working on a site for my university, and am having a bit of trouble with css positioning. I am very new to css and do not know very much about it....
14
by: Fistro | last post by:
I'm trying to find a design that would allow me to build web pages without having to worry about compatibility issues (not too much, in any case,,,) I've came across this CSS layout technique:...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
3
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
2
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.