I'm trying to have my navigation bar look something like Na Wong's Google Reader extension shown in the attached screenshot. I would want something that is done using only CSS and no images. Is that possible?

  • Can you be more descriptive? Which horizontal lines are you trying to re-create? You can make horizontal lines by adding a `border-top` or `border-bottom`. Is it more complex than that? Michael Martin-Smucker over 8 years ago

2 answers

This was chosen as the best answer

You can create a horizontal line with CSS using the border property. Add a border to any element.

If you had a containing div with a class of border and wanted a 1px solid black line under it, add this CSS:

div.border { border-bottom: 1px solid #000; }
Answered over 8 years ago by Artistic Abode
  • Wow didn't know that borders can be used that way. Thanks. Jonathan Chua over 8 years ago

You can do as Artistic Abode stated add a border to any element with the following css declarations:

element {
     border-bottom: 1px solid black;
     border-top: 1px solid black;

You can adjust the thicknet of your border by changing the px property in the border statement. You could also just make a placeholder element to the height and width of your desired line and add your desired background color.

element {
     background-color: black;

Then use whatever CSS positioning method you would like to get the placeholder element into its expected real estate. Either way should work for you.

Answered over 8 years ago by John Turknett