• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Image alignment

Krygore

New Coder
I have two issues that I am currently facing.
First, I'm having issues getting an image to align to the right hand side of the page with the text to the left, capable of wrapping underneath the image. Like a standard web page would show.
Second, I would like to change the color of linked text so that it is more visible against a darker background. I'm unsure if this is done within the <a> tag or if it is something done within CSS.

Here's where I'm at...

Image alignment:
    <section>
        <div class="container">
            <img id="whoareyoujpg" src="images/who_are_you.jpg">
        </div>
        <p>Here, you will begin the creation of your Dragonborn character. There are ten different <strong><em><span color="goldenrod">races</span></em></strong> to choose from;</p>
        <ul id="race-list">
            <li>Altmer (High Elves)</li>
            <li>Argonian</li>
            <li>Bosmer (Wood Elves)</li>
            <li>Breton</li>
            <li>Dunmer (Dark Elves)</li>
            <li>Imperial</li>
            <li>Khajiit</li>
            <li>Nord</li>
            <li>Orc</li>
            <li>Redguard</li>
        </ul>
    </section>
Link text color:
 <section>
                <h3>Table of Contents</h3>
                <table id="table-of-contents">
                    <tr>
                        <td><a href="a_new_beginning.html" target="_blank">A New Beginning</a></td>
                    </tr>
                </table>
            </section>
CSS:
  /*A New Beginning*/

#whoareyoujpg{
    align-content: right;
    height:200px
}
#race-list{
    color:goldenrod;
    text-decoration: underline;
}
}
#table-of-contents{
    color:rgb(216, 189, 35)
}

Hope this coding helps.
 
Solution
I have two issues that I am currently facing.
First, I'm having issues getting an image to align to the right hand side of the page with the text to the left, capable of wrapping underneath the image. Like a standard web page would show.
Second, I would like to change the color of linked text so that it is more visible against a darker background. I'm unsure if this is done within the <a> tag or if it is something done within CSS.

Here's where I'm at...

Image alignment:
    <section>
        <div class="container">
            <img id="whoareyoujpg" src="images/who_are_you.jpg">
        </div>
        <p>Here, you will begin the creation of your Dragonborn character...

Antero360

Coder
I have two issues that I am currently facing.
First, I'm having issues getting an image to align to the right hand side of the page with the text to the left, capable of wrapping underneath the image. Like a standard web page would show.
Second, I would like to change the color of linked text so that it is more visible against a darker background. I'm unsure if this is done within the <a> tag or if it is something done within CSS.

Here's where I'm at...

Image alignment:
    <section>
        <div class="container">
            <img id="whoareyoujpg" src="images/who_are_you.jpg">
        </div>
        <p>Here, you will begin the creation of your Dragonborn character. There are ten different <strong><em><span color="goldenrod">races</span></em></strong> to choose from;</p>
        <ul id="race-list">
            <li>Altmer (High Elves)</li>
            <li>Argonian</li>
            <li>Bosmer (Wood Elves)</li>
            <li>Breton</li>
            <li>Dunmer (Dark Elves)</li>
            <li>Imperial</li>
            <li>Khajiit</li>
            <li>Nord</li>
            <li>Orc</li>
            <li>Redguard</li>
        </ul>
    </section>
Link text color:
 <section>
                <h3>Table of Contents</h3>
                <table id="table-of-contents">
                    <tr>
                        <td><a href="a_new_beginning.html" target="_blank">A New Beginning</a></td>
                    </tr>
                </table>
            </section>
CSS:
  /*A New Beginning*/

#whoareyoujpg{
    align-content: right;
    height:200px
}
#race-list{
    color:goldenrod;
    text-decoration: underline;
}
}
#table-of-contents{
    color:rgb(216, 189, 35)
}

Hope this coding helps.
I do believe you are looking for the float attribute:
( https://www.w3schools.com/css/css_float.asp )

As far as your second question is concerned.. you can do either or..
so CSS, which stands for Cascading Style Sheets... has 2 main ways of working.. a css file (style.css), or what we call inline-styling. Inline-styling is added right on the html tag itself see below:
<div id="myId" style="float: left; height: 200px;">
</div>

WARNING: be careful how you style lol.. order on the stylesheet link does indeed matter.. as well as inline vs .css...
any styling done to a given element in multiple stylesheets, may not take effect.. the last stylesheet will take precedence.. any inline-styling will override any .css styling.
 
Solution

Krygore

New Coder
I do believe you are looking for the float attribute:
( https://www.w3schools.com/css/css_float.asp )

As far as your second question is concerned.. you can do either or..
so CSS, which stands for Cascading Style Sheets... has 2 main ways of working.. a css file (style.css), or what we call inline-styling. Inline-styling is added right on the html tag itself see below:
<div id="myId" style="float: left; height: 200px;">
</div>

WARNING: be careful how you style lol.. order on the stylesheet link does indeed matter.. as well as inline vs .css...
any styling done to a given element in multiple stylesheets, may not take effect.. the last stylesheet will take precedence.. any inline-styling will override any .css styling.
So I should add an id to all specialized images to prevent messing with the defaults I have set in css stylesheet?
 

Krygore

New Coder
As far as the coding goes, how's this look? Easy enough to understand or too easy to confuse?
HTML:
 <section>
        <div class="rightalignimg">
            <img id="whoareyoujpg" src="images/who_are_you.jpg">
        </div>
CSS:
.rightalignimg{
    float:right;
}

#whoareyoujpg{
    width:40%;
}
 

LTomy

Active Coder
Staff Team
Guardian
Looks good ;)

Two little things:

1. I thing you should use camelCase naming: rightalignimg -> rightAlignImg.
2. Maybe you should rename 'whoareyoujpg' to 'width40perc', or something like that, and make it a class so it can reused.

Note that you can give many classes to an element, like that:

HTML:
<img src="img.png" class="class1 class2, class3">
 
Top