Trying to position DIV's for multipage form 1

[techu4]

Hi all,

I have not used divs before and have found out that you can use them along with some javascript to create a multipage form which just hides or unhides the relevant div's when you click on form button.

This is all well and good but here is the problem i have.

I have 3 div's (3 section sof the form)If I use absolute positioning for the div's they don't disply in the correct place if you use a different screen resolution as the positioning is absolute to the top left corner of the page.

If I use relative positioning then the 2nd and 3rd div just sit below the 1st on the page hidden, but this throughs out all the alihnment of the graphics that make up the page.

Does any one know how to position div's so that they will always appear in the same area of the site (i.e there is a border made from graphic and the div's need to always sit inside that border), regardless of the screen resolution.

Hope this makes sense and that some one can help.

Regards

Techu4

 

[rpgfan3233]

Create a div that acts as a page container (you need a width) and then put it all inside. The 3 divs could then be positioned relatively to the container rather than to the entire page.

 

[techu4]

Hi,

Thanks for that.

One question. How do I position the container DIV so that always moves to the correct place on the page dependant on the resolution.

I might be being stupid but does placing the 3 div's inside a container div still give me the same issue but just on the container div.

The reason I say this is that I have tried that. I set a container div to be be relative to the page and then set the 3 div's to be absolute.

The machine I am designing this on runs at 1280x1024 and the test machine is 1024x768. Everything is fine the design machine abut when viewed on the test machines the container div is in the wrong place.

Hope i am not missing something very simple, but do you have any more ideas as it seems as though I have tried and failed.

Thanks again.

Techu4

 

[Vragabond]

Why use any positioning at all. Your problem does not call for positioning, let alone absolute positioning. Play with [tt]display: block;[/tt] and [tt]display: none;[/tt] and everything should be fine.

<div style="width: 400px; height: 300px; background: red; display: none;"></div>
<div style="width: 400px; height: 300px; background: blue; display: none;"></div>
<div style="width: 400px; height: 300px; background: yellow; display: block;"></div>

If you look at this example, yellow div will sit at the top, eventhough there are two divs above it. That is because they are not rendered. If you change display none to block for any of them and put the third on none, that div will be in its place. I presume you were trying to solve this with [tt]visibility[/tt] property.

 

[techu4]

Hi Vragabond,

Thanks for your response but that was not the problem i was having. The problem is how to position the div's so that they always appear over the same section of the webpage, regardless of what resolution was running.

Hop this makes sense.

Regards

Techu4

 

[Vragabond]

And I answered that. Don't use positioning. A div with width set to 90%, margins set to 0 and auto and margin-top set to 100px will always be 90% of the window, centered and 100px from the top. Without knowing where you want to put your element, I can't help you further but if you're having problems you've mentioned you're surely overusing the positioning.

 

[techu4]

Hi Vragabond,

Sorry if i am being stupid but if I don't use positioning at all, how am i able to tell the div where it needs to be. I can see how you solution will work if you want the div always centered, but unfortunately I don't need it centered. I need the div in a specific area over a graphic on the page. Please correct me if i am wrong but with different resolutions the distance from the left hand side of the screen and the top of the screen will be different. As i don't want the div centered, how do i calculate what the position will be in different resolutions.

Below is an image of what the page looks like and shows where the div needs to be at all times.

Sorry if i am being stupid, but as stated i have not worked with div's before.

Regards

Techu4

 

[Vragabond]

Your image unfortunately does not work.

Please correct me if i am wrong but with different resolutions the distance from the left hand side of the screen and the top of the screen will be different.

Yes, you are right. But like I said, that would involve using positioning (applying left and top). I am telling you (for the third time now) to scrap the positioning and just put the div where you want it. You say you want it over some graphic. What makes the graphic stay where it is? Just use the same approach for the div.

 

[techu4]

The graphic is made up from a sliced image and is in a table. That table is always centered to the screen. I have tried just placing the div where I want them and it moves when i change the resolution.

If i put the div where i want and go back and look at the html code, it has automatically got position:absolute and the top and left pixels. If i then delete the absolute it puts the div back into the top left hand corner.

This is what i am trying to say is that i have tried what you have told 3 times and it just does not work.

 

[Vragabond]

