0

I am using a PHP include that features my header content. For my navigation section I am using a list which just features text. I am using a small bit of php on the list items which basically states whatever the current page is, have an image displayed over that list item within the navigation. Below is what I am 'trying' to achieve:

enter image description here

As you can see, I want that blue shaped image placed over the top of the current page list item.

But below is what I have achieved and you will notice that the image is displayed but not like it should. I have used absolute positioning on the .current class which displays the whole image, however I cannot use absolute position on the image because then it wont display properly on another list item. What can I do?

enter image description here

Below is the relevant CSS and HTML/PHP:

<div id="navbar">
        <ul>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="current"';?> href="#">Home</a></li>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'shows.php')) echo 'class="current"';?> href="pages/shows.php">Shows</a></li>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'classes.php')) echo 'class="current"';?> href="pages/classes.php">Classes</a></li>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'noticeboard.php')) echo 'class="current"';?> href="pages/noticeboard.php">Notice Board</a></li>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';?> href="pages/about.php">Our Story</a></li>
            <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact.php')) echo 'class="current"';?> href="pages/contact.php">Contact</a></li>
        </ul>


.current {
width:138px;
height:57px;
background-image: url('../images/current.png');
background-repeat: no-repeat;
}
4

2 回答 2

1

the <li> element is restricting the size of your <a> tag. set the size of the individual <li> items to match the size of your tag and you will see the entire thing.

Modified code: 

<div id="navbar">
    <ul>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="current"';?> href="#">Home</a></li>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'shows.php')) echo 'class="current"';?> href="pages/shows.php">Shows</a></li>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'classes.php')) echo 'class="current"';?> href="pages/classes.php">Classes</a></li>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'noticeboard.php')) echo 'class="current"';?> href="pages/noticeboard.php">Notice Board</a></li>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';?> href="pages/about.php">Our Story</a></li>
        <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact.php')) echo 'class="current"';?> href="pages/contact.php">Contact</a></li>
    </ul>
</div>

#navbar ul li {
    width:138px;
    height:57px;
}

.current {
    width:138px;
    height:57px;
    background-image: url('../images/current.png');
    background-repeat: no-repeat;
}
于 2013-04-29T19:02:59.417 回答
0

For obvious reasons, the background image of an element cannot overflow the element itself. Therefore, if you're putting the background image on your A tag, you need to make sure that the A tag is big enough to fit the background. You could try something like this:

A {
    display: inline-block;
    width: 138px;
    height: 57px;
}

You'll have to adjust all your other CSS to position things properly.

于 2013-04-29T19:03:40.053 回答