Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

John Levy
John Levy
1,451 Points
Posted by John Levy
John Levy
1,451 Points

How to move text and images around the page

I want to move the images and text further down the page but it seems to only show up at the top of the page. I also want to put 3 boxes around the media, followers, and following which I cannot seem to be able to do. The html code I used is shown below. Thanks in advance John

<table class="product"><body>

        <tr>
            <td colspan="4" class="product_name">igbodybuildingworld</td>

</tr> <tr class

            <td><img src='igbodybuildingworld.jpg' width='56' height='56'></td>
            <td class="line-right"><strong>106</strong><br/>media</td>
            <td class="line-left"><strong>32K</strong><br/>followers</td>
            <td class="line-left"><strong>605</strong><br/>following</td>
        </tr>

4 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

You have some HTML errors, your table is overlapping the body. Move the table tag after the body tag. Also the tr tag for the second row is incomplete, it says class but is not setting the class to anything and is missing the closing angle (>).

Here's a repaired HTML, with some CSS added to move everything down a bit and add those 3 boxes::

<head>
    <style>
    .product {
        margin-top: 100px;
    }
    td[class^="line"] {
        border: 4px solid blue;  /* pick box color here */
        padding: 4px;
    }
    </style>
</head>
<body>
    <table class="product">
        <tr>
            <td colspan="4" class="product_name">igbodybuildingworld</td>
        </tr>
        <tr class="what_class_did_you_want_here">
            <td><img src='igbodybuildingworld.jpg' width='56' height='56'></td>
            <td class="line-right"><strong>106</strong><br/>media</td>
            <td class="line-left"><strong>32K</strong><br/>followers</td>
            <td class="line-left"><strong>605</strong><br/>following</td>
        </tr>
    </table>
</body>

Replace "what_class_did_you_want_here" with the actual class that you intended for the second row.

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

Hi John, shortly in the courses you will learn about CSS which is basically the styling to define the look and layout of text and other elements on the page. For now you could add this to the top of the page 

<style>
.product,
img {
position: relative;
top: 50px;
}
</style>

See this live here

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for the response. I have been going over the css basics too. I wanted to try and make something simple to get my feet wet and and looking to build a basic version of a site like this-http://www.igshoutouts.com/ Do you think this is a basic enough site or should I take a step back? Thanks John

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

Give it a try! Seriously I tried to recreate the apple website and learnt so much in the 2 days in which I failed. As someone once said, you must fail your way to success. That doesn't mean don't try hard. It means try hard and if you don't succeed, acknowledge that you have more to learn and that you've learnt from the experience :-)

EDIT: I think it was Les Brown who said that: https://www.facebook.com/Brown.Les/posts/10152721060284654

Nils Garland
Nils Garland
18,416 Points
Nils Garland
Nils Garland
18,416 Points

You need to add a "margin-top: 50;" and if you want a short drop distance <br />