How would I change the axis of an hr line?

HTML & CSS
61

Like this?

.hr5  {
    width:828px; 
    padding-right: 324px;
    padding-left: 324px;
}
.hr5 img {
margin:28px 15px 0 0;

324px which equals 319px on both sides.

62

In post #56 I specifically said that balanced margins should be applied to the images (like my CSS shows). I did not say anything about adding padding to their container. You have borked the container by applying unnecessary padding and done nothing to the margins applied to the images.

Is the hour getting late for you? Are you getting tired of reading?

Do you just want copy and paste code? No learning involved? I’m just trying to understand…

63

So, I just change padding to margin like this?

.hr5  {
    width:828px; 
    margin-left: 324px;
    margin-right: 324px;
    
}
.hr5 img {
margin:28px 15px 0 0;

It’s even.

838×110 260 Bytes

64

As @ronpat has tried repeatedly to explain, your image should have the same margin on the right and on the left. You can use the shorthand method of writing this, or the longhand version. What you have here says that 28px of margin will be applied to the top, 15px to the right, and no margin to the bottom or the left.

ronpat provided a good explanation of how to use the shorthand method in post #36, but if you are unable to follow that, I suggest you use the longhand method instead.

1 Like
65

You can declare that as fact, but that does not make it true.

Unnecessary Brute force does not make the code good. Remove the {margin-left:324px} and {margin-right:324px} that you have unnecessarily added to .hr5 and see if the blue images are still centered.

You have already been given suitable CSS, and you were smart enough to remove that {height:5px} that I didn’t even see. All you really need to do is copy my code and change the margin widths to suit yourself. If you cannot understand how to use the shorthand method, then use longhand, as @TechnoBear said. What’s the problem? What are you trying to prove?

This reference article provides great examples of CSS shorthands:
https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

I know that you are a smart person and I will continue to work with you until you start pretending that you are stupid. Then I will stop and take a very long break… just as I did before. It’s called “self preservation”.

2 Likes
66

This doesn’t work.

.hr5  {
    width:828px; 
    height:5px;
    text-align:center;

    
}
.hr5 img {
margin:28px 319px 0px 319px;
67

Use the CSS that you posted in #55 and add 11px of left margin.

68

I want 15px between the images though. That’s why I have 15.

69

If you can live with 16px or 14px, then apply half of the total to the left and right margins.

.hr5 img {padding:28px 8px 0}
70

If you insist on 15px then this will give you 15px but the centering will be lost if the images wrap to the next line.

.hr5 img {padding-top:28px}
.hr5 img + img {padding-left:15px}

or this

.hr5 img {
    padding-top:28px;
    padding-left:15px;
}
.hr5 img:first-child {
    padding-left:0;
}

Personally, I think using equal left and right margins is easier and the images will remain centered if they wrap to the next line. But to each his own…

1 Like
71

This one works, the 1st one shows the text below moved all the way to the left.

.hr5 img {
    padding-top:28px;
    padding-left:15px;
}
.hr5 img:first-child {
    padding-left:0;
}

829×180 2.81 KB

72 
.hr5 img {padding-top:28px}
.hr5 img + img {padding-left:15px}

835×166 2.83 KB

73

All three methods work.

You have changed tracks…

You have not shown the code for the text following the images.

74 
 <style type="text/css">

.hr3 {
padding:4px 32px 32px;

}


.hr3 span {
    display:block;
    width:760px; 
    height:8px;
    background-color:#1155cc;
    transform:rotate(-.9deg);
    margin:7px 0 0 -5px;  /* changed from "15px auto" so the underline will left align. */
}

.hr4  {
    display:block;
    border-bottom:5px solid #38761d;
    width:828px; 
    height:5px;
    margin:-167px 0 0;
}

.hr5 {
    width:828px; 
text-align:center;

}
.hr5 img {
padding-top:28px}
}

.hr5 img + img {
padding-left: 15px}

}
 
.hr6 {
    width:828px; 
    text-align:center;
padding:18px 0px 0px;
}


.hr6 span {
    display:block;
    background-color:#1155cc;

}


    </style>

<p class="hr3"  style='margin:0; border:5px solid #38761d;width:754px; height:269px;  background-color:#000; font-style:normal; font-family:georgia; font-size:89px; color:#38761d'>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" style='margin:0;  font-style:normal; font-family:georgia; font-size:28px; color:white'>Testing The Text<span></span></p>
75

Stray closing curly braces (2)

Delete the “extra” closing braces.

.hr5 img {
padding-top:28px}  /* replace curly brace with semicolon */
}

.hr5 img + img {
padding-left: 15px}  /* replace curly brace with semicolon */

}

or keep each selector and property on one line (as I wrote it)…

.hr5 img {padding-top:28px}
.hr5 img + img {padding-left:15px}

then try all three methods of centering the images AGAIN.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>catch-up</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-change-the-axis-of-an-hr-line/236403
asasass
-->
    <style type="text/css">

