CODEWITHSUNDEEP
htmlcss
Kevin Fischer
Kevin Fischer

Reputation: 352

Vertical Line in CSS that doesn't take up the whole border

I read this article: How to make a vertical line in HTML but the height style didn't work for <th> tags

My CSS is like this:

.verticalLine
{
    width: 1px;
    background-color: Black;
    height: 10px;
}

My HTML is this:

<th class="verticalLine"></th>

Unfortunately, the vertical line spans the whole border. I have tried percentages instead of pixels, to no avail.

Edited

.navCenter { text-align:center; display:table-cell; } <nav style="margin-left:auto; margin-right:auto; width: 70%; height:55px;"> <table> <tr class="navCenter"> <th><h2><a href="Home.aspx" style="padding: 2px; color: Blue;"><img src="Pictures/BartleHallToppers.jpg" height="42px" width="100px"/></a></h2></th> <th class="verticalLine"></th> <th><h2><a href="Events.aspx" style="padding: 2px; color: Blue; text-decoration: none;">Events</a></h2></th> <th><h2><a href="" style="padding: 2px; color: Blue; text-decoration: none;">Restaurants</a></h2></th> <th><h2><a href="" style="padding: 2px; color: Blue; text-decoration: none;">Hotels</a></h2></th> <th><h2><a href="" style="padding: 2px; color: Blue; text-decoration: none;">Points of Interest</a></h2></th> <th><h2><a href="" style="padding: 2px; color: Blue; text-decoration: none;">Public Works</a></h2></th> <th><h2><a href="" style="padding: 2px; color: Blue; text-decoration: none;">Road Construction</a></h2></th> <th><h2><a href="FAQ.aspx" style="padding: 2px; color: Blue; text-decoration: none;">Contact Us</a></h2></th> </tr> </table> </nav>

Upvotes: 0

Views: 649

Answers (2)

zhrivodkin
zhrivodkin

Reputation: 71

Using tables for creating nav menu is not a best practic, but your code should work, if you put th into table:

.verticalLine {
    width: 1px;
    background-color: Black;
    height: 10px;
}
<table>
    <th class="verticalLine"></th>
</table>

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

using tables is not a good practice for creating a navigation

you can ul li and for border pseudo

JS Fiddle

li:not(:last-child):after {
    content:"|";
    position:absolute;
    right:0;
    top:0;
}

or 

li:not(:last-child):after {
    content:" ";
    width:1px;
    position:absolute;
    border-right:1px solid;
    right:0;
    top:0;
    bottom:0;
}

Upvotes: 3

Related Questions