1

So, in my website, I have some text at the front. I'm trying to put a <hr> 3 pixels under the text, however even when I try to dynamically position it, the <hr> still stays in the same place. Even try positioning it in this JSFiddle:

Text on top of HR line 3px

As you could probably tell, I cannot position it... and at the moment, it kind of looks ugly.

In the full website that I made, I have a <video> html tag, which is playing. It also has a top menu so that you can choose what category of my website you want to choose. Here's a screenshot:

My website

I'm also planning to add a button directly under the <hr>, but I think I should stick to this problem first.

| improve this question | |
1

Hide the <hr> and try adding the line to the paragraph.

Like this:

#toptext p {
    border-bottom: 1px solid red;
    line-height: 66px;
}

Then adjust the line-height.

| improve this answer | |
2

What happens in your current code is that the browser defaults are p {margin: ...some value depending on browser...;}.

So you must first add your own CSS rule to overwrite it, here: #toptext p {margin: 0;}.

Then you can freely choose how to position your <hr> using its margin-top.
Note that, as you have a big font-size for the text, it keeps some space under it, so you may have to use a negative margin for <hr>, like in the example below:

#toptext {
	font-family:"Open Sans", san-serif, Arial;
	font-size:500%;
	color:#000;
	text-align:center;
	position:absolute;
	top:5px;
	text-align:center;
	left:15%;
}
#toptext p {
  margin: 0;
}
#line {
	height: .5px;
	background-color: #03f;
  margin-top: -15px;
}
<div id="toptext">
  <p>MatthewTheBottleFlipper</p>
  <hr id="line"/>
  
</div>
Expand snippet

| improve this answer | |
1

remove all the excess css overkill and lets keep life simple :)

HTML

  <p>MatthewTheBottleFlipper</p>

CSS

p {
    font-family:"Open Sans", san-serif, Arial;
    font-size:500%;
    color:#000;
    text-align:center;
    position:absolute;
    top:5px;
    text-align:center;
    left:15%;
    border-bottom:solid 1px #000; /* u need this */
    padding-bottom:3px /* ...and this */
}
| improve this answer | |
0

The p tag naturally has margins and padding. Just remove it, and everything will work how you want: 

#toptext {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
}

#line {
height:0.5px;
background-color:#03f;
margin-top: 3px /* I can't position this three pixels under text */
}

p { padding: 0; margin: 0; }
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.