12 replies [Last post]
andya700
andya700's picture
Offline
Regular
Last seen: 10 years 41 weeks ago
Joined: 2008-11-19
Posts: 31
Points: 11

I am rather new to web development and for a new site I am building these days I would very much like to use, as a menu, an image similar to a flower with 6 petals (I use an image built with Illustrator that I then transform into a PNG/GIF image as needed). The idea is that these 6 petals would form each a menu line and that on hovering over a given petal this would have a slightly different tone of background color and possibly the text contained in it (and of course a different tone for the active page in which the user is at the moment). I built the base with XHTML and in general I use CSS for styling. I am not clear if such effect can be obtained in CSS bearing in mind that the petals have a poligonal shape and are disposed on 6 axis around a 360 degrees (similar to a vertical bar added to an X shape at its crossing). I am not sure if CSS allows such simulated animation or if JQuery or Flash shall be used (I find Flash particularly difficult to understand to be honest and I never put my nose into JQuery too; for this reason and for compatibility reasons, I would much prefer to code this in CSS if at all possible). I am looking for a pointer here, someone with more experience that can may be tell me if CSS can do this, or which other technology between Flash and JQuery is to be used (bearing in mind that I would really like to keep the rest of the site in XHTML/CSS). It is a static site by the way, in case it makes any difference.

Any help would be greatly appreciated, sorry for the generic posting but I tried in Google and cannot find a pointer to solve this.

Thanks
Regards
Andy

Andy

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You can do it with CSS; no

You can do it with CSS; no need for Flash or jQuery (which wouldn't be able to accomplish anything in terms of positioning that CSS couldn't anyway). Would need to get a look at the image though to give more detailed advice.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

andya700
andya700's picture
Offline
Regular
Last seen: 10 years 41 weeks ago
Joined: 2008-11-19
Posts: 31
Points: 11

Here is the image

Hi, thanks. I attach the image to see if you can point me in the right direction. The area for each menu button would be the one for each of the six 'petals' formed by the half rounded rectangle and the small cone below, pointing the centre circle (basically the area in dark red). The Homepage button would be the round light grey area in the middle. The first (petals) would go light red when active/hover-upon and the text would go respectively light grey/white. The Homepage round buttom would also probably have a similar behaviour but only with different colors. I am not completely sure of the exact colors yet. Still trying out ideas but something like described above likely.

It would be really great if you could help me further on this. Pointing me in the right direction with the tecnique. It is a free job for a friend but I am trying to learn something that free me in the future should I do other sites. I like the idea to do something a bit fancy.

Thanks in advance!

Andy

AttachmentSize
PetalsGIF.gif 1.12 KB

Andy

Triumph (not verified)
Anonymous's picture
Guru

If I may make a suggestion,

If I may make a suggestion, please read the following: http://www.webpagesthatsuck.com/mysterymeatnavigation.html

It may be worth rethinking the plan.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Triumph wrote:If I may make

Triumph wrote:

If I may make a suggestion, please read the following: http://www.webpagesthatsuck.com/mysterymeatnavigation.html

It may be worth rethinking the plan.

I'm not sure that's fair Triumph. The OP says in both posts there will be textual menu items in the design.

Triumph (not verified)
Anonymous's picture
Guru

Chris..S wrote:... I'm not

Chris..S wrote:

... I'm not sure that's fair Triumph. The OP says in both posts there will be textual menu items in the design.

Smile

I read it and couldn't decide if it was meant that the text shows up on rollover or if it just changes on rollover. As long as the textual menu items are visible before rollover and the menu isn't confusing then my post can be discounted.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 5 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I wouldn't say discounted -

I wouldn't say discounted - your post is still very relevant. The OP should realize that s/he is heading down a path that has a fork, one leads to those very dark scary woods and the other leads to the bright happy place... I think all the information that we can provide to help make sure their navigation design is done correctly, there shouldn't be an issue.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

After laying awake wondering

After laying awake wondering what I did that wasn't fair, I think I realized what Chris was saying. Perhaps, I think, it was the implication of linking to the site named "Web Pages that Suck". It wasn't my intention to imply that the OP has "sucky" ideas. I just was posting an article that I thought was relevant to the subject.

As Deuce said, I still think the link is relevant and a good read but perhaps I should take it as a lesson in keeping my unsolicited opinions in "Site Checks".

andya700
andya700's picture
Offline
Regular
Last seen: 10 years 41 weeks ago
Joined: 2008-11-19
Posts: 31
Points: 11

Dear me...what did I say?

Smile So I did not realise that I would stir up such a fuss by asking that question but thanks to everyone comments, I do not take it badly, I am here to learn and can only do so by listening to more experienced guys like you.

May be I shall better frame my questions and background informations next time, so let me try to see if this helps.

The web site is really a simple simple one, with not much content and is not of commercial nature. It is for a university lecturer that needs just to have a presence, mostly to show his publications and teaching activities (a mere link to the main university page for the latter).

