HTML/CSS/JS: Problem with <p> not having an absolute position with CSS.
ProgrammingThis forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.
Notices
Welcome to LinuxQuestions.org, a friendly and active Linux Community.
You are currently viewing LQ as a guest. By joining our community you will have the ability to post topics, receive our newsletter, use the advanced search, subscribe to threads and access many other special features. Registration is quick, simple and absolutely free. Join our community today!
Note that registered members see fewer ads, and ContentLink is completely disabled once you log in.
If you have any problems with the registration process or your account login, please contact us. If you need to reset your password, click here.
Having a problem logging in? Please visit this page to clear all LQ-related cookies.
Get a virtual cloud desktop with the Linux distro that you want in less than five minutes with Shells! With over 10 pre-installed distros to choose from, the worry-free installation life is here! Whether you are a digital nomad or just looking for flexibility, Shells can put your Linux machine on the device that you want to use.
Exclusive for LQ members, get up to 45% off per month. Click here for more info.
HTML/CSS/JS: Problem with <p> not having an absolute position with CSS.
I'm trying to make my <p> tag have an absolute position of a certain number(depends on the page... sometimes 500px, sometimes 2500px).
Here is the code that loads when the page loads:
Code:
function LoadEverything()
{
for (var a_iter = 0, b_iter = 4, left_iter = 50, top_iter = 250; a_iter < DATA.length; ++a_iter)
{
//... not relavent.
// the following if...else statements could/should be of use.
if (a_iter == b_iter -1)
{
b_iter += 4;
left_iter = 50;
top_iter += 300;
}
else
{
left_iter += 300;
}
//... not relavent.
// This block of code is the problem code.
if (a_iter == DATA.length -1)
{
top_iter += 100;
var end_out = "<p style='position: absolute; top: " + top_iter + "px;'><hr /><small>Art & Programming by George Tuosto</small></p>";
document.getElementById('images').innerHTML += end_out;
}
}
}
The <p> tag shown being outputted to the document, is shown, but not where I expect it to be. It is at the very top of the document. Any ideas? Any questions that need to be answered? Thanks in advance!
If it helps, at the moment in my page, it should be appearing 2450px from the top.
Last edited by RHLinuxGUY; 02-05-2007 at 01:06 AM.
What is the html that gets generated?
is it <p style='position: absolute; top: 2450px;'>
or is it another value?
absolute is with reference to the containing block, where as fixed is with reference to the window, maybe that has a difference?
All the other HTML that is generated is just images. The <p> tag is generated after all the images have been generated. All the images are given absolute values. They determine this value with the top_iter.
Every 4 loops, a_iter is tested against b_iter to see if they are equal. If they are, b_iter has 4 added to it, and top_iter has 300 added to it. 200 for the image height, and a 100 for the space.
After all the images are loaded, a 100 more is added to top_iter, and that is where the <p> tag should use the variable. To specify the y axis location is should be placed on the document.
So are all your images positioned correctly and it is just the text that is in the wrong place?
whilst it should work with the p tag I tend to do all my positioning with the div (or span) tags.
I would tend to do this sort of positioning at the server rather than the browser level, it is normally easier to fix problems. Can you see the generated HTML?
Strangely that index page I showed you is all that appears. :/
Even after the LoadEverything was done.
--EDIT--
Except when I look at my DOM Inspector(Firefox), in which case I can view everything, even the <p> tag, which has the right style attributes :/. (2450px)
Last edited by RHLinuxGUY; 02-05-2007 at 04:42 AM.
I'm trying to make my <p> tag have an absolute position
a late reply (just joined the group) but i could't help myself.
unless you've come to know this allready an absolutetly positoned element will be positioned relative to it's first parent element with a position of anything but static
(note that static is the default position given to elements)
and so the element that is to be the positoning or positional container of this <p> element needs to have it's position attribute set to one of relative, absolute or fixed depending on the overall document layout.
LinuxQuestions.org is looking for people interested in writing
Editorials, Articles, Reviews, and more. If you'd like to contribute
content, let us know.