LinuxQuestions.org
Review your favorite Linux distribution.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices

Reply
 
Search this Thread
Old 02-05-2007, 01:04 AM   #1
RHLinuxGUY
Member
 
Registered: Oct 2003
Distribution: Ubuntu 7.04
Posts: 889
Blog Entries: 1

Rep: Reputation: 30
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.
 
Old 02-05-2007, 03:37 AM   #2
graemef
Senior Member
 
Registered: Nov 2005
Location: Hanoi
Distribution: Fedora 13, Ubuntu 10.04
Posts: 2,379

Rep: Reputation: 148Reputation: 148
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?
 
Old 02-05-2007, 04:00 AM   #3
RHLinuxGUY
Member
 
Registered: Oct 2003
Distribution: Ubuntu 7.04
Posts: 889
Blog Entries: 1

Original Poster
Rep: Reputation: 30
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.

If it helps, here is the index.html:

Code:
<html>
<head>
<script type="text/javascript" src="images.js"   ></script>
<script type="text/javascript" src="image_con.js"></script>
</head>
<body background="data/images/backdrops/backdrop.png">
<div id="link_bar" style="border: dotted fuchsia 1px black; height: 150px; background-image: url(data/images/backdrops/backdrop2.png);">
<p align="center" style="font-family: courier;">link 1 link 2 link 3</p></center></div>
<div id="S_DebugOne"></div>
<div id="S_Debug"></div>
<hr />
<div id="images">
<script type="text/javascript"> LoadEverything(); </script>

</div>
</body>
</html>
Thanks in advance!

Last edited by RHLinuxGUY; 02-05-2007 at 04:36 AM.
 
Old 02-05-2007, 04:15 AM   #4
graemef
Senior Member
 
Registered: Nov 2005
Location: Hanoi
Distribution: Fedora 13, Ubuntu 10.04
Posts: 2,379

Rep: Reputation: 148Reputation: 148
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?
 
Old 02-05-2007, 04:35 AM   #5
RHLinuxGUY
Member
 
Registered: Oct 2003
Distribution: Ubuntu 7.04
Posts: 889
Blog Entries: 1

Original Poster
Rep: Reputation: 30
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.
 
Old 02-05-2007, 04:32 PM   #6
RHLinuxGUY
Member
 
Registered: Oct 2003
Distribution: Ubuntu 7.04
Posts: 889
Blog Entries: 1

Original Poster
Rep: Reputation: 30
Looks like I fixed it :?. I don't know what happened, but it is working now. I mean, I didn't change anything.
 
Old 02-05-2007, 10:40 PM   #7
graemef
Senior Member
 
Registered: Nov 2005
Location: Hanoi
Distribution: Fedora 13, Ubuntu 10.04
Posts: 2,379

Rep: Reputation: 148Reputation: 148
Looking at your signature...

Javascript turns you into a mushroom...

Glad you sorted it out though
 
Old 03-03-2007, 12:21 AM   #8
spaesani
LQ Newbie
 
Registered: Mar 2007
Posts: 13

Rep: Reputation: 0
Thumbs up 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.

cheers
sp
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
A little HTML/CSS help? jon_k General 9 07-17-2005 01:49 AM
html/css retrodict Programming 5 11-01-2004 06:56 PM
html/css hylke Programming 0 06-27-2004 02:39 PM
CSS / HTML in Mozilla jpbarto Programming 4 04-26-2004 08:08 PM
Positioning with CSS in HTML PhilD Programming 7 08-26-2003 10:49 AM


All times are GMT -5. The time now is 07:04 AM.

Main Menu
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
identi.ca: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration