www.webdeveloper.com
Results 1 to 4 of 4

Thread: Navigation button background image prob

  1. #1
    Join Date
    Dec 2004
    Location
    New York, USA
    Posts
    194

    Unhappy Navigation button background image prob

    Hi all,

    I'm having problems getting a background image to display properly for navigation links. The width and height of the links seem to default to the size of the text instead of to the width and height I set. Can you tell me what I'm doing wrong.

    Here's the CSS
    Code:
    ul.nav 
    {
    	position:absolute;
    	margin:7px 0px 0px 0px;
    	padding:0px 10px 0px 0px;
    	width:780px;
    	height:29px;
    	z-index:10;
    	list-style-type:none;
    	text-align:right;
    }
    
    ul.nav li
    {
    	display:inline;
    	padding-left:5px;
    	height:29px;
    	width:130px;
    }
    
    ul.nav li a
    {
    	width:125px;
    	height:29px;
    	text-decoration:none;
    	background-image:url('../images/navBGArrow.jpg');
    	background-position:center right;
    	background-repeat:no-repeat;
    }
    Here's the markup
    HTML Code:
        <nav>
            <ul class="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="About_Bridgette_Seiberlich.html">About Bridgette</a></li>
                <li><a href="portfolio.html">Portfolio Examples</a></li>
            </ul>
        </nav>

  2. #2
    Join Date
    Feb 2005
    Posts
    345
    add display:block; to ul.nav li a

  3. #3
    Join Date
    Dec 2004
    Location
    New York, USA
    Posts
    194
    Thanks for the reply. While that fixes the width and height issue it makes the buttons display vertically. I had to float the li elements to get them to display horizontally again. Unfortunately, now they display in reverse order.

    This simple update is becoming more and more complicated.

  4. #4
    Join Date
    Feb 2005
    Posts
    345
    set ul.nav li to float:left and the order should be ok.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles