- This topic is empty.
-
AuthorPosts
-
May 26, 2011 at 12:22 am #32878CatasphereMember
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 */
}
May 26, 2011 at 7:38 am #75260hirenkhambhaytaMemberHello 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;}May 26, 2011 at 10:12 am #75263furrball1383MemberHey 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.
May 26, 2011 at 12:02 pm #75247jacorreParticipantYou 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;
}
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.