Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

When designing in Adobe Edge Reflow, how do you create divs that start below the fold? Using this site as an example, after you created the top level purple screen, how would you create and position the next screen down with the cream colored background?

share|improve this question
    
It's not that it starts 'below the fold' but that the div above just happens to be as tall as your screen. Remember, there is no magic 'fold' in a web page, so it will always be somewhat arbitrary where you decide it is. –  DA01 Jan 13 at 17:19
add comment

1 Answer

up vote 2 down vote accepted

As DA01 said, it's about making the content above equal to the height of the viewport.

I haven't used Edge Reflow (and only mucked about a bit with a version of Edge when it was in beta), so I don't know if there are any Edge Reflow specific commands to make it happen. I'm just installing it now to have a play with, and see if I can discern an answer.

Meanwhile...

What you want done can't be done with just CSS. You have to use Javascript.

In jQuery, you can get the height of the viewport with:

var viewportHeight = $( window ).height();

Then you assign that to the height of the element you want:

$( "#divAboveTheFold" ).css( 'height', viewportHeight + "px");

In the example above, you would've assigned an id of "divAboveTheFold" to the element in your html markup that you want to take up the full height of the viewport at the top of your page.

If you have any detailed questions about how to use Javascript / jQuery, you're probably better off searching/asking on StackOverflow.

Things to bear in mind:

  • If you have top or bottom padding applied to the #divAboveTheFold, then you have to subtract them from the viewportHeight before you assign it to #divAbovTheFold.

  • You would want to make sure this resizing happens not just when the page loads, but also on browser resize.

  • If #divAboveTheFold has more content than can fit vertically in the space you've allowed, then the content will be cut off.

  • Not all devices report the correct viewportHeight, such as Mobile Safari.

There are probably other issues you'll run into as well.

Unless making your top div the height of the viewport is mission critical to your design, I'd probably just leave it.


UPDATE

I've just had a look at Edge Reflow. It doesn't support Javascript, so the answer to your question is:

You can't do what you want to do in Adobe Edge Reflow.

share|improve this answer
    
It doesn't support JavaScript!? I find that a) sad, but also b) believable. Sigh :) –  DA01 Jan 14 at 5:42
    
Edge Reflow seems to be used purely for generating CSS (with a focus on responsive design). Edge Code does HTML, CSS and Javascript. The reason they've broken it up into two programs is because... well... um... yeah, no idea :) –  Graham Nicol Jan 14 at 5:53
    
Huh. Maybe I should play with it again, but I can't say it sounds promising. Actually sounds like a step backwards from DreamWeaver (which was never that great at code anyways...) –  DA01 Jan 14 at 5:54
    
I had a quick look, and it apparently integrates with Photoshop to allow you to make quick 'live action' comps from your PS designs. html.adobe.com/edge/reflow/photoshop-plug-in.html. Although I don't think I'd use it to generate production code. –  Graham Nicol Jan 14 at 6:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.