Need a webpage that doesn't start at the top of the window.

**derwalkerhaus** · 12 September 2014, 12:38 AM

Hello all.
I've got WD 10 Premium 64 and I'm trying to build a webpage that has the page starting below the top of the browser window. What I'm trying to do is to have the Pasteboard Background visible at the top of my webpage before the page begins. I've tried to unlock the Page Background layer and drag it down (which works), but whenever you need to change the size of the page, it jumps back to the top again forcing me to unlock it and move it back into position.

If this isn't possible, then I have another option, but another problem.

I could remove the rectangle on the Page Background and simply have it on the bottom of my MouseOff layer, but since the rectangle has a glow effect, every time you have to stretch the rectangle when you change the size of the page, the stretching affects the amount of the glow. I don't know if this is a common problem or just some setting I don't have turned on. However, I can simply take the glow effect off and re-apply it, but I wish there was just a way to keep it from changing the glow. I'll attach an example so you'll see what I mean.

Any help would be awesome!
Thanks

**zaphodeist** · 12 September 2014, 01:06 AM

To create a gap between the top of a page and the browser window.

Add this script to the Website Properties > Website > Head area:

Code:

<style>
#xr_xr {
margin-top: 16px;
}
</style>

With the new responsive sites the code is different ...

Code:

<script type="text/javascript">
document.getElementById('xr_xr').style.top="16px";
</script>

**gwpriester** · 12 September 2014, 01:07 AM

Drag the cross hairs (see attachment) to indicate the top of the page.

To modify the page rectangle, open the Page & Layer Gallery, click the red lock next to the Page Background layer. This unlocks the layer and you can modify the page.

Lock the layer when you are finished.

**derwalkerhaus** · 12 September 2014, 01:24 AM

Thanks for the quick replies. Sorry, but that's not quite fixing the problem. I'm able to modify the page like priester suggests, but the problem is when you have to adjust the page afterwards that the page rectangle moves back to the top of the page. I've attached the same file with what happens to it after adjusting the page height. I have a feeling it's probably not going to work and I haven't tried the code fix yet. I will probably have to use my second option with the Page Background moved to the MouseOff layer and just have to deal with the glow effect changing. Is there anyway for the glow effect NOT to change when you scale an object?

Much thanks

**zaphodeist** · 12 September 2014, 01:35 AM

I would leave the background layer locked if I were you. Try the code solution first at any rate. Gary is of course correct but there can be problems if there are more than one page and of different sizes.

**zaphodeist** · 12 September 2014, 01:43 AM

Attached is the file showing the 16px gap using the first code

New-Page-background_[EDIT].web.xar

EDIT You can change the glow by CTRL+clicking on it to select it

**derwalkerhaus** · 12 September 2014, 01:56 AM

The code works nice, but not for this particular design. I'm not very good at asking questions on forums. Not the social person my wife is. Here is a screenshot of my design concept i did on Graphic Designer. Hopefully it might help explain what I'm trying to do. The issue wouldn't be such a problem if it wasn't for the background image that is intended to Fit The Browser window. Here in the screenshot the yellow page comes almost half way down the browser, but the navigation is at the top with the background showing through.

**derwalkerhaus** · 12 September 2014, 02:14 AM

Ok, I'm going with Plan C...
I changed the yellow page to get rid of the drop shadow and just use a thin black line instead. Now I can just make a transparent Page Background and still have the floating graphics. But much thanks for everybodies input. It is greatly appreciated.