www.webdeveloper.com
Results 1 to 2 of 2

Thread: horizontal list

  1. #1
    Join Date
    Nov 2007
    Posts
    140

    horizontal list

    hi

    please look at this link

    http://sudhakargolakaram.co.in/files/list.html

    in the case of the 1st list

    what the moves moves over the links a repeating grey background image appears however this background appears completely only for the 1st link i want that repeating background to appear for the remaining links as well to the complete width of the individual links as of now for the remaining links on the left side the background image is not appearing i want the background to appear on the left side of the text


    in the 2nd list

    the height of the containing div is 53px and i would like the list items to be within this 53px height as of now when the mouse moves over Facilities and Activities link the repeating background image appears completely for this link and not for the other links which is what i want for the remaining links

    can anyone advice how i can change the list code to correct both list1 and list2

    thanks

  2. #2
    Join Date
    Sep 2009
    Posts
    146
    first one is easy... remove the margin on your containing <li> and add that as padding onto your <a> (20px). Remember the hover effect is only for the <a> and the spacing created by the margin is for the <li>

    Your problem on #2 is the same except vertically not horizontal. The padding on the <a> brings your link down but cuts off right when the text is done (this is why your 2 line nav item looks good). The solution here isn't as cut and dry, but this should do the trick:
    Code:
    #list2 ul li a {
    display:block;
    height:33px;
    }
    How i end up with 33px is... the <li> height = 43 - the padding-top of the <a> 10px

    -aPeg

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