Rounded Edges Imperial Style

Poster: selvan777
Dated: Monday February 9 2009 - 16:48:44 GMT

Hi,

In order to get that rounded edges for my main and all subs, do I have to use specific images?

I downloaded the sample and looked at the data and it does not jump out at me, sorry.

Thanks

Selvan
http://lastborns.esmartweb.com
http://lastborns.esmartweb.com/menu/menu_data.js

Re: Rounded Edges Imperial Style

Poster: Ruth
Dated: Monday February 9 2009 - 17:41:38 GMT

Hi,

If you look in the data file you'll see that the images are set in the items. There are 3 of them, top middle bottom This is a vertical menu for those images and the 1st item of the main menu has mint_top and then the middle items each have mint_mid and the bottom item has mint_bot. One thing to keep in mind when you use images like that is, they will repeat if the person has font size set very large for seeing reasons. If you can give me an idea of what you want it to look like I can fix something up so that the items will actually expand and keep the look

Ruth

Re: Rounded Edges Imperial Style

Poster: selvan777
Dated: Monday February 9 2009 - 20:18:50 GMT

Thanks Ruth,

I would like to have just the rounded corners for each item in my main menu. And, if possible, for each item in my 1st level subs too.
I especially like the corners in Breeze http://milonic.com/menusample29.php but Imperial is okay too http://milonic.com/menusample21.php

Thanks again

My menu is here at http://lastborns.esmartweb.com
and my data is here http://lastborns.esmartweb.com/menu/menu_data.js

Thanks again

Selvan

Re: Rounded Edges Imperial Style

Poster: selvan777
Dated: Wednesday February 11 2009 - 3:06:53 GMT

Hi,

Is it possible to have rounded corners without the use of images?

I see te images you are talking about and played with it a bit. It seems the text is placed below the image, is it possible to have it on top of the image so there would not be a need to have to use light colored images in order for text to be displayed more pronounced?

Thanks.

Selvan

Re: Rounded Edges Imperial Style

Poster: Ruth
Dated: Wednesday February 11 2009 - 4:17:19 GMT

Hi,

No the text appears on the images. Those images are background images not just images, so they become the background of the item and the text is on top of them. Anyway, is it that you want the colors you now have? If so I can make the images that color. You just have to tell me what you want.

Ruth

Re: Rounded Edges Imperial Style

Poster: selvan777
Dated: Wednesday February 11 2009 - 6:45:34 GMT

Hi,

Yes, I want the colors I have now.

Thanks.

Selvan

Re: Rounded Edges Imperial Style

Poster: Ruth
Dated: Saturday February 14 2009 - 2:18:40 GMT

Hi,

EDIT: ZIP FILE REMOVED 2-13-09 by Ruth

