Clever Geek Handbook

Add "underline" to the box with CSS

I want to achieve something similar to CSS:

enter image description here

I am new to CSS.

My questions:

  • How can I add a green line at the bottom like below? Should I add a small div

    pod div

    containing the text and set its background to green? I know there are many ways to do this, but I just want to learn the best practice.
  • Is this font Arial?
+3


source to share


5 answers


You can either add a div at the bottom as described or use a border. Either way, you will have a certain height setting. Nothing wrong.

http://jsfiddle.net/PQgH3/2



div {
    width: 50%;
    padding-top: 10px;
    font-size: 24px;
    text-align: center;
    font-family: arial, sans-serif;
}
.followers {
    background-color: #777;
    float: right;
    height: 75px;
    color: #ccc;
}
.following {
    background-color: #555;
    float:left;
    height: 70px;
    color: #ccc;
    border-bottom: 5px solid lime;
}

<div class="followers">Followers</div>
<div class="following">Following</div>

I have no eyes to tell if this font is Arial. I can tell it is a similar sans-serif font if it is not.

+3


source


Use CSS sprite sheets. They will help you achieve this effect with images. Typically, when you markup for menus, use the UL and LI tags and then tweak the functionality accordingly. Then set to change the background sprite when the mouse is over and then li with the: hover selector. I recommend creating the sprite sheet as an exact image of what you want all menu buttons to appear (horizontal) by default. Then make a different version below it in the same image that shows the hover version. You can repeat this process for any other versions you need, like active, disabled, etc. Just make sure you offset the Y value for the background position for each version. For example:

li { background-position: 0px 0px; }
li:hover { background-position: 0px -100px; }
li:active { background-position: 0px -200px; }

Check out this article for more information on markup and design aspect: http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites

Edit: If you don't want to make sprites, I have a jsFiddle of a pure css3 way to do it here: http://jsfiddle.net/uBhKF/

HTML markup:



<ul>
   <li>FOLLOWING</li>
   <li>FOLLOWERS</li>
</ul>

CSS3:

ul {
    width: 100%;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    float: left;
}

li {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    float: left;
    width: 50%;
    height: 50px;
    display: block;
    margin: 0px;
    background-color: #444;
    border-left: 1px dotted #DDD;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    color: #888;
}
li:first-of-type {
    border-left: none;
}
li:hover {
    color: #55E000;
    border-bottom: 5px solid #55E000;
    background-color: #333;
}

But I couldn't get the font family correctly. :(

+2


source


use this

.header
    {
        margin-left: auto;
        margin-right: auto;
        height: 102px;
        background-color: #F0F0F0;
        width:500px

    }
    .header .header-first
    {
        float: left;

        width: 216px;
        border-bottom: 3px solid #3CA2DF;
    }

    .header .header-last
    {
         width: 216px;
         float:right;

    }
+2


source


The font is not Arial for sure, I believe its calibers and will try this code for you solution

<html>
<body>
<div style="border-bottom: 3px solid #00ff00; 
     background:#000; 
     height: 50px; 
     width:400px; 
     color:#00ff00; 
     text-align:center;">
FOLLOWERS
</div>
</body>
</html>
+1


source


Also try

<html>
<head>
<style>
td
{
width:400px;
background:#000; 
color:#fff; 
text-align:center;
height: 100px;
font-size:20px;
}
td:hover
{
text-decoration: underline;
border-bottom: 3px solid #00ff00;
color:#00ff00;
}
</style>
</head>
<body>
<table style="margin:0 auto;">
<tr>
<td>Following</td>
<td>Followers</td>
</tr>
</table>
</body>
</html>
+1


source






More articles:


All Articles