SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast sffc's Avatar
    Join Date
    Jul 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Showing the entire background image

    What is the code to make a table cell, or a list item fit itself to show the entire background image? I'm making a navagation bar; here's my code for a list navbar:

    HTML Code:
    <style type="text/css">
    <!--
    ul {
    margin:0;
    padding:0;
    }
    ul li {
    display:inline;
    list-style:none;
    background:url(tab.png);
    width:100px;
    height:35px;
    }
    -->
    </style>
    
    
    <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    </ul>



    Here's my code for a table navbar:

    HTML Code:
    <style type="text/css">
    <!--
    table, tr, td, th {
    	text-align: center;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	margin-right: 0px;
    	margin-top: 0px;
    	table-layout: fixed;
    }
    .alltab {
    	width: 100%;
    }
    .tab {
    	display: inline;
    	text-align: center;
    	width: 100px;
    	height: 35px;
    	background-image: url(tab.png);
    }
    -->
    </style>
    
    
    <table cellpadding="0" cellspacing="0" border="0" class="alltab"><tr><td>
    
    </td><td width="100">
    <table cellpadding="0" cellspacing="0" width="100" class="tab" border="0"><tr><td>
    Main
    </td></tr></table>
    
    </td><td width="100">
    <table cellpadding="0" cellspacing="0" width="100" class="tab" border="0"><tr><td>
    Forum
    </td></tr></table>
    
    </td><td width="100">
    <table cellpadding="0" cellspacing="0" width="100" class="tab" border="0"><tr><td>
    Members
    </td></tr></table>
    
    </td><td width="100">
    <table cellpadding="0" cellspacing="0" width="100" class="tab" border="0"><tr><td>
    Log Out
    </td></tr></table>
    
    </td><td></td></tr></table>

    What should I do???
    "I haven't failed, I just found
    100,000 ways that don't work"
    Thomas Edison

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't make them display:inline because they need to be display: block for you to be able to give them the dimensions of the bg-image. If you want them on the same line, you'll have to use float: left (or right) instead.

  3. #3
    SitePoint Enthusiast sffc's Avatar
    Join Date
    Jul 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That worked!
    "I haven't failed, I just found
    100,000 ways that don't work"
    Thomas Edison


Bookmarks

Posting Permissions

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