[Pro] Fixed divs without Sticker action

I’m stumped - I’m trying to have a page with 3 columns page is set to align - none. The left and right columns are fixed to the top of the page and the center one scrolls. I have 2 wrapper divs - one that is set to fixed in window with the left and right columns as two inline divs one floating left and the other floating right. I then have another wrapper set to absolute containing the center column. So far this is all working a treat except for the fact that the links in my center column are dead. When I switch the order of the two main wrapper divs around, the links are working in the center column but they are dead in the left and right columns

I started out using the Sticker action but it was not playing nice with the js in the FoxyCart code I’m using with the site

As usual I’m sure it’s contributed to some form of user error on my part - so any help much appreciated
Marcel

http://goo.gl/5ORwl


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Marcel,

The two div structures, #wrap and #nav-wrap, lay on top of your page
elements, blocking user interaction. I have illustrated this by taking your
source code and giving those two divs a semitransparent white background.
http://cssway.thebigerns.com/workbench/du_jour/marcel/visual.html

Switching the order simply puts your #contentwrapper above the navigation
elements, blocking them. Remember, html is layered – even when it’s
transparent it is there.

What you need to address is how you are using these wrapping divs – they
are all the width and height of the browser window, so their contents will
always be obscured by whichever is on top. Your wrapping divs should be
containers, as such need to be no larger than the space they are meant to
contain. This allows you to set the contained elements to shift and fill
within the container, not the other way around. Once your containers stop
overlapping, your problem will be solved.


There is another oddity, which does not cause your stated problem but I
find most perplexing. When I use the Safari Developer plugin to inspect
your source code, there is a large number of nested divs placed between the
opening body tag and the PageDiv – all with a display of none. However,
those div structures do not appear when using Safari’s ordinary View Source
command… how can this be?

Here is the extracted code:
http://cssway.thebigerns.com/workbench/du_jour/marcel/hidden.html


Ernie Simpson

On Mon, Jul 9, 2012 at 1:51 AM, Helveticus email@hidden wrote:

I’m stumped - I’m trying to have a page with 3 columns page is set to
align - none. The left and right columns are fixed to the top of the page
and the center one scrolls. I have 2 wrapper divs - one that is set to
fixed in window with the left and right columns as two inline divs one
floating left and the other floating right. I then have another wrapper set
to absolute containing the center column. So far this is all working a
treat except for the fact that the links in my center column are dead. When
I switch the order of the two main wrapper divs around, the links are
working in the center column but they are dead in the left and right columns

I started out using the Sticker action but it was not playing nice with
the js in the FoxyCart code I’m using with the site

As usual I’m sure it’s contributed to some form of user error on my part -
so any help much appreciated
Marcel

http://goo.gl/5ORwl


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie thanks for the sample, it’s funny I also added some transparent images in my files to see what is blocking the links - I could see problem but not the solution.

I got this to work now by placing the columns each in it’s own wrapper but it looks like it will only work on a page that is left aligned. when I select either “None” it stays the same as when the page is left aligned. When the page is “Centered” the divs that are fixed in window moves to the left and the centered column is flexible and moves when the browser window is enlarged.

Left aligned page - http://goo.gl/3ObJQ
Center aligned page - http://goo.gl/59ltQ

The odd code comes from the Foxy Cart modal box - once you add a product a modal box pops up with the shopping cart.

Marcel


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you Marcel for explaining the strange code - although I don’t
understand why it’s not in the Source Code View, but in the Element
Inspector of Safari.

If I have time, I will try to sketch out how best to achieve your design –
I believe it is quite possible to be done. I just feel you are
over-thinking the wrap paradigm. My opinion is the least amount of
structure to achieve the design is best. :slight_smile:


Ernie Simpson

On Mon, Jul 9, 2012 at 10:26 AM, Helveticus email@hidden wrote:

Ernie thanks for the sample, it’s funny I also added some transparent
images in my files to see what is blocking the links - I could see problem
but not the solution.

I got this to work now by placing the columns each in it’s own wrapper but
it looks like it will only work on a page that is left aligned. when I
select either “None” it stays the same as when the page is left aligned.
When the page is “Centered” the divs that are fixed in window moves to the
left and the centered column is flexible and moves when the browser window
is enlarged.

Left aligned page - http://goo.gl/3ObJQ
Center aligned page - http://goo.gl/59ltQ

The odd code comes from the Foxy Cart modal box - once you add a product a
modal box pops up with the shopping cart.

Marcel


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s probably being injected by JavaScript. I haven’t used FoxyCart before, but my understanding is that it uses JavaScript DOM manipulation to add its cart to the page, similar to the code in ScriptyLightbox2 that adds the overlay to the page during load:

var overlay = new Element('div', {id:'overlay'});
$$('body').first().insert(overlay.hide());

Walter

On Jul 9, 2012, at 12:03 PM, Ernie Simpson wrote:

although I don’t
understand why it’s not in the Source Code View, but in the Element
Inspector of Safari.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie, yep I have been banging my head on this thing for too long and I know I’m over thinking it - thanks for digging under the hood.

Walt I think you are right it’s very similar to SLB2.

Thanks for all the help

M.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think I have this booger sorted. I used the extended option (position:fixed) to get the left column to stick.

I’m going to build a few more pages and see how it goes.

M.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie, again thanks for the help - I got the site sorted - working as it should.

Cheers
Marcel


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options