Try adding this to your CSS stylesheet:
‘hr {
border:0;
color:#ededed;
background:#ededed;
height:1px;
}’
Hope that helps 🙂
Hi jbwhisler,
you can create an <hr> tag in the exact way that you have mentioned in your OP. You can add styles to it in the same way you can add styles to any other element. You can add them inline ie:
<hr style="width:100%;border:1px solid black;>
or, a better way to apply styles to an element is through adding specific classes to your element.
For example your HTML may look something similar to this:
<hr class="custom-seperator">
and you would create a CSS class called .custom-seperator and apply styles to it like so:
.custom-seperator {
width:100%;
border:1px solid black;
}
You can add the same class to all <hr> tags, so when you want to adjust a color, width or any other property you can go into the CSS and target all of your <hr> elements at the same time.
I hope this helps and points you in the right direction.
Evan
Everything looks good. I am trying to position the horizontal rule so that it is in the middle. What attribute should I use? The example I am experimenting with is still on my homepage. (The bottom two <hr>) Thank you both for your help.
To center the bottom two <hr> elements you just need to remove the 100% width that you have declared here:
.customhr { width:100%; }
When you remove the width decleration, your bottom two <hr>’s will shift back towards the middle.
Evan
Is there a way to make the width of the <hr> elements that same width as the top navigation bar that contains the links? Thanks.
You top bars are div borders, while you are trying to recreate the same using a horizontal rule. Remove ‘margin: 24px;’ from the bottom hr properties 🙂
Just find this in your CSS:
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin: 24px;
margin-bottom: 1.714285714rem;
width: 100%;
}
and remove the ‘margin: 24px;’ line.
Keith, that looks like it did the trick. Thanks again for all of your help. CSS is magic.
