In the site “Kalma Life” featured in the gallery on the Softpress site, there is a green background with a gray and white box that expands and contracts with the page. The text in the box is always confined to that space.
I’ve done the same thing on my site but the “box” is a graphic that I can’t help but click on and move whenever I try to edit something. Is there a way to lock the box so that you can edit “above” it?
I hope this is somewhat clear. My site is working fine but I’m sure I’m not doing this right. (More than one way to skin a cat). Any guidance or tutorial on how to create the background/page format (ala Kalma Life) would be greatly appreciated.
Sometime around 20/4/08 (at 18:50 -0400) Chod Lang said:
In the site “Kalma Life” featured in the gallery on the Softpress
site, there is a green background with a gray and white box that
expands and contracts with the page. The text in the box is always
confined to that space.
Could you perhaps post a URL to the site in question? I just took a
quick look at the Softpress gallery buy couldn’t see the one you
meant. I can think of possible solutions, but it really does depend
on the effect you’re after…
The Kalma site in question here: http://www.kalmalife.co.uk/ and it uses a tabled grid with a 10px white border on the outside of it. You could accomplish the same thing through table grid of your own.
Then you could apply a background color which you have now to the table and then just set the border width to that darker green you’re using on the outside.
I also don’t know if this is intentional but your gradient background image doesn’t tile properly horizontally, it has a black background on it’s sides. Also your logo is giving me a “not found” (files: index1a.gif) so I see nothing (viewed in Safari 3.1.1.)
Mitchell,
Thanks for the heads up on the gif file. As to the gradient, I don’t want the black on the outside but frankly don’t know how to solve the problem.
Overall, I think my difficulties arise from the CSS button. Frankly, I handled Freeway a lot better in 3.5 than 4. I just don’t get the CSS thing.
The thing I loved about Freeway before 4 was WYSIWYG. Now, I never know exactly what I’m going to see.
Guess it’s time to read the manual - cover to cover.
I think that site (Kalma Life) was made with the CSS button turned
off. Try this on a blank page and with the CSS button off:
Draw an HTML item at the top of the page (which should be centered).
This should be around 30-35 pixels high and as wide as the page and
will contain some navigation links (if you want them). Type out links
and style them before applying the links.
Draw another HTML item and make it as high as the page and around 20px
shy of each side, give this item a color and a border of around 10px
or so, give that another color.
That’s your page, you can now add anything you want inside this
item, this is something that you can only do post 3.5, in 3.5 things
had to overlap or be in-flow (in the flow of text).
The CSS button only really needs to be used in certain instances,
sometimes when you need things to overlap but not affect each other
but mainly when you want to make pure CSS layouts with no tables.
I hope this helps.
Joe
On 21 Apr 2008, at 04:11, Chod Lang wrote:
Mitchell,
Thanks for the heads up on the gif file. As to the gradient, I
don’t want the black on the outside but frankly don’t know how to
solve the problem.
Overall, I think my difficulties arise from the CSS button.
Frankly, I handled Freeway a lot better in 3.5 than 4. I just don’t
get the CSS thing.
The thing I loved about Freeway before 4 was WYSIWYG. Now, I never
know exactly what I’m going to see.
Guess it’s time to read the manual - cover to cover.
The background situation can be handled simply by cutting your image vertically to the point where the pattern repeats itself, obviously named tiling. Then in the inspector palette for the page itself, apply the background image and set vertical tiling to top and horizontal to tile and it should tile out. Now the bottom of the gradient should be your background color you select for the page, so it has that seamless look.
The color looks like #afada9 for the bottom-est part of the gradient. If it gets complicated I’m sure maybe the dots being removed at the top won’t matter much unless there’s some un-revealed sentiment.
Joe,
Your suggestion really cleared things up for me. thanks. I tried it the way you said and now I see how it works.
Mitchell,
I also tried you tip. The horizontal tiling works great except that I now have a black line running top to bottom at about 800px? Could this be caused by my page setting. With these new larger monitors that everyone has, what is the optimum setting for horizontal sizes? 800 seems was to small for my 19" monitor.
I think the size is fine, it’s really based off your choice on how you want it to look. I usually design my sites out at like 1000px wide, followed by a whatever height. Most people use 1024x768 (I would imagine) and 800x600 is somewhat obsolete.
The problem with cutting your background is that you got a dotted pattern at the top and it’s got ‘dots’ across and then a mixed ‘dot’ pattern below it. Makes a hard cut.
The black line may be appearing because your background color is set to ‘black’ and that may be coming through. If you set it to the bottom gradient color which i said was like #afada9 and then tiled your image horizontally the gradient would blend from the darkish green to the lighter color seamlessly.
