CSS Issue for Wordpress Menu..

Cormac · #1 (**permalink**) 03-12-2006, 02:39 PM

Hi, i'm using the following CSS code to style a menu in wordpress. The php code to render the menu is displayed below. The code is meant to display menu items in a block style but as you can see from the screen shots below it is not having the desired affect.

Menu Correct is how the menu is meant to be displayed and Menu Wrong is what i'm getting from the code below. Does anyone why the error is occuring?

Thanks

Code:

h4 {
    font-weight:700;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    margin: 0 0 0px 0px;
    padding: 0px 0 0px 0px;
    text-align: left;
    display: block;
}

#showentry {
    margin: 0;
    padding: 0;
    display:block;
}

#showentry a {
    text-decoration:none;
}
#showentry:hover {
    color: #ffffff;
    display:block;
    background-color:#FF7324;
}

the php code to display the menu is

PHP Code:

 
<div id="showentry">
<ul>
<h4><?php wp_list_cats(); ?></h4>
</ul>
</div>

daviddoran · #2 (**permalink**) 03-12-2006, 02:42 PM

Are all the list entries going to be inside that H4. Despite being invalid I imagine it will affect them.

Cormac · #3 (**permalink**) 03-12-2006, 02:53 PM

yes, the list values will all be inside the h4, how is it invalid?

daviddoran · #4 (**permalink**) 03-12-2006, 02:56 PM

I imagine what you want is more correctly:

Code:

#showentry ul li{
    font-weight:700;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    text-align: left;
    display: block;
    list-style:none;
}

#showentry {
    margin: 0;
    padding: 0;
    display:block;
    width:300px;
}

#showentry ul li a {
    text-decoration:none;
    color: #000000;
    font-size: 14px;
    display:block;
    width:100%;
}
#showentry ul li a:hover {
    color: #ffffff;
    background-color:#FF7324;
    display:block;
    width:100%;
}

The HTML would be:

Code:

<div id="showentry">
  <ul>
     <li> <a href="hh">Uncat</a> </li>
     <li> <a href="hh">2cat</a> </li>
     <li> <a href="hh">AMcat</a> </li>
  </ul>
</div>

So your PHP should be:

Code:

<div id="showentry">
  <ul>
      <?php wp_list_cats(); ?>
  </ul>
</div>

And the result is: (the middle one is being hovered over)

Cormac · #5 (**permalink**) 03-12-2006, 03:12 PM

cheers david, that worked a treat.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Javascript/CSS menu help?	ButtermilkJack	Coding Help	4	16-04-2006 05:59 PM

Sponsored links

CSS Issue for Wordpress Menu..

CSS Issue for Wordpress Menu..

Similar Threads

Sponsored links