Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Getting equal width across backgrounds

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #32878
    Catasphere
    Member

    I have this issue where I have links, like Facebook and Twitter, and I’m trying to add specific background colors to them to line up inside of a container. The problem is, all the background color boxes are different sizes, since some text is longer than other text. Here’s my code.


    '

    Here’s what I’m trying to implement in the CSS, but the padding doesn’t work, since I need different values for each link due to the different amount of characters in each link.


    .content_box {
    font-family: "AllerRegular";
    font-size: 15px;

    background-color: #24262D;
    margin: 10px 10px 5px 10px;
    padding: 5px 7px 5px 7px;
    border-radius: 5px;
    box-shadow:inset 1px 1px 5px black, inset -1px -1px 5px black;
    }

    #social_nav li {
    line-height: 2em;
    }

    .social_link {
    padding: 5px 50px 5px 50px; /*Padding does NOT work to fix the issue */
    }

    #social_nav .facebook {
    background-color: yellow;
    }

    #social_nav .twitter {
    background-color: yellow; /*Yellow so that boxes are obvious */
    }
    #75260

    Hello Catasphere,
    try giving the property of #social_nav li { padding:5px;} and if you link appear on the background too then #social_nav a {padding:5px;}

    #75263
    furrball1383
    Member

    Hey Catasphere, I really think that what you should be doing is giving the ‘a href’ tags an id then in the css provide that id an attribute of block, set its width and height as wide and as high as your longest link. You can even set the background color if all the links colors are going to be the same.

    #75247
    jacorre
    Participant

    You can look at my blog categories navigation to get an idea. I do use display:block as suggested.

    #categories li a {
    display: block;
    padding: 0.625em;
    text-decoration: none;
    background-color: #561420;
    border: 1px solid #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #FFF;
    font: 100% Oswald, Verdana, Geneva, sans-serif;
    text-shadow: #000 1px 1px 2px;
    -webkit-box-shadow: 2px 2px 2px #CCC;
    -moz-box-shadow: 2px 2px 2px #CCC;
    box-shadow: 2px 2px 2px #CCC;
    }
    #categories li a:hover {
    background: #821122;
    -webkit-box-shadow: 2px 2px 2px #999;
    -moz-box-shadow: 2px 2px 2px #999;
    box-shadow: 2px 2px 2px #999;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.