Extra characters in the wp_list_pages

  • I know this is a noob question, and I’m sure it’s been answered other placed – I just can’t find it for the live of me.

    Now, I’m trying to create a nice little navigation. I have it running, no problem. Shows the links in the headers – just how I wanted.

    Only problem is I can’t figure out how to put a divider between each link.

    This is what I have in my header.php for the navigation:

    <div id="menu"><ul class="menuitems"><li><a href="<?php echo get_option('home'); ?>/">Home</a></li><?php wp_list_pages('title_li='); ?></ul></div>

    So the formating is currently looking like this:

    HOME ABOUT OTHER PAGE OTHER PAGE

    HOWEVER, I’d like it to look like this:

    HOME | ABOUT | OTHER PAGE | OTHER PAGE

    If I can, I’d even like it better if the | could be a custom image.

    I’m not a codemonkey .. I’m a graphic designer. So any help would be EXTREMELY helpful and appreciated.

Viewing 15 replies - 1 through 15 (of 26 total)
  • Thread Starter taddmencer

    (@taddmencer)

    And my CSS for this is:

    #menu {
	height: 70px;
	margin: 0 auto;
	text-align:auto;
	 }

.menuitems {
	text-align: center;
	padding-top: 35px;
	color: #CCCCCC;
	font-size: .9em;
	text-transform: uppercase;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	 }

 .menuitems a {
 color: #CCCCCC;
 text-decoration: none;
 	text-transform: uppercase;

 }

 .menuitems a:hover {
	text-decoration: none;
	text-transform: uppercase;
	color: #FFFF00;
 }

 #menu ul li {
 list-style-type: none;
 display: inline;
 padding: 0 8px 0 8px;
 }
    Thread Starter taddmencer

    (@taddmencer)

    Tried a few things like .. editing through the core and so on, so far I’m pretty lost. I may just end up hard coding navigation and forget about it.

    have you thought about putting borders on the right of your list-items? and a little padding maybe?… similar effect to using pipes.

    Thread Starter taddmencer

    (@taddmencer)

    Yeah, I did but then I get trailing lines. I may go that route, but I’m more for the “do it the right way” idea.

    Thanks for the help. I’ll try that and see what happens.

    well.. I see you have a home link there first, which is not in your wp_list_pages output…

    maybe put the border on the LEFT side of your list-items, and then put your home link in a list-item which has the border removed from it.

    Thread Starter taddmencer

    (@taddmencer)

    It looks ok, but I get it looking like this:

    HOME | ABOUT | OTHER PAGE | OTHER PAGE |

    No | at start, one at the finish. I’m sure this just means a few more CSS lines.

    Thanks Ivonic.

    If anyone has anything else to add that may work, let me know!

    Thanks!

    I think maybe you posted just as I posted… putting it on the left would work.

    Thread Starter taddmencer

    (@taddmencer)

    Ok, new issue on this idea.

    I get now this

    | HOME || ABOUT || OTHER PAGE || OTHER PAGE |

    Which isn’t what we wanted.

    Man, why can I just say “BOO!” and scare this stuff into shape?!

    seems you have two borders now… put your border on the left side only… then make a class for the LI which contains your HOME link, and set border: none

    Thread Starter taddmencer

    (@taddmencer)

    Here comes my uber-noobness.

    What!?

    <div id="menu"><ul class="menuitems"><li id="menuhome"><a href="<?php echo get_option('home'); ?>/">Home</a></li> <?php wp_list_pages('title_li='); ?></ul></div>

    ^ That is my menu now. I’ll make an id fo rthe menu home link.

    #menu ul li {
	list-style-type: none;
	display: inline;
	padding: 0 8px 0 8px;
	border-left: 1px solid #cccccc;
 }

 .menuhome ul li {
	list-style-type: none;
	display: inline;
	padding: 0 8px 0 8px;
	}

    My new CSS.

    Not working. I’m sure it’s a matter of “Tadd, you’re a moron” …

    Thanks for the help Ivovic.

    try this for the css:

    #menu ul li {
  list-style-type: none;
  display: inline;
  padding: 0 8px 0 8px;
  border-left: 1px solid #cccccc;
}
#menuhome { border: none; }
    Thread Starter taddmencer

    (@taddmencer)

    Ok, but how about the header? I put it as id=”menuhome” and class=”menuhome” …

    <li class="menuhome"><a href="<?php echo get_option('home'); ?>/">Home</a></li>

    Like that.

    Is this incorrect as well?

    you’ve lost me now… where is this most recent link?

    refer to class=”menuhome” as .menuhome{} in your css. refer to id=”menuhome” as #menuhome{} in your css.

    it doesnt matter which one you use, as long as you refer to it correctly in the css.

    Thread Starter taddmencer

    (@taddmencer)

    Ok, this is what I have (I’ve give you an online link, but I’m working in WAMP right now for dev purposes)

    <div id="menu"><ul class="menuitems"><li class="menuhome"><a href="<?php echo get_option('home'); ?>/">Home</a></li> <?php wp_list_pages('title_li='); ?></ul></div>

    #menu ul li {
  list-style-type: none;
  display: inline;
  padding: 0 8px 0 8px;
  border-left: 1px solid #cccccc;
}

#menuhome { border: none; }

    ok, see you changed the id=menuhome which you posted above… into class=menuhome.

    so now, in the css, replace the #menuhome with a .menuhome

    you with me now?

Viewing 15 replies - 1 through 15 (of 26 total)
  • The topic ‘Extra characters in the wp_list_pages’ is closed to new replies.