Results 1 to 6 of 6

Thread: CSS button issue

  1. #1
    Member fbmagik's Avatar
    Join Date
    Mar 2010
    Posts
    136

    Default CSS button issue 15 Mar 2012 @ 02.23

    Hi,

    I have created a background image for use on each button in a navigation for a site.

    However, when added via CSS to the individual list items, the background button image shrinks relative to the width of the text used.

    This looks odd because you end up with a number of buttons, all with different widths.

    I have tried specifying a width equal to that of the existing image I am using, this doesn't seem to work.

    Anyone know how I can specify the same width for all button backgrounds regardless of the width of the text?

    I would also like to center the text on the button background.
      Reply With Quote

  2. #2
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 15 Mar 2012 @ 08.55

    Something like this, perhaps?

    Edit this Fiddle - jsFiddle
      Reply With Quote

  3. #3
    Trusted Guru Frinkky's Avatar
    Join Date
    Dec 2008
    Posts
    1,678
    Blog Entries
    1

    Default 15 Mar 2012 @ 10.13

    quote
    Something like this, perhaps?

    Edit this Fiddle - jsFiddle
    Originally Posted by Mike Hopley View Post
    Sorry Mike, had to fork it: Edit this Fiddle - jsFiddle

    I like the whole button clickable
      Reply With Quote

  4. #4
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 15 Mar 2012 @ 11.47

    quote
    Sorry Mike, had to fork it: Edit this Fiddle - jsFiddle

    I like the whole button clickable
    Originally Posted by Frinkky View Post
    Much better, and so do I!
      Reply With Quote

  5. #5
    Member fbmagik's Avatar
    Join Date
    Mar 2010
    Posts
    136

    Default 16 Mar 2012 @ 23.02

    Thanks guys. Will have a play around.

    What element would you say makes the buttons the same width?
      Reply With Quote

  6. #6
    Trusted Guru Frinkky's Avatar
    Join Date
    Dec 2008
    Posts
    1,678
    Blog Entries
    1

    Default 17 Mar 2012 @ 09.34

    It's the width declaration on the li tag.
      Reply With Quote

Tags for this Thread

Posting Permissions

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