Jump to content

why doesn't the p.barbos align to the right, it never moves right no matter what i try


NicholasPM
 Share

Recommended Posts

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <style>
            header h1{
                text-align:center;
            }
            header img#elizaPic {
                float:left;
            }
            header img#barbosPic {
                float:right;
                transform:rotate(180deg);
            }
            p.eliza {
                display:block;
                text-align:left;
                border-top: 2px solid grey;
                border-bottom: 0px solid grey;
            }
            p.barbos {
                display:block;
                text-align:right;
                border-top: 2px solid grey;
                border-bottom: 0px solid grey;
            }
            p.eliza p.name {
                text-align:left;
            }
            p.barbos p.name {
                text-align:center;
            }
            p{
                display:block;
                border-top: 2px solid grey;
                margin: 1em;
                border-bottom: 0px solid grey;
            }
            
            .name {
                display:inline-block;
                color: #008;
                background-color: #ddd;
                font-weight:bold;
                font-size: 20px;
                border-top: 0px solid grey;
                border-bottom: 0px solid grey;
            }
            p#action {
                text-align: center;
                font-style:italic;
            }
        </style>
    </head>
    <body>
    <!--The top heading should be center-aligned.
The images of Eliza and Captain Barbos should be floating in the left and right corners respectively.
Each line of dialogue should have a top border that is 2px thick and gray in color.
Within each line of dialogue, the character's name should be shown in a "larger" font size, with the actor name text color set to #008 (a dark blue), with a background color of #ddd (a light gray), in bold.
There should be 1em of vertical blank space separating neighboring lines of dialogue.
Eliza's lines of dialogue should be aligned to the left, while Barbos's lines should be aligned to the right.
The aside about Barbos laughing should be center-aligned and shown in an italic font.
All other text uses default sizes and fonts.
 -->
        <header>
            <img src="eliza.png" id="elizaPic"/>
            <img src="barbos.png" id="barbosPic"/>
            <h1>Scene #7</h1>
        </header>
        <main>
            <p class="eliza"><p class="name">Eliza</p>Captain Barbos, I am here to negotiate the cessation of hostilities against Port Royal</p><br/>
            <p class="barbos"><p class="name">Barbos</p>There are a lot of long words in there, Miss. What is it that you want?</p><br/>
            <p class="eliza"><p class="name">Eliza</p>I want you to leave and never come back.</p><br/>
            <p id="action">(Barbos chuckles quietly. <br/>Eliza gives him an angry look.)</p><br/>
            <p class="barbos"><p class="name">Barbos</p>I'm disinclined to acquiesce to your request. Means "no."</p><br/>
        </main>
    </body>
</html>

Link to comment
Share on other sites

Why does this line of code look the way it is? 

 header img#elizaPic {
                float:left;
            }
            header img#barbosPic {
                float:right;
                transform:rotate(180deg);
            }

When you call an id it always should look like

            #elizaPic {
                float:left;
            }
            #barbosPic {
                float:right;
                transform:rotate(180deg);
            }

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...