mgason Posted May 21, 2010 Share Posted May 21, 2010 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/linksI have made a page that contains just an example and all the css.3 main pages the first of which has 2 sub pagesI 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 schoolmission andphilosophyhistory <!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> Link to comment Share on other sites More sharing options...
Rufus Posted May 31, 2010 Share Posted May 31, 2010 Set the padding of the child ul's to 0px, since they do have a padding by default. #menu ul {padding: 0px;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.