CODEWITHSUNDEEP
htmlcsslinecss-position
MattGotJava
MattGotJava

Reputation: 185

How to position an <hr> line 3 pixels under text

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.

Upvotes: 2

Views: 10877

Answers (4)

cFreed
cFreed

Reputation: 4484

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>

Upvotes: 3

S. Walker
S. Walker

Reputation: 2162

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; }

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15911

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 */
}

Upvotes: 2

user4901091
user4901091

Reputation:

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.

Upvotes: 2

Related Questions