CSS layout a list within a list

**mgason** · 05-21-2010, 11:15 AM

Hi,
I have a unordered list returned by the wordpress wp-list pages PHP command.
The list contains sub lists.

Basically the main list is the main level pages and each main level page has sub pages/links
I have made a page that contains just an example and all the css.
copy and paste code below to try it out.

3 main pages the first of which has 2 sub pages
I want the sub pages to align left with the Main page, no indent.
I also would like to close up the gap between Main page 1 and Main Page 2.
What is the best way to do it?

It should look like this (I had to put underlines just to make the spacing here)
about_______elementary school_______middle school

mission and
philosophy

history

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



<style>

ul#menu {margin:0; padding:0;}

ul#menu li {font-size:0.916em; float:left; margin-right:1.819em; padding:0; display:block; list-style:none;}

ul#menu li a:link, ul#menu li a:visited {display:block; padding:7px 0 10px; line-height:1em; width:9.08em; color:#6a797d; font-weight:bold; text-decoration:none; border-top:3px solid #fff; text-transform:lowercase;}

ul#menu li a:hover {border-top:3px solid #ff8a00;}

ul#menu li a span {font-size:0.833em; color:#d1d9dc; text-transform:lowercase;}

ul#menu li a.selected {border-top:3px solid #6a797d;}

ul#menu .last {margin-right:0;}



ul#menu li li { float:none; } /* this is the sub list */

ul#menu li li { margin:0 0 0 0; }

ul#menu li li { padding:7px 0 5px 0; }



</style>



<title>Untitled Document</title>

</head>



<body>



            <ul id ="menu">

  <li class="page_item page-item-2 current_page_ancestor current_page_parent"><a href="http://gasolicious.com/test/about/" title="About">About</a>

<ul class='children'>

    <li class="page_item page-item-76 current_page_item"><a href="http://gasolicious.com/test/about/mission-and-philosophy/" title="Mission and Philosophy">Mission and Philosophy</a></li>

    <li class="page_item page-item-78"><a href="http://gasolicious.com/test/about/history/" title="History">History</a></li>

</ul>

</li>

<li class="page_item page-item-21"><a href="http://gasolicious.com/test/notebook/" title="Elementary School">Elementary School</a></li>

<li class="page_item page-item-12"><a href="http://gasolicious.com/test/my-portfolio/" title="Middle School">Middle School</a></li>

</ul>



            <div class="clearboth"><!-- --></div>



        </div>



    </div>



</body>

</html>

**sticks464** · 05-21-2010, 12:52 PM

Add to your styles

Code:

ul.children {padding-left:0;}

Adjust the width of ul#menu li a:link, ul#menu li a:visited to move the main page links closer together.

**mgason** · 05-21-2010, 05:31 PM

Thanks heaps!

I got the menu styled and looking good, the testing site is here
http://gasolicious.com/test/about/

I have another question.
I am trying to get the current page menu item to stay highlighted.
Can not seem to get it working, I used ul#menu li a:active.
Complete sample code for a simple page is below again, just cut and paste to work on it.

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



<style>

body {background-color:#fff; color:#516064; margin:0; padding:0; text-align:center; font-size:75%; font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}



ul#menu {margin:0; padding:0;}

ul#menu li {font-size:0.916em; float:left; margin-right:1em; padding:0 0 0 1em; display:inline; list-style:none; text-align:left}

ul#menu li a:link, ul#menu li a:visited {display:block; padding:3px 0 10px 1em; border-top:3px solid #fff; line-height:1em; width:13.08em; color:#6a797d; font-weight:bold; text-decoration:none; text-transform:lowercase;}



/* Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!*/



ul#menu li a:hover {

    border-top:3px solid #ff8a00;

    background:#6a797d;

    color:#fff;}



ul#menu li a:active{border-top:3px solid #6a797d;

    background:#6a797d;

    color:#fff;

}



/*ul#menu li a span {font-size:0.833em; color:#d1d9dc; text-transform:lowercase;}*/

/*ul#menu li a.selected {border-bottom:3px solid #6a797d;}*/

ul#menu .last {margin-right:0;}



ul#menu .children {padding-left:0;}



ul#menu li li { float:none;margin:0; padding:0;} /* this is the sub list */





</style>



<title>Untitled Document</title>

</head>



<body>



            <ul id ="menu">

  <li class="page_item page-item-2 current_page_item"><a href="http://gasolicious.com/test/about/" title="About us">About us</a>



<ul class='children'>

    <li class="page_item page-item-76"><a href="http://gasolicious.com/test/about/mission-and-philosophy/" title="Mission and Philosophy">Mission and Philosophy</a></li>

    <li class="page_item page-item-78"><a href="http://gasolicious.com/test/about/history/" title="History">History</a></li>

</ul>

</li>

<li class="page_item page-item-21"><a href="http://gasolicious.com/test/elementary-school/" title="Elementary School">Elementary School</a>

<ul class='children'>

    <li class="page_item page-item-110"><a href="http://gasolicious.com/test/elementary-school/enrichment-programs/" title="Enrichment Programs">Enrichment Programs</a></li>

</ul>

</li>



<li class="page_item page-item-12"><a href="http://gasolicious.com/test/middle-school/" title="Middle School">Middle School</a></li>

