How would I change the axis of an hr line?

HTML & CSS
121 
 <style type="text/css">
.outer {
    max-width:818px;  /*828 */
    border:5px solid #38761d;
    background-color:#000;
    margin:0 auto;
}

.hr3 {
    color: #38761d;
    font-style:normal;
    font-size: 89px;
    font-family:georgia;
    text-align:center;
    margin: -2px 32px 32px;
   
}

.hr3 span {
    display:block;
    width: 760px;
    height:8px;
    background-color: #1155cc;
    transform: rotate(-.9deg);
    margin: 8px 0 0 -5px;  /* negative horizontal margin pulls underline into .hr3's horizontal padding; thus, wider than text. */
}

.hr4  {
    display:block;
    border-bottom:5px solid #38761d;
    height:5px;
    margin-top:34px;
}

.hr5 {
    text-align:center;
}
.hr5 img {
    margin:28px 8px 0;
}

.hr6 {
    color:white;
    text-align:center;
    font-style:normal;
    font-family:georgia;
    font-size:28px;
    margin-top:18px; 
    margin-bottom:16px;  /*315*/

}
    </style>


<div class="outer">
    <p class="hr3">testing the text<span></span></p>
    <div class="hr4"></div> 
    <div class="hr5"><img src="https://i.imgur.com/ghT7ZVi.png"><img src="https://i.imgur.com/ghT7ZVi.png"><img src="https://i.imgur.com/ghT7ZVi.png"></div>
    <p class="hr6">Testing The Text</p>
</div>
122

Some changes in .hr3, .hr3 span, and .hr4.

See what you think (and be sure to read the comments in the CSS for explanations) 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>padding vs margin #121a</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-change-the-axis-of-an-hr-line/236403/121
asasass
-->
    <style type="text/css">
.outer {
    max-width:818px;  /*828 */
    border:5px solid #38761d;
    background-color:#000;
    margin:0 auto;  /* top+bottom  left+right */
}

.hr3 {
    color: #38761d;
    font-style:normal;
    font-size: 89px;
    font-family:georgia;
    text-align:center;
    margin:0 32px;  /* top+bottom  left+right *//* margin-top:-2px set to zero */
}

.hr3 span {
    display:block;
/*    width: 760px;  /* DELETE ME! a fixed width is not needed for this default block. */
    height:8px;
    background-color: #15c;
    transform:rotate(-1deg);
/*    margin: 8px 0 0 -5px;  /* top  right  bottom  left *//* (insignificant) negative margin-left pulls underline into .hr3's horizontal padding; thus, wider than text. */
    margin-top:8px;
}

.hr4  {
    display:block;
    border-bottom:5px solid #38761d;
    height:5px;
    margin-top:32px;  /* space above middle green line *//* reduced from 34px */
}

.hr5 {
    text-align:center;
}
.hr5 img {
    margin:28px 8px 0;  /* top  left+right  bottom */
}

.hr6 {
    color:white;
    text-align:center;
    font-style:normal;
    font-family:georgia;
    font-size:28px;
    margin-top:18px; 
    margin-bottom:16px;  /*315*/
}
    </style>
</head>
<body>

<div class="outer">
    <p class="hr3">Testing The Text<span></span></p>
    <div class="hr4"></div> 
    <div class="hr5"><img src="https://i.imgur.com/ghT7ZVi.png"><img src="https://i.imgur.com/ghT7ZVi.png"><img src="https://i.imgur.com/ghT7ZVi.png"></div>
    <p class="hr6">Testing The Text</p>
</div>

</body>
</html>

Instead of pulling .hr3 up with {margin-top:-2px}, I took away 2px of space above the middle green line (34px reduced to 32px). I think it looks better, too :slight_smile:

Plus another unrelated tweak or two.

1 Like
123

width: 760px; was so I can readjust the blue line, if I remove it then I can’t change the width of it.

124

We need to talk about that a some more, then, after we finish with the height and vertical margins. OK?

125

it should be margin:-2px 32px;

That’s how you get 18px from the top border line.

126

How come you removed the 2nd 32px?

 margin: -2px 32px 32px;
127

Wrong shorthand again, dude.

What you have written is:

{margin:-2px 32px}  /* top+bottom  left+right */

You do not likely want a negative bottom margin. It affects stuff below it. Remember when you first posted the images? They were resting against the top of the green box because of a large negative margin on the line above them.
 

What you are saying is:

{margin:-2px 32px 0}  /* top  left+right  bottom */

 
I will say again that if you are expecting your layout to maintain cross-browser pixel perfection, you are in for a long, disappointing and ultimately futile struggle.

128

What has to be done with height and vertical margins?

129

Hi there Ron,

this thread seems to be going on for ever. :scream:

My little addition, using your code as a start, will help,
hopefully, get the post total up to 150. :mask:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>padding vs margin #121a</title>
<!--
    https://www.sitepoint.com/community/t/how-would-i-change-the-axis-of-an-hr-line/236403/122
    asasass
-->
<style >
.outer {
    max-width: 51em; 
    border: 0.3em solid #38761d;
    background-color: #000;
    margin: 0 auto;  
    text-align: center;
 }
.outer p:first-of-type {
    margin: 0 0.8em; 
    font-family: georgia;
    font-size: 5.6em;
    color: #38761d;
 }
.outer p:first-of-type::after {
    display: block;
    height: 0.1em;
    margin-top: 0.1em;;
    background-color: #15c;
    transform: rotate(-1deg);
    content: '';
 }
