#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2017
    Posts
    3
    Rep Power
    0

    Link Border customization


    Hello,

    I've searched around and can't seem to find an answer to what I'm looking for. its probably simple.

    Question: How to make the borders around all my links the same height and width regardless of the size of the word/link?

    I'm just trying to put a white 2px border around each link so currently my links: Home, News, Products, Contact Us all have separate borders that are different in size due to the size of the word, How would I get them to all be the same size?

    This is for a school project so I don't have a link.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2017
    Location
    Bulgaria
    Posts
    15
    Rep Power
    0
    Hi. I have to look at it to be sure what you mean, but I guess this will help you: https://jsfiddle.net/p9c8zLu5/
    You need to set a line-height and the display to be inline-block.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2017
    Posts
    3
    Rep Power
    0
    Nikolay,

    Thank you for the reply. I tried the inline-block and it didn't really do anything. Do you see on the example you sent me on JSFiddle how the size of the box grew with the size of the text? How would i make the size of the box (border) be the same size no matter what text is inside of it?
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2017
    Location
    Bulgaria
    Posts
    15
    Rep Power
    0
    No, on the example I sent you, the box around the link text is the same height regardless of the different font-size. Do you not see it like that?
    You need display to be inline-block and also to set line-height too.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2017
    Posts
    3
    Rep Power
    0
    Ok. I see that the height didn't change with the size but the width did. I found a solution for the time being because I had to submit my homework. I just added non breaking spaces on either side of my smaller words to make the box the same size as the larger words. In reality I wanted every box to be the same size. Such as height 20px width 50px.
  10. #6
  11. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,455
    Rep Power
    9645
    You want the same physical dimensions for each link? Use inline-block, then line-height (as shown) for the height and width for the, er, width.

    https://jsfiddle.net/p9c8zLu5/1/

    Note that width:75px is long for the first box, about right for the second, and short for the third. But that's what happens when you use a fixed width. (You can use overflow:hidden to hide the extra link text.)
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2017
    Location
    Bulgaria
    Posts
    15
    Rep Power
    0
    Oh, I am sorry. I missed the part where you want the same width too.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2017
    Posts
    5
    Rep Power
    0
    Adding a fixed width for menu items is not a good practice. You may do that only if you use short text fillings like "Home", "New" and things like that, and test the proper width for theme. If you do not know the length of the words, than do not use fixed width. For the height is the same.

IMN logo majestic logo threadwatch logo seochat tools logo