SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Beginner's question: spacing in buttons

    Hi all,

    I am trying to build a site with eighteen links, styled as buttons.

    What I'm aiming for is a grid of buttons, with three buttons across in six rows.

    As I have it now, each button seems to size itself around the button text. The button text differs with each button, so the result is all these buttons of differing widths. It's quite ugly.

    What I"m looking for is markup, or a CSS rule, that will give me uniformly sized buttons.

    I would appreciate any insights.

    The site is here:

    http://home.comcast.net/~johnkelin/ray_2.html

    Thanks in advance,

    John Kelin

    PS
    I've only posted here a few times, so the URL may not be accepted. Also, I do hope I'm posting this to the correct spot. My apologies if I'm wrong...

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just float the anchors and set like width:100px on it.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John, your markup is quite broken.
    You can't have <p> tags as children of a <ul>; it only accepts <li> children.

    Aside from that, your problem is that your 'buttons' are really links, which by default generate inline boxes. And you can't specify the width for inline boxes.

    So you need to make them generate block-level boxes, which need to reside side-by-side. You can do this by floating the links, e.g., float:left. That automatically generates a block-level box, so you can set a width on it (like width:10em).

    You'll need to set clear:left on the paragraphs (or list items, depending on how you choose to correct your markup) to make the next 'row' start below the one before.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    Thanks for the help. And thanks for pointing out the busted markup...!

    For the time being, I have moved the navigation to the left in a vertical column, and it looks much better. It isn't how I originally conceived it, nor is it quite what was suggested here...it will take me a little time to figure it out. But it's a big improvement.

    Having eliminated the erroneous <p> tags, and replaced them with <li>, I'm not sure where I would put clear:left...suggestions?

    Thanks again!

    http://home.comcast.net/~johnkelin/ray.html

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    On the next element in the HTML source code that gets opened .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all of the suggestions and input. They really helped a lot.

    I'm still feeling my way through beginning web design, and this forum has been an indispensable resource!


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
  •