The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Inline styling behaving differently when moved to external style file?
CharliePrince
post 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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharliePrince
post 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



QUOTE(pandy @ Nov 10 2020, 08:45 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharliePrince
post 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



QUOTE(pandy @ Nov 10 2020, 09:01 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. laugh.gif

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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 10 2020, 08:21 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(CharliePrince @ Nov 11 2020, 02:16 AM) *

QUOTE(pandy @ Nov 10 2020, 09:01 PM) *

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. cool.gif
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 01:22 PM