Forums / Setup & design / menu css issue

menu css issue

« 
Previous topic
|
Setup & design
|
Next topic
 »
Author Message

Kevin Myles

Thursday 20 January 2005 8:58:37 pm

I think this is a css issue. I'm sorry for not being more competent, but i'm not a professional and I'm just trying to help out a non profit with some pro bono work.

here's the issue: the size of the menu is dependent on the amount of text, so if there's not enough text, the menu (which is a different color than its background, just stops, and then there's white space. Conversely, if there is too much space, it extends to a second line.

I would like to change it so that it either a) looks like ez.no, whereby the "partner" menu link tab extends to all the way to the right , or b) make it so that the menu tabs auto space. any ideas as to how this can be accomplished? Thanks for your help!

Alex Jones

Friday 21 January 2005 11:50:39 am

Hi Kevin, can you post a URL so we can see this, as well as the affected browser(s)?

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Kevin Myles

Friday 21 January 2005 12:10:04 pm

Hey Alex, hope all is well and thanks for your reply.

http://216.218.247.118/
in Firefox and Safari (mac os x.3)

Alex Jones

Saturday 22 January 2005 7:44:48 am

Alrighty, hopefully I can help a bit.

Concerning the wrapping of tabs to a second line. You can't really force this without using images as Firefox allows the user to override any font size, which is a good usability practice, but can be problematic from a designer's perspective.

To make it look like the Partner link above, you should make sure that you have assigned a background image to div#topmenu li div.spacing (copied from ezmain.css):

div#topmenu li div.spacing
{
    background-image: url(../images/tab-regular-right.gif);
    background-repeat: no-repeat;
    background-position: top right;
}

Then add this to your CSS (copied from ezmain.css):

div#topmenu li.last div.spacing
{
    background-image: none;
}

You have a lot of CSS files, so if you already have this, I apologize. A quick scan didn't present it though.

Does this help?

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>