</ul>





            <div class="clearboth"><!-- --></div>



        </div>



    </div>



</body>

</html>

**sticks464** · 05-21-2010, 06:49 PM

I am trying to get the current page menu item to stay highlighted.

See this page.

The body tag currently has an id of top and a class of default for each page. Because the active rule and the current_page_item class will not work in this case, a new body tag must be generated to be used in setting the current page.
I have used this one from the above page link

PHP Code:


<?php 

$page = $_SERVER['REQUEST_URI']; 

$page = str_replace('/', '', $page); 

$page = str_replace('.php', '', $page); 

$page = str_replace('?s=', '', $page); 

$page = $page ? $page : 'default'; 

?>



<body id="<?php echo $page ?>">

which replaces the normal body tag in the template.

To use the body tag to make the current page link active

Code:

#about ul#menu li.page_item_2 a {color:#000;}

The body tag will be different for each page so the page item number can be used in conjunction to set the active link. Use the example above
change the body id and the page_item_# to match the page your on.

Using the current_page_item by itself to set the active link does not work with child pages.

Code:

ul#menu li.current_page_item a {color:#000;}

**sticks464** · 05-21-2010, 07:09 PM

I'm not even sure any of the solutions will work with your menu since it is code as a dropdown menu instead of a full menu.
You may have to make your menu without using sub-menus which is what I would do since they are visible all the time.
Then the current_page_item rule would work fine with no other coding.

**mgason** · 05-21-2010, 07:27 PM

Hi,
I am a bit out of my depth but up for giving it a try.
What do you mean by my "menu is coded as a dropdown instead of full"?
I am just grabbing the pages using wp-list pages.
Would full mean they would not stay in Main Page/ Sub Page groups?

If I follow that PHP method do I have to make a style for every page?
Meaning every time someone else adds a page I have to go in and edit the CSS?
Is method 9 at the bottom on the page you linked to of any use to me?
That links to another article which mentions a plugin exploiting method 9.
http://digwp.com/2009/08/wordpress-body-class-plus/
about a quarter down the page is a "Update!" which is where the plugin is.

thanks for all of the help!
If you are interested in seeing the actual theme files it is a free one and is here
http://equivocality.com/wu-wei/

**sticks464** · 05-21-2010, 08:23 PM

Would full mean they would not stay in Main Page/ Sub Page groups?

Each page would be a main page and not a sub-page.

If you make each page a main page, your current menu would have a class assigned like this.

Code:

<li class="page_item page-item-2 current_page_item"><a href="http://gasolicious.com/test/about/" title="About us">About us</a>

Each main page would get the class of current_page_item, allowing you to use this css with no other coding.

Code:

ul#menu li.current_page_item a {color:#000;}

None of the methods on the linked page would need to be applied.

The default css will apply to all pages created, now or later, and the link should automatically appear in the menu with the current styling.
The menu method your currently using is normally in the sidebar where all main and sub page links are always visible but shown vertically instead of horizontally with the sub-pages indented to show they are sub-pages. Sub-pages in a main menu are normally hidden and appear when the main page link is hovered on (called a dropdown menu).

**mgason** · 05-22-2010, 12:05 PM

Got it.
First thanks for all of your help.
Maybe its time to discuss the big picture a bit so I don't waste your time.

I tried to use a dropdown menu plugin but when I installed it, it said this theme does not support menus?
http://pixopoint.com/products/pixopoint-menu/

I do really like the design of this theme and hope I can modify it enough.
Really all I need that is a bit beyond me is a dropdown menu, all my other editing has gone well.

I have been making these changes to learn and prototype a site look and get it agreed on. It is a site not really a blog although that will be a small component.
It is a redesign, 58 individual pages of content to start with!
Eventually a drop down menu is a must, I can't be jamming that many links above the header! It is a pro bono job for the school. I thought Wordpress would mean they could start to maintain the site themselves. I am actually a flash developer.

I really do not want to have a sidebar and the footer is not convenient as a place for navigation.

so any thoughts or good resources to learn how I could get a horizontal drop down menu incorporated into this theme either just above or below the header?

Thanks again for all the responses
Mark

**sticks464** · 05-22-2010, 02:45 PM

I just viewed your test site and the dropdown is working.

You should add some test pages and sub-pages and see if the menu will automatically add them to the menu.

**mgason** · 05-22-2010, 04:38 PM

oops, sorry I had changed the theme for a while.
It is now set back to the one I want to use
Mark

**mgason** · 05-22-2010, 07:09 PM

Hi,
just a thank you.
I amazed myself and managed to get the menu php from the new wordpress 3.0 beta default theme twentyten into my theme.
Then I found the CSS, edited it and have a fully functioning dropdown menu!!!
Mark

**sticks464** · 05-22-2010, 07:17 PM

Nothing seems to work with this menu to get a current page style.
If you are comfortable editing your themes header.php you can have a look at these tutorials on setting up your own dropdown menu to replace the one currently used.

http://wpguru.co.za/navigation/make-...rop-down-menu/
http://www.vanseodesign.com/wordpres...-in-wordpress/

Thread: CSS layout a list within a list

Thread Tools

Display

CSS layout a list within a list

Posting Permissions