Upload the new images to your image place where you have the ones for the menu now [menu/images/, upload the new css file to where you have the existing one and then put up a test page changing the codes for the menu and for the css file to the following.






Then you should see the new menu on the test page. I left all the paths for images and such as you had them, just made the changes for the bgimages.

You can look at the data file and see what I did. In order to get the rounded corners look and to also allow for an increase in font size without causing the bgimages to repeat a bunch of times, and to keep the same look I had to use css to set some of the bgimages. Now, in the main menu, the maximum font increase without having the text move out of the 'button' area is 200%, but in the submenus you can increase the font to about 400%. There is nothing I can do about the main menu to allow for that increase without making the original 'buttons' much larger or creating a number of divides and 6 images in place of 3 which would look like one because the 3 items of a divide would actually be the top, middle and bottom with only the middle being an item that takes text, the other top and bottom items would be headers with the particular part of the image. For example, a 6 item main menu would actually have 18 items and use divides=3. So, the 'first' item would have an item at the top, in the middle and at the bottom. The top and bottom would be header type items with only the 'corner part of the image the item below that would be the text item with the 'mid' part of the bg as the bgimage, and the bottom would be the bottom corner of the bg as its bgimage. I can set something up for you to see, but it's involved to do and would take time.

Anyway, to get the correct look in the submenus, it is necessary to create extra items, these items are the odd numbers, 1,3, 5 etc. Then the vertical submenus are set to divides=2. This forces the submenus to put all the odd items on the left side and the even ones on the right. I then set the bgimages for the left items as the left corners, left top corner, left mid side, and left bottom corner, set the width to what it needed to be and set it as type=header. Then on the right side bg images are set using different css classes which are for top, mid and bottom items and allow for the setting of the bgimages for position and repeat, i.e. no-repeat top right, or repeat-Y top right and so on to position them correctly and keep them from repeating as the item gets bigger if text size is set larger.

You can test this in FF and increase the font size over and over to see how the submenus act. [I keep NN 7 just for that purpose since I can set the font size based on percentage increase i.e. text size = 300%] In IE the font size will not increase unless the person visiting has their accessibility set for that, but in FF it will increase just by clicking the View/Text Size

So, hopefully this is what you want.

Ruth

Re: Rounded Edges Imperial Style

Poster: selvan777
Dated: Saturday February 14 2009 - 2:41:53 GMT

Thanks Ruth,

I have the zip but have not done anything yet.

Selvan

Re: Rounded Edges Imperial Style

Poster: selvan777
Dated: Saturday February 14 2009 - 14:55:17 GMT

Hi Ruth,

Wow, with all that hard work and effort put into this thing I'd feel bad not using it!
Does it look correct ?
http://lastborns.esmartweb.com/test/test.html

Thanks.

Selvan

Re: Rounded Edges Imperial Style

Poster: Ruth
Dated: Saturday February 14 2009 - 15:39:36 GMT

Hi,

Good morning. Well, it works in all the browsers I tried, IE6, FF2, FF3, Safari3, NN9, NN7.

But, this is your site, and if you don't like the way it looks, you shouldn't use it. I don't mind working on things, I learn stuff as I do. It's how I learned to create 'dynamic' styled backgrounds using css classes in the menu thereby being able to keep the corners round or whatever design I had even when users who needed much larger fonts used the menu. Of course to do that the bgimages tend to have to be larger than usual since you can't allow them to repeat but need to have enough background to fill in the extra space for those who need to use larger fonts for viewing. It's that larger background that allows for that.

Ruth

Re: Rounded Edges Imperial Style

Poster: selvan777
Dated: Sunday February 15 2009 - 0:05:50 GMT

Hi Ruth,

Please don't get me wrong, I was just asking if the test page reflected your creation the way it was intended.

I do like the rounded corners. One questions though, is it possible to not lose the 3D effect from the original class as seen on my homepage?

Not being a fan of large text, I'm actually going to work on trying to make them smaller.

Homepage: http://lastborns.esmartweb.com
Test page: http://lastborns.esmartweb.com/test/test.html

Re: Rounded Edges Imperial Style

Poster: Ruth
Dated: Sunday February 15 2009 - 6:13:44 GMT

Hi,

Well, you can work to make them smaller, but you as the creator you have no control over the browser someone else is using and its settings. So, if a user with IE needs large fonts and has the accessibility setting fixed to give them large fonts this will override anything you set. The same thing for other browsers, though they do not have to set accessibility. If a user wants larger fonts, you cannot prevent them from doing that unless you opt for images with the text in the image.

As for the 3d effect, no you cannot do that, not with those rounded corners since that effect is created by using the css border class we created. If you put the border in the main menu it will go around the full item, not the rounded area. Until css3 is complete and browsers are made capable of doing the border-radius property there's no way to get rounded corners except by using images, either bgimages as I did, or regular images with the text as part of the image.

I'll put something together for you to take a look at. I have an So, I'd like to experiment with something.

Ruth

Re: Rounded Edges Imperial Style

Poster: selvan777
Dated: Sunday February 15 2009 - 14:46:52 GMT

Hi Ruth,

Before you complete putting that something together for me could you have a look at the test page and see why on mouse over for any sub item the left most image does not change like the mid and right?

I didn't mention it earlier because I thought I could figure it out.

Thanks.

Selvan

Re: Rounded Edges Imperial Style

Poster: Ruth
Dated: Sunday February 15 2009 - 17:53:55 GMT

Hi,

It won't change because it is a separate item. I think the best way for you to understand is to go to the Breeze sample page in FF http://milonic.com/menusample29.php

Once there in FireFox click the View / Text size and click increase. You will see the background start to repeat. Increase it a couple of times so you see what happens. This is what will happen with your main menu if you get the font size increased more than about 190%.

As you can see backgrounds do not 'expand' from the center of the background image [though that would be really nice ] So, using css you can set it so the background will not repeat, this is what I did for you main menu. But when the item size increases and white space is created on the right and bottom. What you see with the image not repeated would just be blank space. You would only see the one small 'button' at the top left but the text would still be all outside of it. I set your main menu like this, if you go to the test page in FF and do the font size increase a few times you will see the bg being at the top left and a lot of white space at right and bottom.

What I did in the submenus to get around that so the button looks as if it does 'expand' is to divde the menu and create items [on the left side of the submenus] which only have the top left corner in item 1, the mid left side in items 3, 5, etc [however many were needed to balance the right side items] and the bottom left corner in the last left item. All those items are set to type header. Now, the right side items are the actual 'text' items [regular menu items] So, when you mouseover one of those items, the part to the left is not part of that item, it is a separate item that just holds the left side of the background in order to make those top rounded corners. The choices are to not have a different mouseOver bgimage, to just use the same bgimage for mouseOff and mouseOn positions and only change the text color.
Or what I did was to try and set the mouseover so it was different but at least the top and bottom items still had the round corner at the right top and right bottom. That's the only thing I could think to do since you want the mouseover effect.

Just for you info, the only real way to get what you want, including 3d would be to make all buttons images with the text on them, not bgimages.

Ruth

Re: Rounded Edges Imperial Style

Poster: selvan777
Dated: Sunday February 15 2009 - 18:51:32 GMT

Hi Ruth,

I see what you're saying, thanks for that break down. Creating an image with text for all in the menu would cause those wanting to increase the text to not be too happy to see they cannot. Guess I'll (and many others) will have to wait for the upgrades to the global CSS language to be widely used and incorporated.

Just so you know, in FF 3.0.6, if View-Zoom-Zoom Text Only is checked, keying Ctrl plus + or - will also zoom text in or out.

Thanks.

Selvan