You are using some kind of software to produce this "divs". Div is nothing else than a short name for division which is a block in your website. It is CSS that moves the div around and position: absolute; pushes it in the top left corner (and out of the document flow). Whatever program is doing this, it is awfully wrong. If you would just put the div in your table like this:

<table>
 <tr>
  <td>
   <div>My Division</div>
  </td>
 </tr>
</table>

it would be right where you want it. Since you're using proprietary software to produce your website I don't know what that software does to your code. Easiest way to solve this would be for you to publish the page somewhere and us taking a look at the code. I would suggest scraping the table altogether, but without seeing the page, it is almost impossible to advise.

 

[techu4]

Thanks for that.

Ok I have taken out everything to do with positions and the first div stays in place. The second div does not seem to be layered but instead sits on the page underneath the first div which moves all the table out of shape and throws out all the layout of the graphics.

I need the divs to be layered on top of each other.

I am using Frotpage 2003.

Any ideas.

Techu4

 

[ChrisHunt]

Let's start again, getting all of the facts in first.

You've got a big image - sliced up into table cells, and you want to position a number of <div>s on top of it. Does each <div> have to go in the same place, or do they each have their own spot? Is anything else positioned on top of this picture? If you've got a URL where we can see what's happening already, it'll be easier to get a handle on what you're trying to do - and thus the best way forward. You may be going completely the wrong way about it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Vragabond]

<div style="position: relative; width: 300px; height: 200px; background: red;">
  <div style="position: absolute;">This div is layered on top of the previous one, hence the red background.</div>
</div>

This should do it.

 

[techu4]

Hi ChrisHunt,

I don't have a url at the moment, but will get one up soon.

Yes all the div's need to be in exactly the same place on top of each other. The area where they need to be is a cell in a table that has had the graphic removed as it was just a white image and the background set as white. There is nothing else in the cell.

The divs actually sit inside a form tag as they make up a multipgae form. Each div has a continue and go back button except the first one. When continue is pressed the first div si hidden and the second div is made visible, so on and so on.

I am doing this way so that the divs actually make up a complete form that can be passed to a form processor in one go without having to store all the different pages in variables.

Hope that helps.

Cheers

Techu4

 

[Vragabond]

Still, there is no need for positioning here. Nothing is on top of anything else. Based on what you have just told us, the (simplified) version should look like:

<table>
 <tr>
  <td>
   <form>
    <div style="display: none;"></div>
    <div style="display: none;"></div>
    <div style="display: block;"></div>
   </form>
  </td>
 </tr>
</table>

This omits all other code and lists three divs inside the form, two of them hidden at this moment and the third one showed. And you use the aforementioned JavaScript to switch divs between none and block.

 

[techu4]

Hi all,

I have tried the above in a new page and it works fine. However my page does not. I have put link to the page so that you can see what is happening.

--LINK HERE--

Cheers

Techu4

 

[techu4]

Sorry, link was wrong. Here is a new one.

--LINK HERE--

 

[Vragabond]

However my page does not

This is too vague for me to comment on. What does not work? Where does the result differ from what you expect? And for the last time (my first post suggested that), switch visibility: hidden/visible; to display: none/block; Here's the explanation:

Display property controls what is rendered on the page and what is not (display: none. If element has a value of display: none; it will appear as if the element is not on page. There will be no placeholder for that element and the rest of the page will be rendered as if that element was not there or commented out.

Visibility property controls if the element is shown (visible) or not (hidden). Element with a value of visibility: hidden; will still be rendered but will appear invisible to the browser -- picture an invisible person blocking a doorway: you cannot go through the doorway and you cannot see that person. That is why for elements using visibility: hidden; place in the website will be kept (that is why you have a big gaping hole when you hide the first div and show the second -- first is still there, it is only hidden).

Both properties have their place in web design, you just need to know when to use which. You need to use display.

 

[techu4]

Hi Vragabond,

Ok I bow in your presence. Now that you have explained why it had to be done that way I can see what you mean. I have changed it to display and all works perfectly.

Sorry for being a complete idiot. The javascript and test page that I was basing my page on was downloaded for a tutorials site and worked fine on its own but did not work when used in a page with graphical elements.

One quick question. When changing the currently visible div to display:none, will that lose the data in the form fields.

By the way I have given you a star. (A very big star at that)

Thanks again.

Techu4

 

[Vragabond]

It never did lose any data for me. All in all, it is pretty easy to test a thing like that, no?