Topic: Menu question and more!

Hey guys!

I've got a new side project that I am working on (I think I have a problem with too many side projects) that I really want to do correctly from the get go.  So, being a novice to a lot of this stuff, I am wondering if anybody here can gently nudge me in the right direction.  I'll start with the site mock-up, you can view it by going to www.ericgranata.com/dj/dj_site.jpg.

The idea of the site is to provide a place for people to ask "Jesus" anything.  Much like Dear Abby.  When someone submits a question it gets e-mailed to a volunteer who provides a scripturally accurate, opinion reduced answer to the question.  The questions and answers are collected on the front page as shown and paginate after 10 or so sets of questions and answers.  A search function allows for key word searching through the collected dialogue.

I'm wanting to keep this simple.  I'll probably use EECore for the CMS unless someone has a better idea.  The only feature this will lack is the ability to e-mail the inquirer when his answer is posted.  Obviously I'll need to spend some time thinking about functionality.

NOTE: I am not asking for anybody to write my CSS.  Just guide me in the right direction as far as technique goes.  If I have a question about properties or nesting I will do as much as I can on my own to figure it out.  I think it is better for me that way.

MY FIRST QUESTION IS:
For the menu (which will stick to the top right of the page) should I use sliced up images to handle the rollover or should I use something like a list?  I'd really like the menu to have the look it does now or something close to it.  Once I have that much figured out I'll move on to some trickier stuff (for me at least).

I really appreciate this community.

You wanna get nuts?  Let's get nuts!

Re: Menu question and more!

granata wrote:

When someone submits a question it gets e-mailed to a volunteer who provides a scripturally accurate, opinion reduced answer to the question.

An interesting concept.  I wonder if it's achievable smile

Check out Listamatic

Also, I have done a similar looking menu on this page feel free to check out the CSS and HTML involved there.

Re: Menu question and more!

@open_hand: Thanks for the input.  I'll be sure to update the community with updates on the success of the concept.  If it doesn't work, at least I'll still have a super sweet domain name.  Your menu looks good and I vaguely remember using Listmatic once.  I wonder, should I make the menu container (white shape with greenish shadow) a single image and place the list generated (would that be the correct term?) menu on top of that?  Would it be possible to get the rounded corner on the About button?

I am suspecting the answer is yes to both questions.  /me Googles for rounded corner techniques.

Last edited by Granata (2006-01-11 14:27:52)

You wanna get nuts?  Let's get nuts!

Re: Menu question and more!

Hi Granata

First off I like that site a lot - it looks real easy to use! If I was doing a menu like that I'd make a div that would hold the menu and create a single image of the menu container which I would set as the background image of the div. I'd make this image slightly 'higher' than needed so that if someone resizes the text it would 'grow' with the text. I'd then put the links in a list. Use css to make the  individual <a> tag a block and then just use the height and width attributes to position the links over the image. I'd then use css to do the background-color on a mouseover.

Having read this through I realised it doesn't make much sense! www.alistapart.com has some great tutorials on lists which I found very helpful

mrbelfry

Re: Menu question and more!

@mrbelfry: Thank you for the compliment.  Last night I started the CSS for the menu and I did place the menu background as the nav container's background image.  So I guess my thinking was on the right track.  I'll get started on the list and blocks today if I can.  Though I am running behind at work so I may not get to it today.

You wanna get nuts?  Let's get nuts!

Re: Menu question and more!

Eric:

Anytime you can use actual text instead of images of text without changing the look, you're better off.
That said, if you're using images, I find that stacking the "on" and "off" states of my navigation together works very well. That requires building one graphic "on" and one "off" and splicing them together in a stack...then slicing them apart vertically. This ensures that you can swap images with no delay, much like preloading in javascript.

I don't remember which article(s) I read that convinced me to do it that way, but there's a pretty good one at WellStyled:
http://wellstyled.com/css-nopreload-rollovers.html

