[Pro] CSS on top of jQuery error

Freeway
1

I have a hand coded css menu and a jquery image slider. When the menu is below the slider in the stack within FW, they are both positioned correctly, but I obviously want the drop downs to sit on top of everything, so when I move the menu to the top of the stack (bottom of the items in the navigation of FW), the menu works, but is now fixed in window.

I have had a look through the css of both the menu and slider and also the javascript, but no matter what I change, the menu always remains fixed in window unless I make the slider the top item.

Has anyone come across this before? or better still have any suggestions how to correct it?

Thanks

http://clients.rla.co.uk/solentnightz/

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

2

It’s a pretty simple fix Nathan… the positioning styles for the menu
wrapper and the menu itself are all that need tweaking.

<div id="nav-wrapper" class="f-x2" style="position:relative;

top:-310px; margin:auto; width:960px; z-index:6; overflow:visible;">

<ul style="position: absolute; right:10px; width:auto;">

The relative positioning makes the wrapper match the width and
position used for the rest of the page, while the absolute positioning
of the menu guides its placement within the wrapper. You should be
able to easily add these attributes via the menu > Item > Extended
interface.

Best wishes,

Ernie Simpson

On Mon, Sep 3, 2012 at 1:03 PM, BigG email@hidden wrote:

I have a hand coded css menu and a jquery image slider. When the menu is below the slider in the stack within FW, they are both positioned correctly, but I obviously want the drop downs to sit on top of everything, so when I move the menu to the top of the stack (bottom of the items in the navigation of FW), the menu works, but is now fixed in window.

I have had a look through the css of both the menu and slider and also the javascript, but no matter what I change, the menu always remains fixed in window unless I make the slider the top item.

Has anyone come across this before? or better still have any suggestions how to correct it?

Thanks

http://clients.rla.co.uk/solentnightz/

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

3

Thanks Ernie

I selected the nav-wrapper and entered these details in the div style area of the extended dialogue:

position: relative
width: 960px
z-index: 6
overflow: visible
margin: auto
top: -310px

And the menu now appears half way down the page.

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

4

The relative positioning makes the menu move around when the browser window is changed.

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

5

Okay, sorry. I had not properly divined your page structure. Let’s try again.

Since you’ve changed the page from my last visit, let’s first try
giving yourself a visual aid to understand what is happening. Color
the nav-container box red… that will show you the position of the div
including layering.

You can now easily see that the div is still behind the slider. Let’s
increase the z-index attribute value to something indisputably above
the slider.

z-index:666;

Now, you have tried to position the menu by positioning the container
div. I disagree with that approach. Let’s first match the horizontal
value of the wrapper div which contains the slider.

position:absolute; left:

Then let’s position the menu list separately,

position:absolute; right:66px; width:auto;

Right, so that should text size grow, it expands into the page, not
out of it. Width so that the menu doesn’t break up when text is a bit
larger. I would also add a margin:0; attribute to clear out menu list
margin and use Walter’s Remove Paragraph Tags action on the
nav-wrapper – but those are more personal choices than functional
ones.

I would have built the structure differently, put the nav-container
inside the wrapper div so as to inherit it’s page placement then use
position:absolute to adjust only the vertical position of the
container. It’s important to remember that the unordered list can be
positioned with css too, and in fact doesn’t need an extra wrapper or
container div - just that in Freeway Pro it’s easier to visually
manipulate container html items.

Best,

Ernie Simpson

On Tue, Sep 4, 2012 at 5:00 AM, BigG email@hidden wrote:

The relative positioning makes the menu move around when the browser window is changed.

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

6

Thanks Erns that does make a lot mor sense now. The background colour is a neat trick to see what’s going on. Thanks

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

7

Have just tried it in IE8 and it doesn’t work so have to come up with another menu annoying!

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

8

I think if you really care about IE8 you should adopt a more literal
(less css-based) layout. Don’t be as concerned about semantics or
html5 enhancements…

Logically, you cannot design for modern browsers and then replicate
that experience for legacy browsers. So the logical design path is to
design for IE8 users, then replicate that experience for users of
modern browsers.

Maybe that’s a separate topic. :wink:

Try and identify the parts of your page which do not work in IE8 and
rebuild them with parts that do. The best way I can think of - and
this may be practical going forward - is to first create wireframe
sketches of your page, then build them simply with multicolored boxes
using dummy content (not much, just enough to keep them from
collapsing) so that you can first test the layout structure in
different browsers. This way, you can separate content issues (like
menus) from layout issues (floats and positioning). This is very
different way of working than the Print world taught us for building a
page, but web design has far more pitfalls than print design.

Best of luck to you BigG

–
Ernie Simpson

On Wed, Sep 5, 2012 at 8:58 AM, BigG email@hidden wrote:

Have just tried it in IE8 and it doesn’t work so have to come up with another menu annoying!

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

9

I have a different philosophy here, and I think it’s related somewhat. I believe you should design the content structure first, and decorate it in a gracefully-degrading manner. For example, round-rects are all the rage, so I design a page with square corners, then add those rounded corners with CSS3. IE sees square corners, but IE sees the CONTENT, same as the other browsers, so I don’t consider the loss of a grace note to be the end of the symphony.

Starting from the order of elements to the choice of container types, you can influence the quality of the experience for all visitors, sighted and blind (like Google), and improve your ability to communicate your message to an audience. This type of thinking is orthogonal to the usual decoration-centric view of graphic design. However, I hold design’s feet to a different fire, and believe that you (capital D) Design when you organize information so that it can be appreciated. Sometimes that’s a clever choice of headline font, but sometimes it’s just a darn good job of editing.

Walter

On Sep 5, 2012, at 10:21 AM, Ernie Simpson wrote:

Logically, you cannot design for modern browsers and then replicate
that experience for legacy browsers. So the logical design path is to
design for IE8 users, then replicate that experience for users of
modern browsers.

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

10

Thanks - good advice, and makes total sense.

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