SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Daylesford, Victoria
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    add padding to top of <li> tag with inline display

    I need help trying to format an inline ordered list (horizontal menu) with css.

    My <li> tag will have a background image which is 1px wide (set to repeat-x) and 112px high. I would like to position the list item text so that it sits at the bottom of the image. I thought I would be able to do this with increasing the padding-top of the li but when I do this the text stays at the top and the image dissapears from the bottom (aligns with the bottom of the text). At the moment I have the padding-bottom set instead.

    Any ideas?


    #menu {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 397px;
    height: 112px;
    margin: 0;
    padding: 0;
    }

    ul {
    margin: 0px;
    padding: 0px;
    bottom: 0px;

    }

    li {
    margin: 0px;
    padding-bottom: 112px;
    padding-left: 13px !important; padding-left: 12px;
    padding-right: 12px !important; padding-right: 11px;
    padding-top: 0;
    display: inline;
    font-size: 9pt;
    font-weight: bold;
    color: #594D45;
    background-image: url(images/menu-slice.gif);
    background-repeat: repeat-x;
    border-right: none !important;
    border-right: 4px solid #ffffff;
    }

    help much appreciated!

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello, and welcome to Sitepoint

    My bet is that you can go without the absolute positioning.
    It sounds to me like you are wanting to use a block level element - rather than twisting the inline behaviour to suit you.
    Use floats to fix. (floating makes an element block level)
    Assign the id to the ul itself.
    Don't use pt or px units for displaying text on screen - Use em or percentages.
    If you are wanting the text to display over the top of a background image - set dimensions and give a line-height and text-align center if you are wanting the text centered.
    Code:
    #menu {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: auto; /* clear children elements */
      width: 100&#37;; /* clear children elements in IE6 < */
    }
    #menu li {
      margin: 0;
      padding: 0;
      float: left;
      font-size: .8em;
      height: 20px;
      line-height: 20px;
      width: 100px;
      text-align: center;
      background: #FFF url(images/menu-slice.gif) repeat-x;
    }
    I'm not sure what you were aiming for with the important! paddings - it's all unnecessary.

    Hope it helps

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Daylesford, Victoria
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you - that has given me another way to create an inline list - but that is not really the problem I was having. The problem is my 'button' for each menu item is 112px high and I want the text to sit at the bottom.
    With your code I can change the height of the li to 112 but the text still sits at the top of the button.
    hope this makes sense.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about this :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #menu {
    	overflow: hidden;
    	width: 397px;
    	font-size: 9pt;
    }
    #menu li {
    	list-style: none;
    	float: left;
    	height: 2em;
    	padding: 112px 0 0;
    	margin: -2em 0 0;
    	background-image: url(images/menu-slice.gif);
    	background-repeat: repeat-x;
    	background-position: left 2em;
    	border-right: 1px solid #000000;
    }
    #menu a {
    	float: left;
    	line-height: 2em;
    	height: 2em;
    	padding: 0 11px 0 12px;
    	margin: 0;
    	font-weight: bold;
    	color: #594D45;
    }
    -->
    </style>
    </head>
    
    <body>
    <ul id="menu">
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
    </ul>
    </body>
    </html>
    Here I floated the <a>s and <li>s so they are block level. The <a>s are given a height and line height of 2em, and the side padding is applied here as well. The <li>s are also given a height of 2ems and a top padding of 112px. A negative top margin equal to the height pulls the top back down so the total is 112px. The negative top margin also covers the top of the background, so it is also positioned 2ems from the top.

    Cheers
    Graeme


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
  •