body {
    background-color:#aaa;
}
.hr3 {
    width:754px;
    height:269px;
    border:5px solid #38761d;
    background-color:#000;
    color:#38761d;
    font-style:normal;
    font-family:georgia;
    font-size:89px;
    text-align:center;
    padding:4px 32px 32px;
    margin:0;
}
.hr3 span {
    display:block;
    width:760px; 
    height:8px;
    background-color:#1155cc;
    transform:rotate(-.9deg);
    margin:7px 0 0 -5px;  /* changed from "15px auto" so the underline will left align. */
}

.hr4  {
    display:block;
    border-bottom:5px solid #38761d;
    width:828px; 
    height:5px;
    margin:-167px 0 0;  /* this is a sign of a structural problem. */
}

.hr5a {
    width:828px;
    text-align:center;
}
.hr5a img {
    padding:28px 8px 0;
}

.hr5b {
    width:828px;
    text-align:center;
}
.hr5b img {
    padding-top:28px;
}
.hr5b img + img {
    padding-left:15px;
}

.hr5c {
    width:828px;
    text-align:center;
}
.hr5c img {
    padding-top:28px;
    padding-left:15px;
}
.hr5c img:first-child {
    padding-left:0;
}

.hr6 {
    width:828px;
    color:white;
    text-align:center;
    font-style:normal;
    font-family:georgia;
    font-size:28px;
    padding:18px 0 0;
    margin:0;
}
.hr6 span {
    display:block;
    background-color:#15c;
}

    </style>
</head>
<body>

<p class="hr3">Testing The Text<span></span></p>

<div class="hr4"></div> 

<div class="hr5a"><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>

<div class="hr5b"><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>

<div class="hr5c"><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<span></span></p>

</body>
</html>
76

I like this way.

.hr3 {
   margin: 0;
   width: 754px;
   height: 269px;
   font-family: georgia;
   font-size: 89px;
   color: #38761d;
   padding: 4px 32px 32px;
   border: 5px solid #38761d;
   background-color: #000;
 }
 
 .hr3 span {
   display: block;
   width: 760px;
   height: 8px;
   background-color: #1155cc;
   transform: rotate(-.9deg);
   margin: 7px 0 0 -5px;
   /* changed from "15px auto" so the underline will left align. */
 }
 
 .hr4 {
   display: block;
   border-bottom: 5px solid #38761d;
   width: 828px;
   height: 5px;
   margin: -167px 0 0;
 }
 
 .hr5 {
   padding-left: 324px;
 }
 
 .hr5 img {
   margin: 28px 15px 0 0;
 }
 
 .hr6 {
   margin: 0;
   width: 828px;
   padding: 18px 0;
   color: white;
   text-align: center;
   font-family: georgia;
   font-size: 28px;
 }
 
 .hr6 span {
   display: block;
   background-color: #1155cc;
 }
 
 </style>

<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<span></span></p>
77

Do you know how to Zoom TEXT ONLY larger and smaller in Firefox? (It’s a special setting)

If “yes”, then zoom the TEXT ONLY a couple or three clicks larger and smaller than the default size while viewing your page.

78

that’s okay. I’m mainly only using this as opposed to using Microsoft paint.

79

I have no idea how Microsoft Paint relates to zooming text-only in Firefox and watching the way the page behaves as the font size changes.

2 Likes
80

In Search of Structure

Just food for thought. Save it for future use, maybe.

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

.hr3 {
    border-bottom:8px solid orange;
    color:green;
    font-style:normal;
    font-size:8em;
    line-height:1;
    font-family:georgia,serif;
    text-align:center;
    padding:.25em 10% .25em;
    margin:0;
}

.hr3 span {
    display:block;
    height:12px;
    background-color:#15c;
    transform:rotate(-1deg);
    margin:24px -.25em 8px;  /* 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:0;
}

.hr5a {
    text-align:center;
}
.hr5a img {
    padding:28px 8px 0;
}

.hr5b {
    text-align:center;
}
.hr5b img {
    padding-top:28px;
}
.hr5b img + img {
    padding-left:15px;
}

.hr5c {
    text-align:center;
}
.hr5c img {
    padding-top:28px;
    padding-left:15px;
}
.hr5c img:first-child {
    padding-left:0;
}

.hr6 {
    color:white;
    text-align:center;
    font-style:normal;
    font-family:georgia;
    font-size:28px;
    padding:18px 0 0;
    margin:0;
}
    </style>
</head>
<body>

<div class="outer">
    <p class="hr3">Testing Text<span></span></p>
    <div class="hr4"></div> 
    <div class="hr5a"><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>
    <div class="hr5b"><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>
    <div class="hr5c"><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<span></span></p>
</div>

</body>
</html>

Open and view in browser.

Notice that the only wide width is assigned to .outer. All other inner boxes automatically fit that width. That is what blocks do by default.