It is a static site, all XHTML and CSS and even rather boring if anything. Hence the idea to do something a bit cooler with the menu using the infamous 'flower-styled' logo design that is used elsewhere in the department.

The 'flower'is used elsewhere with a simple image mapping (poligons behind the logo) that would well deserve a place in the link you sent me, for they do not indicate either their state (active, etc) nor change color or give out any indication that they are alive links until...you click on it by mistake.

In my case the idea is to take the text that was originally in the logo and subsitute it with menu voices. I upload a new logo so you can see the actual text (my fault if I led you to believe I meant not to use any text...I thought I said that but English isn't my first language so...message delivery is never completely guaranteed as intended Smile ). You can also see from the image how I would like the petals to look when active (red goes lighter and text change color). Something similar is to happen for the centre circle, the Home button, altough I haven't yet come up with the exact color scheme for that, but it will be similar in concept.

I hope that now it makes more sense, yet please tell me if you think I will become a candidate for the next 'sucking' prize, I am not too keen on that. Wink

So now the original question was...IS IT POSSIBLE TO DO THAT IN CSS (or only with Flash which I really would prefer to avoid) and HOW IS IT BEST DONE? (I have done it before with an image sliding behind the button, in CSS but it was a normal shape, usual vertical stuff, with 4 status. What confuses me here is that the buttons are polygons and the design is around a circle).

I look forward to hear from you but hope you see that I am trying to learn how to do thing proper, with a little creativity but within normal usability rules...I hope at least. Just to give you an idea of the general look of the page, I attach a pic of that too; you can see that there is no risk of be confused on where the menu is...so simple it is. Indeed if adopting such a design would bring issues of compatibility, i.e. it all breaks in any browser, than I might (reluctantly :blushing: ) ) give up the idea. But I really liked it.

I wait for the next salvo or replies! :rolleyes:

Andy

PS-By the way, talking of usability. What about spelling out the meaning of the acronym O.P.? Obviously Pig? Ohhh Please? :scared:

AttachmentSize
CSSCreatorActiveButton.gif 16.28 KB
CSSCreatorWebPic.gif 7.22 KB

Andy

Triumph (not verified)
Anonymous's picture
Guru

OP, depending on the context

OP, depending on the context can mean either "Original Poster" (you in this case) or just "Original Post" meaning the first post in the thread.

I'm sure I simply misunderstood your post. No fault to you. Smile I see that the items are clearly labeled in the newly attached images.

Perhaps this article could help: http://www.alistapart.com/articles/sprites

andya700
andya700's picture
Offline
Regular
Last seen: 10 years 41 weeks ago
Joined: 2008-11-19
Posts: 31
Points: 11

No, it was my fault! Thanks for the link

I feel that if I submitted the last images in the first place you would have not misunderstood me. My fault really and a HUGE thanks for the solution! I am already working on it! Smile

This site proves always a positively challenging place to post an....OP! Wink

It is not just to learn the techniques but also to keep us new folks on the right path.

I am glad I can use just CSS, I am trying to stay 'pure'.

Thanks to you and all again!

Greetings!

Andy

Andy

Triumph (not verified)
Anonymous's picture
Guru

andya700 wrote:... I am glad

andya700 wrote:

... I am glad I can use just CSS, I am trying to stay 'pure'. ...

Yes, 'pure' definitely belongs in quotes here. Wink Javascript has its place and there is no shame in using it as long as there is a fall-back in case of its failure.

andya700
andya700's picture
Offline
Regular
Last seen: 10 years 41 weeks ago
Joined: 2008-11-19
Posts: 31
Points: 11

Sprites around a circle

Ok, I read the article (http://www.alistapart.com/articles/sprites/) and all is fine with it...until I try to surround with a box each element (the 6 petals here and the circle in the centre) around the image. How do one do it? The article do not say. Is it something one does in Fireworks? What I cannot understand is how one can insert a box in CSS with a specific position. The article only show well how do to it with vertical slices but it does not give an example of how to set the panels to a particular area where both vertical and horizontal positioning is needed. So if one use:

 #panel1b {left: 0; width: 95px;}
  #panel2b {left: 96px; width: 75px;}
  #panel3b {left: 172px; width: 110px;}
  #panel4b {left: 283px; width: 117px;}

What does it use for a situation where the panels are also limited in the vertical direction? I tried to use "heght" to give it a height (even bottom and top just to see if it made any difference) but they always slice the image for the whole height.

Anyone knows how to set a box say of 50x50px at -50x and 50y from the top left corner of the Sprite image?

Thanks....sorry....I thought I knew it all now, but....putting this in practice with my case is a little more difficult.

PS-In my case I have an image of 210x210px with petals this large (65px left slice/80centre/65right) and similar measure when one think in vertical. it is a structure like:

Button 2

Button 7 Button3

Button 1

Button 6 Button4

Button 5

Andy