Friday, 9 August 2013

Optional bottom border on a div

Optional bottom border on a div

I have two HTML samples... Basically there is always a name div in the
info div but the total number of could be more.
1)
<div class="person">
<div class="info">
<div class="name">Isabelle of_Bavaria</div>
</div>
</div>
2)
<div class="person">
<div class="info">
<div class="name">King of France Charles_V the_Wise</div>
<div class="title"><label>Title:</label>King of France</div>
<div class="date"><label>Birth:</label>Jan 21st, 1337</div>
<div class="date"><label>Death:</label>Sep 16th, 1380</div>
</div>
</div>
I'm using this bit of CSS to add a line under the name as well as a box
around the person div.
.person .name
{
position: relative;
text-align: center;
border-bottom: 1px dotted black;
}
.person
{
position: relative;
width: 250px;
height: auto;
border: 1px solid black;
margin-top: 5px;
padding: 5px;
}
Is there anything I can do with the css to prevent the name from having a
border in sample 1 while leaving it in sample 2 without the need for
additional classes or divs?

No comments:

Post a Comment