PDA

View Full Version : poistion of elements



egrave
03-27-2005, 03:10 PM
How do I poistion a element in javascript :)

jscheuer1
03-27-2005, 04:44 PM
There are many 'ways' and no way. We can access an element's position and establish or modify it using JavaScript to change an element's attributes or its style. These two main approaches have many variations. However, there is no pure JavaScript command to position an element, at least none that I know of. To make things a little more complicated, the ways available to access elements using JavaScript vary according to browser type. In practice we generally can write code that works on most browsers by asking them what they support before using it. If you have something in particular in mind, let us know.

cr3ative
03-27-2005, 04:50 PM
You would want to do this using CSS, not javascript.

CSS is quite easy to get used to, and google holds many tutorials as to CSS basics. I strongly suggest you read those before continuing.

Those tutorials may well cover positioning, but if they do not, here is the offical w3 document regarding the subject:
http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme

cr3ative

egrave
03-27-2005, 06:10 PM
The problem I have if I create a web page for 800x600 and I use the poistion command then it does not work on a screen running 1024x768 is there any way I can do this that it work on both screen other than using the table command

jscheuer1
03-27-2005, 06:22 PM
Table is not a command, it is an element but, yes tables are widely used to position content so that it looks well at different resolutions. A paragraph can have the same effect as can an image tag, a division, there are at least several others, depending on the content. And cr3ative is right, the preferred method to position these elements and their content is css. One can also use attributes like 'align=center' but those are going the way of the dinosaur so, especially if you are just starting out, learn css, it can be fun!

mwinter
03-27-2005, 08:19 PM
The problem I have if I create a web page for 800x600You shouldn't create pages for any resolution. That's not how the Web works. Unlike print, the Web is viewed from devices as small as mobiles, to those as large as TVs. It's simply impossible to create alternatives for the number of combinations, especially as desktop users may not use the entire dimensions of their monitor. In fact, the larger the monitor, the more likely that will be.


the poistion commandThe position CSS property is not a command, nor is the table element (as jscheuer said). You should make sure you learn and use the correct terminology as things will get very confusing if you refer to everything as a "command". That's probably the worst possible word, too as neither HTML nor CSS "do" anything so you can't issue "commands" with either language.


is there any way I can do this that it work on both screenIt depends what "this" is. Positioning an element is a very vague description.

Mike

egrave
03-28-2005, 01:37 PM
What I would like to know is what code I would use if I put a image at the left corner and a image at the right corner of a 800x600 screen and when view in a 1024x768 and they would be in the right and left corners of that screen.

mwinter
03-28-2005, 03:04 PM
What I would like to know is what code I would use if I put a image at the left corner and a image at the right corner of a 800x600 screen and when view in a 1024x768 and they would be in the right and left corners of that screen.Well, the easiest way to do that is to use the position CSS property to specify absolute positioning, then use the left property to specify the position of the left-most image, and the right property to specify the position of the right-most image. The values you use for those properties will offsets from the sides of the viewport.

For example,


#img-1,
#img-2 {
position: absolute;
top: 10px;
}
#img-1 {
left: 10px;
}
#img-2 {
right: 10px;
}would move the elements with the id attribute values 'img-1' and 'img-2' ten pixels from the left and right edges respectively. You could, of course, use other length values and units, including percentages, to locate the elements.

Hope that helps,
Mike

egrave
03-29-2005, 06:29 PM
I try the CSS code with (position absolute) but I still wind up with the same problem and That is the element is not in the same place on a 1024 screen as it is on a 800 screen I try to set it in pixels and I try to set in % of screen. Here is what I used.

<STYLE type="text/css">

.pile {
position: absolute;
right: 2%;
top: 10%;
width: 2in;
height: 2in;
}
.pile1 {
position: absolute;
left: 2%;
top: 10%;
width: 2in;
height: 2in;
}
.pile2 {
position: absolute;
left: 120px;
top: 120px;
width: 304px;
height: 309px;
}


</STYLE>
</HEAD>
<BODY>
<P>
<IMG id="image" class="pile"
src="images/main2_01BbA.GIF" style="z-index: 1" width="150" height="198">
<P>
<IMG id="image" class="pile1"
src="images/main2_01BbA.GIF" style="z-index: 1" width="150" height="198">
<P>
<IMG id="image" class="pile2"
src="images/texasmapRWB.gif" style="z-index: 1" width="304" height="309">


</BODY>

jscheuer1
03-29-2005, 07:36 PM
the element is not in the same place on a 1024 screen as it is on a 800 screenThat's not the idea. The idea is to get it so it looks OK in any resolution, not identical. All I can see are the where the pictures would be, looks OK in either resolution. Where were you planning on having the text, if any? If there is text and it goes between the pictures, you might prefer using 'float' to position some or all of the pictures and/or text.

egrave
03-29-2005, 08:37 PM
I was afraid that if I put text or picture over top using layers they would move on me

jscheuer1
03-29-2005, 09:16 PM
Layers are very old, use paragraphs, tables or divisions for text. And, don't be afraid, if it looks bad, change it. I don't really have time to go into all the ins and outs of using float but, I get the feeling it could work for you. One usually doesn't use absolute positioning though with float. Google 'style float css' you should find some examples and ideas. I saw a tutorial page once that had an example that your set-up reminds me of, I'll see if I can find it again. Here it is:

http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

egrave
03-29-2005, 10:39 PM
Thanks jscheuer1 you have been a great help