I have a question about website design that I struggle with every semester, it seems. This student is wanting to set up his site so the images are on the right and the text is on the left. The text for the attribution needs to be underneath the image, though. To me, the HTML code is all in the correct place but it just isn’t displaying the way he wants it to. I don’t see any problems on his CSS page, either. Could anyone help me out? Thank you! Here is the link to the project:
Hi @buyskej ,
The link to the project is not working. I am hopeful I can give some advice without seeing it.
I will assume you are using float:right to move the image to the right? My students have found the figcaption tag useful. Notice that the figure tag wraps around the image and figcaption tag. You can then float the figure tag to the right. It worked in my mock up (below).
If this doesn’t solve your problem - let us know with a shared link to the project.
~Michelle
@buyskej -
So yes. Your images are to the right because of a float:right on the css sheet for the img tag. So I would remove the float:right from the image selector in the css sheet, add a figure selector to the css sheet with a float:right property, and add the figure and figurecaption tags to the html sheet as in the remix below.
In this remix, I reworked the basketball image as an example.
~Michelle
Thank you for the information. My question is, how are we/the students supposed to know how to do that when it isn’t explicitly taught in any of the lessons? I am not a programmer, so my knowledge is basically limited to what is contained within the curriculum and what I can possibly search up and find out.
Oh my gosh. I understand the frustration! My students are so creative and are constantly pushing beyond the curriculum! I am actually encouraged by that - it means that they were motivated to go above and beyond:) I try to remember that I don’t have to know how to answer every question and that I am just the lead learner as I teach this introductory computer science course.
I do find this happens often in Unit 2 because the content is so accessible and creative that students often want to apply their own ideas. My favorite resource for those questions is w3schools. FYI - there are probably many ways to answer this question. This is just the solution my students and I have found to answer this one.
~Michelle
Thank you, I appreciate it. I have also started turning to Chat-GPT to answer some of these questions as it is amazingly accurate at answering coding questions. It’s not foolproof, but it works well enough for our needs.
1 Like
I am running into a new issue with that site and what the student wants. He wants the text to be to the left of the image in a paragraph. In the preview window it looks somewhat like what he wants, but on the full-sized view of the page it doesn’t. Here is the link with the updated code. Ideally, the paragraph would be grouped closer together and be to the left of the image. We’ve tried using <br> within the paragraph tag but that didn’t do anything. Any help would be appreciated.
I also have another student whose site isn’t displaying correctly. She wants to have the images centered but the float property isn’t working for some reason. I can’t see any problem with her code, so I need some help. Here is the link to that project.
To get more advanced control of layout, you need to use more advanced layout tools. Two popular ones are grid layout and flex-box layout. They aren’t taught in the code.org introductory courses, but you can find good information about them on w3schools or in other places on the internet.
I remixed your 1st students’ project and used the flexbox layout to style it so the text would be to the left of the image. I left comment codes in both the html and css files explaining how it works, but basically, you create a container (a div) that the paragraph and the figure box can go inside of. Then, you group them together side by side by using some flex-box css rules. Have your student read my comments in both files where I explain it.
I’ll look at the other one and create a separate response.
Mike
On this one, I have a few things that could help. First of all, float can only be left or right (not center), so that line of code is being ignored.
However, one way to center an image is to use text-align: center on a container that contains the image. In their case, the body contains the image (and a lot of other things), but your student uses text-align: left on the body. This is what is making the image go to the left (and it probably would anyway if there wasn’t a text-align at all).
If they change that line of code in the body css to text-align: center; the image is centered and the only other change I noticed was that it centers the unordered list as well.
That’s a quick fix, though. Add a section of code to style the unordered list like this:
ul {text-align: left;}
So, the body aligns everything to the center, but putting specific alignment on the ul of left will override the center setting.
Hope this helps!
Mike
Great, thank you! Both suggestions will work great. I will share those with my students.
1 Like