• Page 1 of 1
  • 1
Forum moderator: bigblog  
Horizontal Rule
Jessica0523
Posts: 18
Reputation: 0

Message # 1 | 8:33 PM
I have been using <hr> in the individual pages to separate paragraphs. I want to change the appearance of <hr> as I don't seem to have an option on how it looks. When I use <hr> it appears as a thin double line that travels the entire length from left to right of the body of the page. I want it to be shorter and centered (half of the page from left to right) and only a single line. From what I can tell it's supposed to be changed in CSS but I don't know what code to use or where to put it in CSS. I have attached a picture of how it currently looks vs. what I want it to look like. Can you please help me?
Attachments: 6043458.png (2.8 Kb)
joexyz
JOE-vascript
Posts: 1770
Reputation: 78

Message # 2 | 6:46 PM
Jessica0523, yo, could you provide your site's URL? Generally, you'd want something like this:

Code
hr {
  border: 0;
  height: 1px;
  width: 300px;
  background: #000;
}


at the end of your CSS.

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here
Jessica0523
Posts: 18
Reputation: 0

Message # 3 | 4:31 PM
Quote bigblog ()


It's supjess2.ucoz.com. It didn't work. I'm not sure if I'm putting it in the right place or if it should be added to the tag that says HR already. Can you show me an example in the CSS of where it should be? A picture would be helpful.
joexyz
JOE-vascript
Posts: 1770
Reputation: 78

Message # 4 | 11:17 AM
You can either replace this line (30th): https://i.imgur.com/Tro8yjp.png or insert the code at the very end of your CSS template (Style sheet CSS).

Since your website has a black background, you might also want to replace #000 with #fff or something or else the hr will not be displayed.

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here
Jessica0523
Posts: 18
Reputation: 0

Message # 5 | 11:31 PM
Okay, did what you suggested with both replacing <hr> code and putting it at the end. It is messing up my Menu when I do that. I am attaching a picture. Help?
Attachments: 6487499.jpg (322.3 Kb)
Harina
Posts: 62
Reputation: 0

Message # 6 | 4:48 AM
why use out of date design? It reason you havin the issue
Jessica0523
Posts: 18
Reputation: 0

Message # 7 | 4:59 PM
Quote Harina ()
why use out of date design? It reason you havin the issue


Because I like it. The other ones aren't the kind of theme I'm looking for. Too generic.
Harina
Posts: 62
Reputation: 0

Message # 8 | 2:16 PM
maybe you make it responsible then

Added (2019-04-04, 2:17 PM)
---------------------------------------------
sorry, i mean responsive

joexyz
JOE-vascript
Posts: 1770
Reputation: 78

Message # 9 | 8:17 PM
Harina makes a good point, that template is pretty outdated in terms of a lot of things.
hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here
Jessica0523
Posts: 18
Reputation: 0

Message # 10 | 8:37 PM
Quote bigblog ()
Harina makes a good point, that template is pretty outdated in terms of a lot of things.


I hear what you're saying but it goes with the theme of my website. I had to search through a lot of template builders to find anything close to what I was looking for. The new templates are basic and generic. I simply want to change the horizontal rule so it's not so big as it's too similar to the title heading. If anyone knows how to do this without messing up the menu, I'd really appreciate it.
joexyz
JOE-vascript
Posts: 1770
Reputation: 78

Message # 11 | 2:24 PM
Jessica0523, change "width" to "max-width"
hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here
Cyberdasm
Posts: 640
Reputation: 7

Message # 12 | 3:03 PM
Jessica0523, make an <hr> to have class or id so that it would not affect the other hr elements that you are using. You could make it responsive by using the bootstrap.
1F4BF3B
  • Page 1 of 1
  • 1
Search: