Help with HTML for my project

Question

I am working on a project and I cannot figure out how to attach text under each image anchor link without making the next image anchor link jump to the next line. I want all of my image anchor links lined up in single row from left to right in the middle of the page. Please help me I have been working on this for hours and cannot keep the to stay in line. Please Help Me!

Answer 1 · 2017-03-01T09:31:20Z

March 1, 2017 9:31am

Your CSS would also be good. Also, you should consider using the code formatting in the Markdown Cheatsheet or posting a link to an online playground like codepen.io to save room and make it more readable. The code you've provided makes it a bit difficult to figure out what you're trying to do, even after cleaned up, as it is.

@rogerdailey - I'm not sure about your folder structure so I can't advise you on getting the images to work when sourced locally, but using the links works for the bulk of what you're trying to do right now anyway. I've commented the changes I've made to make it a bit more clear. This may not be the perfect approach, but it gets the job done. The easy part was the HTML:

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <title>Video Tracker</title>
  <h1>Video Tracker<img class="title_img" src="http://images.clipartpanda.com/film-clipart-Movie-Clip-Art-1344.jpg"></h1>
</head>

<body>
  <div id="wrapper">
    <div class="upload">
      <a href="">
        <img class="upload_img" alt="Upload Video" src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/256/Misc-Upload-Database-icon.png">
        <p>Upload Video</p> 
<!--
        Just added a <p> tag here with the text on all 3 anchors. 
        Used the alt text for the image, but you can use anything. 
        If you don't want the text itself to be a link, then move 
        it just outside the </a> closing tag but before the </div> 
        closing. Most of the changes are in the CSS. 
-->
      </a>
    </div>
    <div class="edit">
      <a href="">
        <img class="edit_img" alt="Edit Video Info" src="http://static.allmyapps.com/data/apps/17/3/17347/15ed03a4472131f35d7dc9637ddaa00b_video_editor_icon.png">
        <p>Edit Video Info</p>
      </a>
    </div>
    <div class="delete">
      <a href="">
        <img class="delete_img" alt="Delete Video" src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Remove-icon.png">
        <p>Delete Video</p>
      </a>
    </div>
  </div>
</body>

</html>

Then moving into your CSS:

body {
  background-color: silver;
}

h1 {
  color: maroon;
  background-color: silver;
  padding-left: 10px;
  font-family: 'Rock Salt', cursive;
  font-size: 35px;
  border-bottom: solid 5px black;
}

#wrapper {
/*
  Here I've changed the margins. The auto left-right 
  centers the wrapper and makes it look a bit nicer.
*/
/*
  margin-top: 200px;
  margin-left: 235px;
*/
  margin: 200px auto 0;
  height: 300px;
  width: 1050px;
}

.title_img {
  height: 50px;
  width: 60px;
  padding-left: 5px;
  padding-top: 5px;
  background-color: silver;
}

/*
  Here I've created a selector for the root divs of each
  function. I would probably give each div a secondary 
  class that they all shared to make this selection easier,
  personally. Here I set the width of each div and apply
  padding to make them fill out the wrapper div 100% of 
  the way. I also use this selector to control the float,
  since it's easier to control it once and makes adding 
  text to each <a> a breeze. 
*/
.upload, .edit, .delete {
  width: 314px;
  padding: 0 18px;
  float: left;
  text-align: center;
}

/*
  Here I consolidated the selectors into a single one. 
  I'm not sure why the .delete_img was smaller, so if that
  is something you need to happen, I'm sure you can figure 
  it out enough to tweak it. With the different size, the
  text didn't line up, and I took the easy approach by 
  unifying the sizes of the images. Again, I would probably
  give each img class a secondary class that was common to
  all 3, myself. I removed the margin and float properties
  as they weren't needed any longer.
*/
.upload_img, .edit_img, .delete_img {
  height: 155px;
  width: 155px; 
        /*
          margin-right: 200px; 
          float: left;
        */
}

/*
.edit_img {
  height: 155px;
  width: 155px;
  margin-right: 200px;
  float: left;
}

.delete_img {
  height: 140px;
  width: 140px;
  margin-right: 200px;
  float: right;
}*/

You can see it live here and toy around with it more if you want, but this seems to get the job done.

Answer 2 · 2017-03-01T09:30:30Z

March 1, 2017 9:30am

1) Well, first of all try to clean up the code with indents en spaces, so you can read more clearly what the code is. Like this:

2) you have to make a container, i usually call it 'wrapper' this is de container where everthing should go in, so you have some boundries for your content.

3) I put the images in a img folder, so your code is better to read.

4) The last image has a space in the name, so it wont load. Remove the space.

5) I think it can be much simpler, use the <header> and <section> tags to put the content in your code.

6) In the CSS i grouped items with the komma

I think the basic problem seems to be clear to read code. Try make things simple and logic as youn can.

The code:

<body>

<header>
  <h1>Video Library</h1>
  <img src="img/headerimage.jpg">
</header>

<section>
  <div><img alt="Upload Video" src="img/uploadmovie.png"><br><a href="#">Here link</a></div>
  <div><img alt="Edit Video Info" src="img/editmovie.png"><br><a href="#">Here link</a></div>
  <div><img alt="Delete Video" src="img/deletemovie.png"><br><a href="#">Here link</a></div>
</section>

</div>

</body>

The css:

.wrapper { max-width: 900px; margin: 0 auto; }

header, section, h1 { text-align: center; }

section div { display: inline-block; }

section img { width: 150px; }

Welcome to the Treehouse Community

Looking to learn something new?

Roger Dailey

Roger Dailey

Help with HTML for my project

Mike Schaming

Mike Schaming

Roger Dailey

Roger Dailey

2 Answers

Mike Wagner

Mike Wagner

Mike Wagner

Mike Wagner

Loek Weijts

Loek Weijts

Roger Dailey

Roger Dailey

Mike Wagner

Mike Wagner

Roger Dailey

Roger Dailey

Mike Wagner

Mike Wagner