2 Replies - 772 Views - Last Post: 29 March 2010 - 07:49 AM

#1 Guest_Guest*


horizontal list

Posted 29 March 2010 - 03:00 AM


please look at this link


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


Is This A Good Question/Topic? 0

Replies To: horizontal list

#2 PennyBoki   User is offline

  • D.I.C Lover
  • member icon

Reputation: 55
  • View blog
  • Posts: 2,345
  • Joined: 11-December 06

Re: horizontal list

Posted 29 March 2010 - 03:23 AM

Ok for the first one I'm not sure but you could try with:
#list1 ul li a:hover { 
	 background: url('topmenu_hover.jpg') top left repeat-x;

And for the second one, you could add a <br /> element just before the </a> so that could influence the appearance I guess.
Was This Post Helpful? 0
  • +
  • -

#3 jrm402   User is offline

  • D.I.C Regular
  • member icon

Reputation: 52
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: horizontal list

Posted 29 March 2010 - 07:49 AM

For the first list, you use margin applied to the left side of the li element. You can instead add it as padding to the left side of the anchor element. Check this out, it shows exactly why padding is better than margin in this case. You will see the background color/image stretches over the padding up to the border.

For the second list, you simply need to apply a height to the anchor element as well. The way background-image works is that it will not expand an element until it is forced to be expanded. You could indeed add a <br /> tag after the text in the anchor element but that would not be the easiest way to do. Later if you decide to edit it you would then have to go through and edit each menu in each file instead of just editing css in one file. I believe the height you should apply will be 33px (li height of 43px - 10px of top padding for the anchor element).

Remember, actual width of the element is: width + padding + border.

Good luck! ;)

This post has been edited by jrm402: 29 March 2010 - 07:50 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1