Silentbob Silentbob - 5 months ago 19
HTML Question

Reduce a white gap between two <hr> tags

I have the following menu menu

The two lines are both 'hr' tags and the menu is a div containing a ul. I have been googling for a while now and trying adjusting the css with margin and padding but I want to reduce the white space between the lines and the text bringing them closer to the text.

HTML:

<hr id="header_line"/>
<div id="menu_bar">
<ul>
<li><a href="#">Add new Form</a></li>
<li><a href="#">View old forms</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Site Administration</a></li>
</ul>
</div>
<hr id="under_menu_line"/>


CSS:

#menu_bar ul {
list-style:none;
padding-left:0px;
}

#menu_bar ul li {
display:inline;
padding-left:10px;
}

#menu_bar ul li a {
text-decoration:none;
color:Black;
font-family:Century Gothic;
font-size:12pt;
}

#menu_bar ul li a:hover {
color:#007C5A;
}

#header_line {
margin-top:5px;
}

#under_menu_line {
margin-top:5px;
}


Any ideas?

Answer

The best solution would be to drop the <hr>s, and use border-top and border-bottom in conjunction with padding on the div.

<hr> should be used as a horizontal rule. For instance, a hard separation of paragraphs or a long break. And not as a visual element.

Comments