Problems with CSS absolute/relative postioning 1

[Jimuniguy]

Hi,

Problem
I need to position the form about 140 pixels AFTER banner, but I dont seem to be getting this right with the code below:

<div align=&quot;center&quot; style=&quot;font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: bold; color: #000000; position: absolute; visibility: visible; left: 140px;	top: 100px;&quot;> 
&nbsp;&nbsp;&nbsp;Help Me</div>
  
<div style=&quot;position: relative;	visibility: visible; width: 80%; top: 100px;&quot;><form><p>This really neads to go about 140 pixels down from the banner above</p></form>

Can someone tell me what I am missing please?

Thank you

James

 

[FesterSXS]

How about creating a container DIV for these which has an absolute position of top: 100px. The first DIV in the container could have a relative position of top: 0 and the second could have a relative position of top: 140px.

Either that or place the second DIV with an absolute position of top: 240px

Tony

http://www.phoenix-paints.co.uk/portfolio

 

[Jimuniguy]

Hi,

Yes i have thought of that, but the problem is, that banner can be changed (text size I mean) and hence could overflow onto that form, and hence I always need it to be 140px below that banner.

Any other thoughts?

James

 

[Jimuniguy]

Hi,

Your code idea still does not work:

<div style=&quot;postion: absolute; top: 100px;&quot;>
<div align=&quot;center&quot; style=&quot;font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: bold; color: #000000; position: relative; visibility: visible; left: 140px;    top: 0px;&quot;> 
   Help Me</div>
  
<div style=&quot;position: relative;    visibility: visible; width: 80%; top: 100px;&quot;><form><p>This really neads to go about 140 pixels down from the banner above</p></form></div></div>

Can you please tell me why it does not work?

 

[FesterSXS]

how about...

<DIV STYLE=&quot;position: absolute; top: 100;&quot;>
  <DIV ALIGN=&quot;center&quot; STYLE=&quot;font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: bold; color: #000000; position: absolute; visibility: visible; left: 140px; top: 0px;&quot;> 
   Help Me
   </DIV
  
  <DIV STYLE=&quot;position: relative; visibility: visible; width: 80%; top: 140px;&quot;>
  <FORM><P>This really neads to go about 140 pixels down from the banner above</P></FORM>
  </DIV>
</DIV>

This would put the form 140px below the bottom of your banner - or do you want the form to be 140px from the top of your banner??
Tony

http://www.phoenix-paints.co.uk/portfolio

 

[Jimuniguy]

Hi,

Cheers. That works a treat.

Is it possible to do it from the bottom of the banner at all?

Cheers

James

 

[FesterSXS]

oops - thought the last one did that but I forgot to change the position type of the first nested DIV. Both nested DIVs should have position: relative;

<DIV STYLE=&quot;position: absolute; top: 100;&quot;>
  <DIV ALIGN=&quot;center&quot; STYLE=&quot;font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: bold; color: #000000; position: relative; visibility: visible; left: 140px; top: 0px;&quot;> 
   Help Me
   </DIV>
  
  <DIV STYLE=&quot;position: relative; visibility: visible; width: 80%; top: 140px;&quot;>
  <FORM><P>This really neads to go about 140 pixels down from the banner above</P></FORM>
  </DIV>
</DIV>

Tony

http://www.phoenix-paints.co.uk/portfolio

 

[Jimuniguy]

Hi,

Ah ok, one last question then.

How to I get the page to dynamically change??

E.g. I put all this in, but then if the page is smaller then the overall layout, the page will not scroll to show it all like a normal HTML page would do.

Does that make sense?

James

 

[FesterSXS]

you could set the height of the container DIV in it's STYLE settings.

<DIV STYLE=&quot;position: absolute; top: 100; height: 600;&quot;>

Tony

http://www.phoenix-paints.co.uk/portfolio

 

[Jimuniguy]

Hi,

True I could do.

The question I ask is that the page text can dynamically change style, and I need for all the items to be free of each other, regardless of text size, but I now face this problem that the page will not dynamically change shape like a normal static HTML page would do.

Any other thoughts?

James

 

[FesterSXS]

not sure I fully understand your question. Do you want the items on the page to get closer together when the page resizes??
Tony

http://www.phoenix-paints.co.uk/portfolio

 

[Jimuniguy]

Hi,

Think of it like this tony.

Image you have a page which is 1000x800

When you make that page window smaller to say 800x600, in a normal Web page, the browser will put scroll bars on the sides enabling you to scroll the page.

Why will it now NOTscroll to show the parts which have been clipped by the page?

I need it to scroll

Cheers

James

 

[cian]

Insert overflow:auto and it should scroll!


É

http://www.endamcg.com/finland-gaa

 

[FesterSXS]

but if you set the height of the container DIV so that it is greater than the height of all its nested components then it should scroll when the page size is reduced.

Granted - this is not a dynamic solution but it should work if your content is not going to change drastically. Tony

http://www.phoenix-paints.co.uk/portfolio

 

[FesterSXS]

good point cian - completely forgot about that! That should be ideal Tony

http://www.phoenix-paints.co.uk/portfolio

 

[Jimuniguy]

Hi,

True it does work, but then I get a ugly scroll bar which is grey out till its used.

Any thoughts on how to avoid that?

And how mind blowing is this for a friday afternoon? I should be outside with ice cream and a cold beer enjoying the women Scenery Not fiddling with dynamic pages.

Cheers

James

 

[Jimuniguy]

Here is another query too.

The page contains a form, which does make the window dynamically readjust itself, but the scroll feature will not work, the menu just makes the scroll bars appear on the window frame.

:-(

James

 

[cian]

"but then I get a ugly scroll bar which is grey out till its used."

Change the scrollbar colours so it blends in::

#qwert {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #dcdcdc;
}

You can specify the above for the page or just for a single div.


É

http://www.endamcg.com/finland-gaa

 

[FesterSXS]

What browsers actually let you change scrollbar colours?? Tony

http://www.phoenix-paints.co.uk/portfolio

 

[cian]

I think just IE5+ IE6 maybe Konqueror, but thats about it. Better than nothing I reckon!


É

http://www.endamcg.com/finland-gaa