CODEWITHSUNDEEP
cssborder
Michiel
Michiel

Reputation: 8083

CSS-border of a certain hight

I have a website with a navigation and some borders as a devider. But I don't want the border to stretch from top 'till bottom. Any idea how to do this?

Currently, I have the first image, but I would like to make the lower one. I was thinking padding or line-height, but I'm not sure...

enter image description here

Upvotes: 1

Views: 130

Answers (3)

Tim Vermaelen
Tim Vermaelen

Reputation: 7059

use padding yes

.yourlink {display:inline-block;padding:10px 0; border-right: 1px solid #000;}

Worked out a solution: http://jsfiddle.net/X4DZS/1/

HTML

<ul id="mymenu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
</ul>

CSS

#mymenu {display:block;height:40px;padding:10px;background-color:Green;}
#mymenu li {display:inline-block;background-color:Green;float:left;}
#mymenu a {display:block;color:#000;padding:10px;border-right:1px solid #000;height:20px;text-decoration:none;}
#mymenu li:hover {background-color: Blue;}
#mymenu li:hover a {color:#fff;text-decoration:underline;}

Upvotes: 1

tutts
tutts

Reputation: 2433

create a <div> inside another.

.first{
line-height:20px;
}

.second{
height:15px;
border-right:1px solid #000000;
}

then

<div class="first">
<div class="second">Test here</div>
</div>

Upvotes: 1

c4urself
c4urself

Reputation: 4287

easiest would be to use a div inside another div, the inside div can get the border and the outside one the padding.

Upvotes: 0

Related Questions