non-elastic element in elastic template

#1

Hi

I have been working at this problem for a few days and am stuck.
I am designing a site and put in a spry horizontal menu. I have it centered
where I want it. I am using a dreamweaver 3 colum hybred template with header
and footer. the problem is when I move my browser window horizontally all the
content changes width and the sprybar stays stationary. so we the website if
viewed on smaller monitors the spry menu is off to the right instead of
centered like everything else.
I have redone the spry menu so many times it is making my head spin

here is a page of the site (still working on it as well as the color of the
spry menu)
http://www.georgianbayvistavolleyball.com/Results.htm

any help much appreciated

CS4 with vista home premium

#2

slipage wrote:

Quote:

Hi

I have been working at this problem for a few days and am stuck.
I am designing a site and put in a spry horizontal menu. I have it centered
where I want it.
http://www.georgianbayvistavolleyball.com/Results.htm

any help much appreciated

Hi,

You could try replacing your css rule for this....

#apDiv1 {
width:922px;
background-color:#5D684A;
border:1px none #000000;
}

HTH

--
chin chin
Sinclair

#3

thank you djinn for your response. I was wondering.... where exactley do I
insert
#apDiv1 {
width:922px;
background-color:#5D684A;
border:1px none #000000;
}

HTH? I tried inserting it in the apDiv1 and it didn't work (not sure it was in
the right place anyway

thanks

slip

#4

slipage wrote:

Quote:

thank you djinn for your response. I was wondering.... where exactley do I
insert
#apDiv1 {
width:922px;
background-color:#5D684A;
border:1px none #000000;
}

HTH? I tried inserting it in the apDiv1 and it didn't work (not sure it was in
the right place anyway

thanks

slip

Hi,

This is css code - if you look (in code view) in the <head> of your page
- you'll see this.....

#apDiv1 {
position:absolute;
width:922px;
height:54px;
background-color:#5D684A;
layer-background-color:#FFF;
border:1px none #000000;
z-index:1;
left: 528px;
top: 192px;
float: left;
visibility: visable;
}

replace that with....

#apDiv1 {
width:922px;
background-color:#5D684A;
border:1px none #000000;
}

HTH (Hope That Helps) ;-)

--
chin chin
Sinclair

#5

THANK YOU!
that works great!

Is their anyway you could explain to me why it worked and mine didn't?

always learning......

thanks again

slip

#6

slipage wrote:

Quote:

THANK YOU!
that works great!

Is their anyway you could explain to me why it worked and mine didn't?

always learning......

thanks again

slip

NP :-)

Your css had some of conflicting and superfluous elements.....

position:absolute; - this is the main culprit - it does what it says on
the tin ;-)

left: 528px;
top: 192px; - these are the co-ordinates used for the absolute positioning.

float: left; - this contradicts the above and will be trumped by the above.

The whole thing is already wrapped in other rules which take care of the
centering and now that it's not anchored by the absolute positioning -
it'll go with the flow :-)

HTH

--
chin chin
Sinclair

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

non-elastic element in elastic template

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)

non-elastic element in elastic template - 03-27-2009 , 11:41 AM

Re: non-elastic element in elastic template - 03-28-2009 , 02:53 AM

Re: non-elastic element in elastic template - 03-28-2009 , 06:31 PM

Re: non-elastic element in elastic template - 03-28-2009 , 07:01 PM

Re: non-elastic element in elastic template - 03-28-2009 , 08:55 PM

Re: non-elastic element in elastic template - 03-29-2009 , 12:13 PM