Background Shadow

Hi There

I’m trying to create a background shadow like the one on this website (shadow on a green background).
http://www.cyclingevers.nl/fietsen.html
Is there an easy way to do it in Freeway 4?

Thanks very much
Matthew


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

The easiest way to make this particular layout in Freeway 4 or 5 is
to make a GIF image in Photoshop or the local equivalent that is 25px
tall and page width + shadow width x 2 + 10px or so for side-
bearings. Draw a centered box and fill it with your desired page body
color, then fill the background with your desired (green) background
color. Add an intermediate shadow layer and fill it with black and
give it a big blur, and set it to Multiply mode. You should see what
appears to be a “slice” through the middle of this page you like.

Now, if you set this to be your page background image, and set a
matching green to be your page’s background color, and set the
background image to tile vertically and center horizontally, and set
your page to center horizontally, you will have this precise page
layout. Note that you won’t see the shadows in Freeway’s design view,
but you will when you preview.

Walter

On Nov 24, 2008, at 9:09 AM, Matthew Ball wrote:

Hi There

I’m trying to create a background shadow like the one on this
website (shadow on a green background).
http://www.cyclingevers.nl/fietsen.html
Is there an easy way to do it in Freeway 4?

Thanks very much
Matthew


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

Hi Walter
Thanks very much - I’ve been trying to figure out how to do that for 3 days now. Brilliant!
Best wishes
Matthew


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

Of course, the approach presented here works only if you avoid using a vertical gradient as a background. The following page presents an approach that gives you a page shadow atop a vertical background gradient:

http://www.dynamixlabs.com/shadow.html

It also has a browser sniffer to exclude MSIE 6 from seeing the PNG shadow images.


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

Well, I’ve had zero success with the dynamixlabs.com example. No surprises there since I’m brain dead to code. But I’ve not found any other web page with a better solution, so I’ve focused on this exclusively.

To get a page drop shadow over their background gradient, they used PNGs. To get the left/right edges of their sample page to have a shadow, they used this code:

#shadow {width:784px; background: url(images/middle-shadow.png) repeat-y;margin:0 auto;}

They then referenced that code in the main page DIV. In Freeway, I assumed that page div was "div id=“PageDiv…” so I used Source Code Snooper to edit that div line to read:

<div id="PageDiv" width:800px; background: url(http://www.dynamixlabs.com/images/middle-shadow.png) repeat-y;margin:0 auto;>

(Temporarily hotlinking that PNG for testing purposes.)

But all that does is just break up my page and insert a single (almost invisible) non-repeating instance of that PNG (i.e., no page shadow).

The page I am wanting the drop shadow on is here (Source Code Snooper hacks currently removed): http://kiramek.com/test/

What am I missing?
And how can I avoid using Source Code Snooper?

Thanks,

James Wages


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

Here’s another example site, showing exactly what I am trying to accomplish in Freeway:

http://www.realmacsoftware.com/littlesnapper/

The background is a vertical gradient, and each page element has a faint drop shadow around each side and bottom. I must say this implementation is far superior to what is shown on the dynamixlabs page.

Any ideas on how to go about this would be greatly appreciated.


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

You’re very close, but you left off the enclosing style attribute:

<div id="PageDiv" style="width:800px; background: url(http://www.dynamixlabs.com/images/middle-shadow.png 
) repeat-y;margin:0 auto;">

Walter

On Jan 26, 2009, at 1:24 AM, JDW wrote:


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

So close, but yet so far!

I wish your enclosing style attribute was the cure, Walter. But my page is still experiencing the same trouble it was yesterday, even using your revised line of code. Once again, I used Source Code Snooper to edit the PageDiv exactly as you have it. Even so, these two problems still occur:

  1. The page content is horizontally shifted/broken up.

  2. There is no shadow in the left/right sides of my page.

I took a screen shot of the entire browser window, showing the problem. I also have the source code listed, which shows I edited the PageDiv exactly as you instructed:

And if you have a good eye, you can even see the single instance of the shadow graphic appearing to the top of my arrow cursor in that screen shot. In other words, the tiny little (almost impossible to spot) graphic linked here:

http://www.dynamixlabs.com/images/middle-shadow.png

Further ideas would be appreciated.

Moreover, I would love to hear everyone’s thoughts on how to implement the superior page shadowing effects displayed on this site (which is far better than the dynamixlabs site):

http://www.realmacsoftware.com/littlesnapper/

