How would I change the axis of an hr line?

HTML & CSS
141

Nothing, if you assign max-width and not just width.

The name of the game is to avoid fixed dimensions where possible.

(but DO give the percent width the courtesy of a try.)

142

Wait a second, I thought we were removing padding, and making them all margins?

143

That interesting keyword “ALL” again.

At times, you seemed to be confused about whether to use paddings or margins so we went through that exercise so you could see how similar they can be and how they interact. I never knew if you read the image comparing padding and margin that I created. So we did it in real life. Now you have hands-on experience. In real life one chooses the padding or margin depending on the need. In the last paragraph in post #137, I said that I had changed my mind about using margin-bottom in that ONE place and decided that padding-bottom would be slightly better. It still does not matter, as the comment says. You can use margin-bottom or padding-bottom. Padding will prevent margin-collapse, though.

You might read post #118 again where I mentioned “learning exercise”.

144

Wat’s the difference between (-.9deg); and (-1deg); ?

145

**.**1deg. Does that matter? I don’t know why @dresden_phoenix chose -.9deg for the tilt of the blue line instead of 1deg or 1.1deg. Does it matter?

I think he is a Macintosh user. Perhaps the Mac has a problem with 1deg, or maybe his artist’s eye told him .9deg was closest to the tilt that you used. I don’t know. Perhaps he will join this thread again and tell us.

146

There’s a slight difference between
-1deg and -.9deg

147

This works.

.hr3 span {
    display:block;  
    height:8px;
    background-color: #15c;
    transform:rotate(-.9deg);
    margin-top:8px;
    margin-left:-2px;
    margin-right:0px;
148

and first impressions matter.

149

compared to what?

150

oh, that’s exactly what you had. my bad.

151

No, that’s not my code. That’s your code except that the fixed width is missing.

1 Like
152 
I got it with no fixed width.

.hr3 span {
    display:block; 
    height:8px;
    background-color: #15c;
    transform:rotate(-.9deg);
    margin-top:8px;
    margin-left:30px;
    margin-right:32px;
153

Suppose those horizontal margins were experessed in percents. Then the margins would shrink as the page width became narrower… just like a line with a percent width would.

Someday you may want to write a modern web page. Avoiding fixed widths is one of the most important steps you can take and it doesn’t hurt to start learning and maybe practicing a little for the future today.

2 Likes
154

padding wouldn’t work cause I need 148px.

I have margin-bottom:-6px;

155

Where?

156

What’s wrong with using this?

.hr4  {
    display:block;
    border-bottom:5px solid #38761d;
    height:5px;
    margin-top:27px;
157 
.hr3 {
    color: #38761d;
    font-style:normal;
    font-size: 89px;
    font-family:georgia;
    text-align:center;
    margin-top:4px;
    margin-bottom:-6px;
158

This is what I have.

    <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-top:4px;
    margin-bottom:-6px;


}

.hr3 span {
    display:block; 
    height:8px;
    background-color: #15c;
    transform:rotate(-.9deg);
    margin-top:8px;
    margin-left:30px;
    margin-right:32px;


}

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

}

.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:23px;  /*315*/
}
    </style>
</head>
<body>

<div class="outer">
    <p class="hr3">1234567 123 12345<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>
159

“Wrong” is not the right word.

Why use 4 lines of CSS when one or two would be sufficient? You are using code unnecessarily.

Applying the height is unnecessary. All that is needed is the colored border-bottom (or top).

Likewise the margin-top would be unnecessary if you used margin-bottom or padding-bottom on .hr3 as my revised recommendation states.

.hr4 is a block element. Default block elements do not need to be told to behave like a block.

160

I changed it to -1px and removed height & block on .hr4.

.hr3 {
color: #38761d;
font-style:normal;
font-size: 89px;
font-family:georgia;
text-align:center;
margin-top:4px;
margin-bottom:-1px;