Inline styling behaving differently when moved to external style file? |
Inline styling behaving differently when moved to external style file? |
CharliePrince |
Nov 10 2020, 07:30 PM
Post
#1
|
Novice Group: Members Posts: 24 Joined: 7-November 20 From: Saint Louis, MO Member No.: 27,623 |
I'm having difficulties moving an inline style to external style file. The problem is. . . When I move the style code (from inline styling) to (an external style file) it displays the <p> text as left-aligned. See <p class="aln_and_margs";> in the code below (4th line) it should be right aligned but it's left aligned in the browser
See the line with the comment (<!--this aligns left, I want it to text-align: right; ?? -->) 4th line down in code (external scc), in the browser 'Programming:' is left aligned Compared to the equivalent line commented (<!--with inline styling, this aligns right.--> in the browser 'Programming:' is right aligned Can anyone help? CODE <div class="row";> <div class="column"> <p class="aln_and_margs";> Programming: <!--this aligns left, I want it to text-align: right; ?? --> </p> </div> <div class="column"> <p style="margin-top:unset; margin-bottom:unset;"> His door nothing form and i said bosoms visiter smiling each that have that sad </p> </div> </div> <div class="row";> <div class="column"> <p style="text-align: right; margin-top: unset; margin-bottom: unset;"> Programming: <!--with inline styling, this aligns right.--> </p> </div> <div class="column"> <p style="margin-top:unset; margin-bottom:unset;"> His door nothing form and i said bosoms visiter smiling each that have that sad </p> </div> </div> CODE p.aln_and_margs { text-align: right; margin-top: unset; margin-bottom: unset; } div.column { float: left; width: 40%; padding-right: 10px; } /* Clear floats after the columns */ div.row:after { content: ""; display: table; clear: both; } |
pandy |
Nov 10 2020, 07:45 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
It is right aligned. I think you maybe misunderstand what text-align does. It aligns inline content of the block level element that it's applied too. If you give that P a background color you can see that it stretches all the way to the left edge of the page and that the text within it is right aligned.
It would look exactly the same if the CSS was inline. You must have changed something else. Can you show us how the version with inline CSS looks, because I don't really understand what you expect to happen. |
pandy |
Nov 10 2020, 08:01 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Forgot to say, you have some semicolons in the HTML that should be there.
CODE <p class="aln_and_margs";> CODE <div class="row";> Semicolons are for CSS, not HTML. And they aren't end of statement characters, they are delimiters used when properties are listed, like we use comma in normal english when we list items (apples, pears, bananas). It is allowed to use them after the last property in a list, but it isn't needed. So it's alright how you use them in your CSS, just thought I'd mention this. But you must remove them from the HTML. |
CharliePrince |
Nov 10 2020, 08:13 PM
Post
#4
|
Novice Group: Members Posts: 24 Joined: 7-November 20 From: Saint Louis, MO Member No.: 27,623 |
You must have changed something else. Feel like I'm losing my mind ha. it's working here now too. I cannot understand what I was doing earlier and cannot get it to not work now. Nevertheless, what I was seeing earlier was the word 'Programming' on the left side of its container but it's on the right now. Sorry for this mistaken question. |
CharliePrince |
Nov 10 2020, 08:16 PM
Post
#5
|
Novice Group: Members Posts: 24 Joined: 7-November 20 From: Saint Louis, MO Member No.: 27,623 |
Forgot to say, you have some semicolons in the HTML that should be there. CODE <p class="aln_and_margs";> CODE <div class="row";> Semicolons are for CSS, not HTML. And they aren't end of statement characters, they are delimiters used when properties are listed, like we use comma in normal english when we list items (apples, pears, bananas). It is allowed to use them after the last property in a list, but it isn't needed. So it's alright how you use them in your CSS, just thought I'd mention this. But you must remove them from the HTML. That's what it must have been , a semi colon . . . This <p class="aln_and_margs;"> creates the issue I was seeing |
pandy |
Nov 10 2020, 08:18 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Ha ha! No wonder I couldn't understand what you were trying to do.
No problem. Unnecessary questions are OK. It happens to all of us. Sometimes something unexpected happen and when we try to repeat it we can't. Agree it's highly annoying not being able to figure out what one did though. |
pandy |
Nov 10 2020, 08:21 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Forgot to say, you have some semicolons in the HTML that should be there. CODE <p class="aln_and_margs";> CODE <div class="row";> Semicolons are for CSS, not HTML. And they aren't end of statement characters, they are delimiters used when properties are listed, like we use comma in normal english when we list items (apples, pears, bananas). It is allowed to use them after the last property in a list, but it isn't needed. So it's alright how you use them in your CSS, just thought I'd mention this. But you must remove them from the HTML. That's what it must have been , a semi colon . . . This <p class="aln_and_margs;"> creates the issue I was seeing Really? Could I have removed that before I looked at it in a browser? I don't think so. I must try. Wait a sec... YES! I must have. So it turns out I'm the stupid one. |
Lo-Fi Version | Time is now: 28th March 2024 - 04:01 PM |