.outer div:first-of-type {
    border-bottom: 0.3em solid #38761d;
    height: 0.3em;
    margin-top: 2em;
 }
.outer img {
    margin: 1.75em 0.5em 0;
 }
.outer p:last-of-type {
    font-family: georgia;
    font-size: 1.75em;
    color: #fff;
    margin: 0.7em 0 0.6em;
 }
@media screen and (max-width: 30em) {
.outer p:first-of-type {
    margin: 0 0.2em; 
  }
 }
@media screen and (max-width: 23em) {
.outer p:first-of-type {
    font-size: 4em;
  }
 }
</style>
</head>
<body>
<div class="outer">
 <p>Testing The Text</p>
  <div></div> 
   <img src="https://i.imgur.com/ghT7ZVi.png" alt="">
   <img src="https://i.imgur.com/ghT7ZVi.png" alt="">
   <img src="https://i.imgur.com/ghT7ZVi.png" alt="">
 <p>Testing The Text</p>
</div>
</body>
</html>

coothead

130

That’s all confusing to me, I wonder what @ronpat thinks of your code.

131

Probably, not a lot. :mask:

I only did it to keep my mind and pinkies active, provide
a little food for thought and help the post count along, :sunglasses:

coothead

132

You will have to explain a little more about what you are asking. I do not understand what you are asking.

133

{margin-bottom:32px} was not doing anything useful in your layout. I used Firebug and discovered that it was serving no purpose, so I set it to zero. Sure enough, nothing changed.
:slight_smile:

134

Did we finish with the height and vertical margins?

135

In post #128 you asked…

In post #132 I replied…

Now in post #134 you ask

That’s up to you. If you do not have any more questions about the vertical margins and padding and how they affect height, and about how fixed heights are poor code (you can Zoom Text Only and figure that one out really quick for yourself ) then I guess we’re done with vertical margins, padding and heights. It’s your call, Mr. A.

136

ok, so How am I supposed to re-adjust the width of the blue line without adding width: 760px; to .hr3 span?

    <style type="text/css">
.outer {
    max-width:818px;  /*828 */
    border:5px solid #38761d;
    background-color:#000;
    margin:0 auto;  /* top+bottom  left+right */
}

.hr3 {
    color: #38761d;
    font-style:normal;
    font-size: 89px;
    font-family:georgia;
    text-align:center;
    margin:-2px 32px 0;
}

.hr3 span {
    display:block;

    height:8px;
    background-color: #15c;
    transform:rotate(-1deg);
/*    margin: 8px 0 0 -5px;  /* top  right  bottom  left *//* (insignificant) negative margin-left pulls underline into .hr3's horizontal padding; thus, wider than text. */
    margin-top:8px;
}

.hr4  {
    display:block;
    border-bottom:5px solid #38761d;
    height:5px;
    margin-top:32px;  /* space above middle green line *//* reduced from 34px */
}

.hr5 {
    text-align:center;
}
.hr5 img {
    margin:28px 8px 0;  /* top  left+right  bottom */
}

.hr6 {
    color:white;
    text-align:center;
    font-style:normal;
    font-family:georgia;
    font-size:28px;
    margin-top:18px; 
    margin-bottom:16px;  /*315*/
}
    </style>
</head>
<body>

<div class="outer">
    <p class="hr3">Testing The Test<span></span></p>
    <div class="hr4"></div> 
    <div class="hr5"><img src="https://i.imgur.com/ghT7ZVi.png"><img src="https://i.imgur.com/ghT7ZVi.png"><img src="https://i.imgur.com/ghT7ZVi.png"></div>
    <p class="hr6">Testing The Text</p>
</div>

</body>
</html>
137

It would be helpful if you described more about how you want to change the width of the blue line. Relative to what, if anything?

“.hr3” was assigned {display:table;} with the first iteration of the blue line. The table was assigned no width so it would hug the text and was horizontally padded to limit the width of the text. Negative horizontal margins were added to the blue line so it would be stretched wider than the text, per your request.

You’ve changed the code and the behavior of that blue line on you own a couple or three times since then.

Please describe how you want the width of the blue line to behave - wider than the text on both sides, same width as the text but offset to the left or right, or how? I will make it behave the way you wish (inasmuch as possible) and explain what makes it work that way.

FYI:
I have changed my mind about the {margin-bottom:0} assigned to .hr3. In retrospect, margin-bottom or padding-bottom:32px makes more sense. I will use {padding-bottom:32px} in my next post. It was true that it wasn’t doing anything useful in your code, but that is because of margin-collapse. It makes more sense to remove the margin-top from .hr4 than to delete the margin-bottom from .hr3. Hindsight at work.

I still want to know how you want to change the width of the blue line.

138

To be able to have a custom width of the blue line.

139

Try percent width and see if that is “custom” enough.

.hr3 {
    color:#38761d;
    font-style:normal;
    font-size:89px;
    font-family:georgia;
    text-align:center;
    padding-bottom:32px;  /* padding-bottom = space below blue line (could use margin-bottom instead) */
    margin-top:-2px;
    margin-bottom:0;
}
.hr3 span {
    display:block;
    height:8px;
    background-color:#15c;
    transform:rotate(-1deg);
    margin-top:8px;  /* space above the blue line */
}

.hr3 span {
    width:88%;
    margin-left:auto;
    margin-right:auto;
}

Also, PICK ONE of the following .hr4 rules, not both.

/* PICK ONE */
.hr4  {
    border-bottom:5px solid #38761d;
}
.hr4  {
    height:5px;
    background-color:#38761d;
}
140

What’s the issue with using px for width if it works fine that way?