hr width problems - Post ID 294318

User 2816895 Photo


Guest
3 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
13,369 posts
Online Now

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
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2906089 Photo


Registered User
190 posts
Online Now

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>

User 379556 Photo


Registered User
1,158 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.