Multiple Background Images Not Working With Links

  • Resolved samuello

    (@samuello)


    16 years, 2 months ago

    I’m having a little trouble using mutliple background images for a list of links in the header. Here’s my blog that I’m working on: https://www.ourwalkabout.com/. You’ll see the three links in the header, the right two are missing the image for the left of their buttons, I can’t figure out how to get them to appear…

    Here’s the code from header.php:

    <div id="header-menu">
<ul id="navigation-top">
<li><span><a href="<?php bloginfo('home'); ?>">Home</a></span></li>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div>

    And here are the style from style.css:

    ul#navigation-top {
margin: 0 10px 0 0;
padding: 0 0;
float: right;
list-style-type: none;
}

ul#navigation-top li {
margin: 0 0;
padding: 0 0;
display: block;
float: left;
background: url(images/header-button-right.gif) no-repeat right top;
}

ul#navigation-top li span{
margin: 0 0;
padding: 0 0;
display: block;
float: left;
background: url(images/header-button-left.gif) no-repeat left top;
}

ul#navigation-top li a {
display: block;
margin: 0 20px;
padding: 8px 0;
background: url(images/header-button-mid.gif) repeat-x left top;
font: bold 1.8em Arial, sans-serif;
text-transform: lowercase;
}

    Any help most appreciated!

Viewing 4 replies - 1 through 4 (of 4 total)
  • <li class="page_item page-item-11">
<span>
<a href="https://www.ourwalkabout.com/about/" title="About">About</a>
</span>
</li>
<li class="page_item page-item-13">
<span>
<a href="https://www.ourwalkabout.com/contact/" title="Contact">Contact</a>
</span>

    …the insertion of the “span” tags will (should) make the left end images show.

    Thread Starter samuello

    (@samuello)

    Yeah, I could do that, but then I lose the dynamic nature of wp_list_pages so I’d have to go into the header.php file each time I added a page instead of it being dynamic. Any other ideas?

    How would you create the span dynamically? Something like…

    <span><?php wp_list_pages('title_li=&depth=1'); ?></span>

    I don’t really have a clue I guess… Just thinking out loud.

    Good luck to you.

    Thread Starter samuello

    (@samuello)

    I’d actually already tried that, good idea, but it doesn’t work as one would expect. I was hunting around here, where it says “markup and styling of page items” about two thirds of the way down the page, but I can’t make sense of what it’s telling me to do…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Multiple Background Images Not Working With Links’ is closed to new replies.