We shouldn’t let competing web design tools capture all the glory for such design magic! (And I certainly wish we didn’t have to resort to Source Code Snooper hacks to accomplish it either.)


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

one thing to make sure is that the shadow image is the correct size.

I place my shadow around my PageDiv as a separate DIV.

if the width is not right it will not display right. use FireFox and the FireBug plugin to test it…


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

Brian, thank you for the speedy reply. (I appreciate that because it’s still daytime here in Japan, and I am still in the midst of working on this problem.)

First, it is vital I reiterate that I am brain dead to code. Indeed, such is what led me to Freeway 2.0 back in 1999. I’ve been stuck on Freeway ever since. As such, I enjoy letting my “visual designer” spring forth and produce, by and large, WYSIWYG design in Freeway. Adding “Extended…” attributes are doable for me, but I certainly do not get excited about it. I consider it an annoyance that I must endure for now. Source Code Snooper is truly a last resort for me because I really don’t know what I am doing when it comes to hacking page code.

Because of this, FireFox and FireBug are not really that helpful to someone like me. So that is mainly why I am discussing my various troubles at length in this forum.

Freeway 5 opens many doors to CSS layout that wasn’t possible in earlier versions. However, those CSS layout doors are half closed to people such as myself who design “visually” rather than by code. I therefore consider any adding/tweaking of code “workarounds” for Freeway’s existing GUI, until it can incorporate basic functions in a rather graphic way (as MacWrite did for based word processing back in 1984, blowing away DOS and CP/M programs of the day where codes had to be added and there was an utter dearth of WYSIWYG).

All of the things I have been discussing on FreewayTalk over the past week are what I consider “basic things in CSS that any web designer would want to put on his or her page.” It’s fundamental web page design, not a specialty application like a web database. For example, who doesn’t want a simple yet clean-looking search field that looks largely the same in most of the major browsers? Who doesn’t want to spruce up something with a drop shadow? Most all of us do. We just don’t know how to go about it on the web using manually written code. That’s why we embrace Freeway. Yes, some of the Freeway faithful have gone off to RabidWeaver and other competing template-based solutions to more easily achieve “the fundamentals.” But I still have a great love for Freeway, and I want more power (albeit, “WYSIWYG power”) that only Freeway can offer.

Now with all this in mind, please allow me to offer you a more direct reply to your post…

I tried a separate DIV, but that didn’t work at all. Indeed, trying a separate DIV was one of the first things I tried, and I came back to PageDIV when that didn’t work. But as I describe above, PageDIV is giving me troubles too.

Another consideration is, if I work hard and finally get the dynamixlabs example to work on my page, the fact remains that I still like the realmacsoftware.com page shadows better. But I am not about to use their software to go about it! So I am curious how we all might go about this in Freeway 5. (I have taken the time to write so much detail because I know SoftPress is listening, and they may have something to add. I do not seek a solution for “James Wages alone” but for all Freeway 5 users.)

Many thanks,

James Wages


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