In the past I avoided such solutions because it made my CSS file bigger. I now realize that CSS is just text, and loads very quickly...and is accessed from the cache, to boot. It's better to put stuff in a stylesheet than anywhere else, so I'm making larger CSS files than I used to.

I really, really like the idea...and your initial design. Simple, clean, effective. A really good concept, and one that I hope to see online soon!

We're all looking forward to the future...but none of us more than the giant, evil robots.

Re: Menu question and more!

I remember a superb article about navigation elements from alistapart. I have used it on my personal site http://www.joshtownson.co.uk/. Anyway, the article is called CSS Sprites, and is billed as "Image Slicing's Kiss of Death": http://www.alistapart.com/articles/sprites/

Josh Townson

Re: Menu question and more!

@Josh: That looks to be a great article.  I'll be sure to read it through.

@everyone: I've got the menu up and working (at least in Safari).  You can look at it by going to DearJes.us.  Please let me know if you see any problems.

I've started to think about how I will build the container for the questions and answers.  I would prefer the box that it is in to be flexible both horrizontally and vertically.  I took a look at this article and it seems to point me in the right direction.  But it mentions that the content of the box must remain on a white background.  That throws off my green/blue theme I have to seperate question from answer.  I also got to thinkin about the rounded corners I have in those question and answer boxes, got more concerned and now I am at a loss.

I'll post something later this afternoon (on my lunch break) that shows how I am thinking this should be broken up.  In the meantime, if anybody has any ideas to give me a little direction, that is always appreciated.

Last edited by Granata (2006-01-13 06:17:10)

You wanna get nuts?  Let's get nuts!

Re: Menu question and more!

Yeah, lunch time!

Okay, I did some thinking (though be it unguided) about slicing this thing up and here it is.

Each colored box represents an image slice.  The corners are red and the horizontal and vertical edge slices are orange.  The black lines separate the slices.  I think I might need corners for the tops of the blue and green containers that do not include the white border as well.

I ran out of time or else i would try to explain how I think this would go together.  Maybe I can get to it tonight.

Last edited by Granata (2006-01-13 11:46:32)

You wanna get nuts?  Let's get nuts!

Re: Menu question and more!

I think that it is dangerous to put out something that could make gullible people (are there any other kinds?) think that Jesus is answering their questions on the Internet. The discipline of theology is involved with understanding what Scripture really means. Many very smart and faithful people disagree about a lot of things. Everyone can't be right. So, you could end up giving junk answers in the name of Jesus. It's a cute idea, but somehow I think that Jesus would rather speak for Himself.

On the technical side, why not use a discussion board like this one?

Phil

Re: Menu question and more!

Phil,

The discussion board would work if modded a bit, its an idea that would be worth considering had you come along a little earlier.

As far as the issues of theology goes my thoughts are:

1.  Giving Junk answers in the name of Jesus is the same risk that preachers face surely almost every day.  It will be preachers (with education in theology to back them up) who contribute the answers.  This pool of contributers is connected to my church which is also under authority so I am not worried about some nut case saying that rocketing clinics is cool if you do it in Jesus' name.

2.  It will be made very clear that Jesus is not on the other side of the site typing answers as the questions come in.

3.  People do disagree on issues of theology.  It is my hope that if someone disagrees with an answer that they are given, that they will either write back to say so or seek more information (the Bible would be great) thus opening some good 'ol truth seeking dialogue.

4.  You said "...Jesus would rather speak for himself."  Perhaps he does through those put in the position to (not that they are infallible).  This comment made me realize something.  I was immediately reminded of those black billboards with the white text that say stuff like "Don't make me come down there. -God".  I really really hate those.  A lot.  They seem cheezy and some of the quotes make me question where the writers are getting these quotes.  I've entertained the thought of getting a billboard next to one of theirs and putting "Stop putting words in my mouth. -God"

The difference between this concept and something like the billboards is that there will be faces behind the answers who can take responsibility for their answers and back them up with scripture.  If someone else interprets the scripture differently well...what's new about that?

Thanks for the thoughts Phil.  You've got me thinking:)

You wanna get nuts?  Let's get nuts!