hr width problems - Post ID 294319

User 2816895 Photo


Guest
9 posts

Hi , I'm working on http://ossianenterprisepark.com/Busines … ions.html. I can style the <hr> by itself, but if I add the class attribute .blue, it will not recognize the styles. Also it will recognize the width in percentage, but not the height. why would that be?


.blue {
width:100%;
height30px;
background-color:#375BE3;


<hr class="blue"/>
User 122279 Photo


Senior Advisor
14,447 posts

After the word 'height' you need a colon, and at the end of the class .blue you need a '}'.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2906089 Photo


Registered User
222 posts

If I understand correctly, you want a rectangle that goes from edge to edge that is 30px high? I would use a div instead and apply the sizes to that. Then you have access to the border properties as well. Correct your css and you are good to go.

<div class="blue></div>

Learn something, Share something.
User 379556 Photo


Registered User
1,533 posts

Both the above answers are, of course, correct.

The <hr> element has the slight advantage of being instantly recognisable when reading an .html file, and is pretty flexible when it comes to styling, as shown on the following pages:

https://www.w3schools.com/howto/howto_css_style_hr.asp
https://www.w3schools.com/tags/tag_hr.asp

Frank

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.