Could you post a link to the offending page? I have an idea, but I
won’t know if it’s the right approach until I can view the page in
Xyle scope. In many Freeway layouts, the PageDiv actually has no
content (all of its children are absolutely, rather than relatively,
positioned, and thus it has no height at all. If you view it in Xyle
scope, it will refer to it as “Collapsed layout element” in gray when
you select it in the source list. If that’s the case here, then there
may yet be a way for you to have your cake without resorting to a full-
on “box model” relative layout.

Walter

On Jan 26, 2009, at 9:58 PM, JDW wrote:

So close, but yet so far!

I wish your enclosing style attribute was the cure, Walter. But my
page is still experiencing the same trouble it was yesterday, even
using your revised line of code. Once again, I used Source Code
Snooper to edit the PageDiv exactly as you have it. Even so, these
two problems still occur:

  1. The page content is horizontally shifted/broken up.

  2. There is no shadow in the left/right sides of my page.

I took a screen shot of the entire browser window, showing the
problem. I also have the source code listed, which shows I edited
the PageDiv exactly as you instructed:

http://www.kiramek.com/21test95/pagediv_woes.png

And if you have a good eye, you can even see the single instance of
the shadow graphic appearing to the top of my arrow cursor in that
screen shot. In other words, the tiny little (almost impossible to
spot) graphic linked here:

http://www.dynamixlabs.com/images/middle-shadow.png

Further ideas would be appreciated.

Moreover, I would love to hear everyone’s thoughts on how to
implement the superior page shadowing effects displayed on this site
(which is far better than the dynamixlabs site):

http://www.realmacsoftware.com/littlesnapper/

We shouldn’t let competing web design tools capture all the glory
for such design magic! (And I certainly wish we didn’t have to
resort to Source Code Snooper hacks to accomplish it either.)


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

Walter, I uploaded the horizontally shifted/broken page here:

http://www.kiramek.com/test2/

I also emailed you my FW5 doc as well.

Many thanks!


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

James, sorry for not replying to this – it must have slipped beneath my RADAR somehow.

I can see the answer in Xyle scope, as I predicted, but I can’t understand why it’s happening.

The PageDiv (the mother of all elements on a Freeway page) is not set to position: relative, so any position: absolute children inside it are positioned relative to the body tag, not the PageDiv.

Strictly speaking, this shouldn’t be possible. Freeway always remembers to do this. So I’m not at all sure how it is happening in this case.

Please cut this document down to a single page, e-mail or Senduit it to Softpress Support, and see if they can determine from the entrails what could be going wrong here.

I wish I could help, but it would involve the Extended dialog, and it would be a hack, and there’s no reason why you should have to do that – getting this right is Freeway’s job, and I’ve never see it fail in this manner.

Walter


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

I just read back to the beginning of this thread, and realized that you were using Source Code Snooper. So forget all the unkind things I said about Freeway. The fault is mine; I left the position:relative out of the code I gave you. Try this:

<div id="PageDiv" style="width:800px; background: url(http://www.dynamixlabs.com/images/middle-shadow.png ) repeat-y;margin:0 auto; position:relative;">

Walter


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

Walter, sorry for my delayed response to your delayed response. :slight_smile:

I just tested your revised code (i.e., the addition of “position:relative;” to my Source Code Snooper code). Although it fixes the shifting, the shadow is a mess.

I used your position:relative fix and confirmed it in the browser. No more shifting. Superb! BUt the joy was short-lived as I cannot see the page shadow at all.

I modified the PNG in Photoshop to be much darker, and instead of being only 1px tall I made it 50px tall. I then hosted the PNG file on my own server, and changed the URL in Source Code Snooper accordingly. But I still could not see the shadow.

I then changed the PageDiv style from width:800px to width:824px. I can now see the shadow, but only on the right side of the page. And there is a gap between the right side of the page and the shadow. AND, the shadow is not tiling vertically.

You can see the PNG shadow I link to here:
http://www.kiramek.com/21test95/middle-shadow.png

You can see the page here:
http://www.kiramek.com/test3/

I changed many of “800” entries to “824” and other values in Source Code Snooper, but for the life of me, I cannot fix this problem with the shadow.

Please advise. (And if there is an easy fix without my having to resort to Source Code Snooper at all, please let me know!)

Thank you!


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

I had a brief play with this in a text editor, and while I can get it
close to what you want (by adding left and right padding to the
PageDiv instead of extra width) the combination of table and layer
positioning is making it very hard to get the page to be any
particular height. I have to believe that there is another way to do
this, that it’s really quite simple to do in Freeway. It’s just hard
to see with all these absolutely-positioned DIVs around in here.
Please cut this entire document down to a single page and send it
over. It’s a lovely layout, and it should not require Source Code
Snooper to make it work.

Walter

On Mar 18, 2009, at 2:20 AM, JDW wrote:

Walter, sorry for my delayed response to your delayed response. :slight_smile:

I just tested your revised code (i.e., the addition of
“position:relative;” to my Source Code Snooper code). Although it
fixes the shifting, the shadow is a mess.


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

Sorry for injecting myself in here, but I am a bit confused about the problem. Normally your drop shadows would be created with a single background graphic applied to the page div. Did this not work, or am I missing something in the conversation?


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

There’s two backgrounds needed here, one to make the top to bottom
gradient and the other to make the shadows at either side of the inner
page.

Walter

On Mar 18, 2009, at 2:35 PM, chuckamuck wrote:

Sorry for injecting myself in here, but I am a bit confused about
the problem. Normally your drop shadows would be created with a
single background graphic applied to the page div. Did this not
work, or am I missing something in the conversation?


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

Hmm… I would do this with one background on the page div still just for the drop shadow. Then use a gradient graphic as the background on a central div that is page width minus the drop shadow and use padding to center it.

Of course…I would also use a box model, but we’ll ignore that.


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

That would introduce so many issues with the OP as to be Sysiphean.

Walter

On Mar 18, 2009, at 2:46 PM, chuckamuck wrote:

Of course…I would also use a box model, but we’ll ignore that.


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