Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Styling 2-line Category listing in menu?

Styling 2-line Category listing in menu?

Locked

Views: 1,488

Results 1 to 8 of 8
This thread is locked. New replies are disabled.
2 Apr 2009, 4:08 PM
#1
pixelwrangler avatar

pixelwrangler

New Zenner

Join Date:
Mar 2009
Posts:
59
Plugin Contributions:
0

Styling 2-line Category listing in menu?

I've got a nicely-styled menu, thanks to Categories Dressing.

I have a couple of top-level categories with longer titles, and the second word of these titles wraps to the next line - BUT - does not indent to line up with the word on the first line.

You can enter a <br> in the Category title, but you soon run out of typing space. How do you style this second wrapped line so it lines up with the first line of the category listing?

2 Apr 2009, 4:10 PM
#2
tony_sar avatar

tony_sar

Totally Zenned

Join Date:
Jul 2006
Location:
Montreal, Canada
Posts:
2,276
Plugin Contributions:
0

Re: Styling 2-line Category listing in menu?

may not know the answer , but link to you site will help

3 Apr 2009, 2:18 PM
#3
pixelwrangler avatar

pixelwrangler

New Zenner

Join Date:
Mar 2009
Posts:
59
Plugin Contributions:
0

Re: Styling 2-line Category listing in menu?

The site is not online. Here is a picture of my problem.

3 Apr 2009, 3:52 PM
#4
tony_sar avatar

tony_sar

Totally Zenned

Join Date:
Jul 2006
Location:
Montreal, Canada
Posts:
2,276
Plugin Contributions:
0

Re: Styling 2-line Category listing in menu?

Then i suggest, installing firebug extension for firefox and use it to find a correct value and setting in your CSS ..

6 Apr 2009, 2:02 PM
#5
pixelwrangler avatar

pixelwrangler

New Zenner

Join Date:
Mar 2009
Posts:
59
Plugin Contributions:
0

Re: Styling 2-line Category listing in menu?

I always use the Web Developer extension to "debug" pages. It turns out that all I had to do to resolve this particular problem was to change the CSS so that the <li> elements are set to "display:block"

Makes sense, since that's how I wanted the individual <li> elements to be treated.

6 Apr 2009, 2:04 PM
#6
tony_sar avatar

tony_sar

Totally Zenned

Join Date:
Jul 2006
Location:
Montreal, Canada
Posts:
2,276
Plugin Contributions:
0

Re: Styling 2-line Category listing in menu?

Glad you resolved this issue . and thanks for posting the solution :smile:

27 Apr 2009, 2:08 PM
#7
pixelwrangler avatar

pixelwrangler

New Zenner

Join Date:
Mar 2009
Posts:
59
Plugin Contributions:
0

Re: Styling 2-line Category listing in menu?

Here's the code, for someone who wanted to see exactly where to make the changes in the css:

In the file /includes/templates/yourtemplate/css/stylesheet_categories_dressing.css

specify the nested <ul> formatting:

#categories ul a {/top categories/
display: block;

#categories ul ul a {/subcategories/
display: block;

That's it.

27 Jun 2010, 3:10 PM
#8
moosesoom avatar

moosesoom

New Zenner

Join Date:
Dec 2008
Location:
Rimini, Italy, Italy
Posts:
67
Plugin Contributions:
0

Re: Styling 2-line Category listing in menu?

I have the same problem (long categories name not indenting).
In my css I have

#categories ul a {/*top categories*/
display: list-item;

#categories ul ul a {/*subcategories*/
display: list-item;

if I change to

#categories ul a {/*top categories*/
display: block;

#categories ul ul a {/*subcategories*/
display: block;

I lose bullets and categories names still don't indent

You can see them at https://www.lineagotica.it