locked
absolute positioned div messing up my dynamic column lengths RRS feed

  • Question

  • Hi Folks

    My website uses a 3 col CSS layout with banner and footer, based on the standard template in EW4. The column length changes dynamically depending on the content.

    I want to add an absolute positioned div (layer) around a table so I can use behaviors to set visibility to on/off. (There will be other tables of the same size underneath it and so the tabs on the top will control which table is displayed.) The test page is http://www.stratfordac.co.uk/roadRunningShakespeareTest.html 

    The problem is it breaks the dynamic column length and I get an ugly overlap of the column and the footer. I realise the problem is the absolute positioning takes the table out of the flow of the page, but there must be a way to accommodate layers within dynamic length columns? I've had a search on this forum but couldn't find an exact answer.

    Your usual specific help would be much appreciated

    Thanks

    Steve

    Thursday, March 24, 2011 11:26 AM

Answers

All replies

  • Two thoughts: 1) can't you postion it relative to the container it's in? and 2) can't you toggle the visibility of the table itself?

     


    Ian Haynes

    EW V4 Add-Ins
    EW resources, hints and tips
    • Marked as answer by Steve Kirk Friday, March 25, 2011 11:15 AM
    Thursday, March 24, 2011 3:58 PM
  • "... there must be a way to accommodate layers within dynamic length columns?"

    There must be? What makes you assume that?

    And have you given a thought to accessibility? That is, what will happen when a vision-impaired or high-res screen user resizes the text and the content in those layers overflows.... ?

    Layers are virtually never the solution to a design objective. With the exception of flyout/dropdown menus, they are almost never required, and are not recommended unless one has a thoroughgoing grasp of their consequences upon page flow, especially in conjunction with dynamically-resizing elements, which amounts to a recipe for disaster.

    Now, I looked at your markup, and you are correct—since the div #prizes10 is styled with AP, it is removed from the flow and its #pageContent containing div doesn't know it exists. Therefore, the container sizes itself to fit the content it knows is there. Remove the AP, and the container expands to contain the table. Furthermore, it responds correctly when text-only is resized, maintaining accessibility.

    <edit>
    Whoops! It occurred to me that I had only been looking at the bottom, table area of the page when checking accessibility. So, I went back and took a look at the rest. Hate to have to be the one to tell you, Steve, but whether one increases text size in FF or IE, your header is all grapped up. In IE, just use View|Text Size|Larger (not even the biggest setting) and watch what happens to the header. In FF, set View|Zoom|Zoom Text Only, then hit Ctrl-+ just once, nowhere near what a vision-impaired user would do, and the header goes into the crapper there, too.

    In a real-world scenario, a vision-impaired visitor, or one using a small, high-res screen (think netbooks, tablets, small laptops, etc.) will resize the text much more than that, and your page must adjust to accommodate that. You need to get the idea out of your head that you are in control of the user experience. This is the Web, not print, and the visitor is free to change the viewing conditions at his discretion, not yours.

    Here's the problem: See that 110px height on the #mast div? Yeah, well, there's your problem. Setting a fixed height on any container element containing text is a no-no. Remove it. "But," you say, "when I do that the #bg div below, with the header image, jumps up there and covers it up!"

    Yes. Yes, it does. That is because both your logo and the table in the #mast div are floated. Floated elements are first positioned, and then, just like AP elements, removed from page flow. The #mast div doesn't know it has any content, so it collapses and the #bg div moves up to fill the space.

    To resolve this, simply add a clearing element following the table, before closing the #mast div. That will alert the #mast div (actually, the rendering engine) that, yes indeed, there is content in #mast div, and it will expand to fit that content, pushing ol" #bg back down where it belongs.

    Just add this

    <div style="clear:both"></div>

    after the <table> and before the closing </div> of #mast, and you have your clearing element.

    You still have issues with your menu when text is resized, and your contacts table will wrap below the logo when resized. That is because of the nature of floats (which you really need to learn about). You can stop that by removing the float:right on the table (which will also obviate the need for the clearing element, BTW) and assigning it a left margin sufficient to clear the logo. Now, as text is resized, the table grows in height without wrapping below the logo, and all is well in Bostontown. And in Stratford-upon-Avon, one would hope. You still need to resolve your menu issues, but using the information above, that is left as an exercise for the reader... ;-)
    </edit

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Thursday, March 24, 2011 5:01 PM
  • Hi Ian

    Thanks for the reply.

    I thought that a layer had to be an absolute positioned div (ref. Expression Web 4 In Depth by Jim Cheshire and other books) and I wanted to use layers to use the layers panel and make my job easier. But I've just changed it to relative positioned and surprise, surprise, it still appears in the layers panel! Which is good news as it solves my layout problem but leaves me bemused and asking the question, what does constitute a layer?

    And I did think of using the table as the entity to toggle the visibility but as I wanted to use the Interactive Buttons for tabbed navigation and was trying to avoid using the table for layout (I'm on a strict CSS only diet :-), a div seemed the right thing to do.

    Cheers

    Steve

    Friday, March 25, 2011 11:14 AM
  • Hi Scott

    Wow, thanks for the detailed reply and for obviously taking the time to pick my webpage apart. This kind of critique is really helpful to understand what works in practice and what the pitfalls are.

    Anyway, I'll need to try out your suggestions and really get my head around what is going on with these positioning issues. But just to answer your first point, as I've alluded to in my reply to Ian, the steer I was getting from the books I've read on EW4 and the fact that it has a layers panel built in, was that layers were a 'good thing' and a common way to handle navigation and make a page a bit more dynamic. Now Ian has highlighted that the layer can be relative positioned it gets round my initial issue. But does it solve the accessibilty issues you raised? Or would you recommend a totally different approach to revealing/hiding stacked divs?

    By the way, I've just tried to change the text size in IE9. No text size button! Am I missing something?

    Thanks

    Steve

    Friday, March 25, 2011 11:25 AM
  • You need to access the menu in IE 9 to change text size. Use the ALT key to display the menus then under the View menu > Text Size (or similar, I'm not on a computer with IE 9 right now to check), make sure you don't use "zoom" which increases the size of everythign so you won't see what folks with large font settings in their OS options see.

    As for "layers" aka absolutely positioned elements, they are deceptively simple so many people write books with that method first and only as you get further into the lessons do they bring up the drawbacks of using absolutley positioned elements. They have their place BUT they can also be very fragile and difficult to work with properly as you've discovered.


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    Friday, March 25, 2011 6:07 PM
  • Hi Scott

    I've added the clearing div and now my header logo and table seem to size 'correctly'. (www.stratfordac.co.uk)

    I'm not clear on how or why to change the contacts table, though. If the user maximises the text size, isn't in better to have it wrap below the logo rather than overlay it or overrun the right margin? Also, from a design POV I want the table to be 'right aligned' with the wrapper div so how can I do this without using a float right? If I just add a left margin, it will start the contacts table from a consistent point but the right margin will shift depending on the text and window size?

    Sorry, I need a bit more explanation to really grasp this one.

    Thanks

    Steve

    Monday, March 28, 2011 11:02 AM
  • No need to change the table if you don't want to. I just mentioned the left margin solution in case you wanted to maintain the position to the right of the logo. If that doesn't matter to you, no problem. BTW, you should note that with the float:right, when the user maximizes text size, it overruns on the left. Not sure that that is that much better than overrunning on the right, although having the full width of the header means that it happens later than if the logo width is taken into account.  ;-)

    You might also give some attention to both your horizontal menu and your sidebar calendar, both of which overlay main body content when resized.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Monday, March 28, 2011 4:24 PM