Design Suggestions?

[PhunkyMonkey]

I am building a site for my church, and am having some troubles with the layout of the pages. I've got a banner across the top of the page, a side navigational bar, and a footer tacked onto the bottom. I am happy with the layout of those, it is the body that I am having troubles with...

The background of the pages is a light yellow (to match the color scheme), and then any information is placed in a white box with a black border. It seems to work well for some of the pages (http://www.northsidechurchonline.org/events/events.php), but the more I work with it, the less I like it.

One reason, after I add space around the white boxes, the border, the cellpadding and all, I have hardly any room to add picutres along-side text (http://www.northsidechurchonline.org/ministires/ministries.php). (The black is along the sides so that the page will be seen the same on either screen resolution)

Also, I would like to add in a lot of large pictures, where you can really see the details well. But there is no place to fit them well. See how they are just tacked onto the bottom here (http://www.northsidechurchonline.org/sundays/sundays.php)?

I like the look of the yellow, but should I just change it to white, or put the text on top of it? I also like having the block around the text, but it just doesn't look right to me. I could move the navigation to the top to buy some more space, but I think I would have even more design problems then.

Any suggestions would be very appreciated!

[Wassercrats]

Those three pages look good to me, but I'd reduce the font size of the menu, and I'd have the main section expand under the menu so you'd have more horizontal room.

[Randall]

I happen to like the boxes effect, particularly with the section headings on the events page (using that style throughout the site may make you more comfortable with the design). I did something similar with a special section of Employer #1's web site:

http://www.fairfieldctchamber.com/online/artscrafts/show-info.asp#policies

I know it's not easy to reconcile right-aligned images with "ragged right" text. But you could probably minimize the confilct by allowing some margin space around the image. Notice how the calendar graphic on the events page looks fine because it has built-in blank space? (On the other hand, a non-rectangular graphic like that would not work nearly as well on the left.)

The recommended approach would be using some CSS code rather than hspace or vspace. If it's easiest for you to work with, add style="margin: 5px 0px 5px 5px" to the <img> tag. Then you can play with the numbers until you get a comfortable fit (in the order top right bottom left).

Once you've done that, there are some more ways to make the graphics harmonize with the layout:
Add elements that reinforce the rectangular shape of the content area. I did this on the aforementioned site (not really aware of what I was doing) by using lots of horizontal lines that spanned the full width of the layout. But you don't have to go to the extremes I did to make it work, since the outside border does much of the work already. :wink: Full-justify the text so that everything aligns on the right edge. In HTML terms it would be <p align="justify"> (same applies to <td> tags). The CSS equivalent would be style="text-align: justify". Unfortunately, this doesn't work as well on the web as it does in newspapers and magazines, because there's no hyphenation capability. You can end up with very awkward spacing between words. Hope that helps a little. I think it's a nice design, so don't give up on it so soon. :smile:

Randall

[PhunkyMonkey]

I'm really glad to hear some positive feedback ~ I liked the design at first but was loosing confidence in it ;)

I added black borders around the large pictures on this page (http://www.northsidechurchonline.org/sundays/sundays.php), I think it looks a lot better.

"I'd have the main section expand under the menu so you'd have more horizontal room"
I would like to do this on the longer pages ~ I'm guessing there is no way to do this with html without creating a black line across the page. I can definently deal with the line, I would just have to make sure it is in a transition spot.

Randall ~ thank you so much for all of the information!! The code to add space around the pictures will definently come in handy ;)

[Wassercrats]

It could be done without the line. Can't look into it right now, but I'm almost positive it could be done.