Small touch ups on tribute page I need help on

HTML-CSS
#1

Hey so Ive been working on my tribute page, passed all the criteria, and im just making it look nice.
(Link to page: https://codepen.io/eminencefinesse/full/xxRKEVP )
I have icons of each person ill be typing a paragraph about, but im struggling on the placement. If u click on the link to my page, you can see the general idea of what im trying to do. An picture for each paragraph, aligning with the paragraph and each picture alternates between the left side and right side.

I cant get it to stick to the specific spot on the page no matter the size of the window.

P.S. if anyone knows how to make an automatic slideshow of pictures, that would be dope also.

#2

I like where you’re going with this. Let’s start off with correcting HTML syntax errors.

  • First off, everything the browser renders belongs in the body element. You have an element outside.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

Correct all of these and then let’s look at styling.

#3

TYSM FOR THE REPLY!!
Honestly the little you said made me learn so much compared to any video I’ve looked up.

(https://codepen.io/eminencefinesse/full/xxRKEVP)
So its been cleaned up save for 4 errors which ive read that validator doesnt recognize html5? (read it here: https://stackoverflow.com/questions/27980012/html5-error-element-head-is-missing-a-required-instance-of-child-element-title)

I took away the Br’s cause you are right, ill fix the spacing with CSS.

As for the photo spacing, I think I figured it out earlier. So no matter how big or small the page is, there are in their fixed spot.

I just need to finish the paragraphs and then fix the spacing for each photo. If there is a better way than adjusting the pixels individually, im down for it.

Again, thank you so much for answering. Validator, google and your guidance to those tools just made this much more enjoyable in a weird way.

#4

Wow you all must be sick of tribute page help on this forum :skull: im so sorry for adding to this never ending pile of help :sob:

#5

if you use codepen, you should put the css in the css box, and delete from the html box the body tags and everything outside of it (the title can be changed from the top of the page, for example, and the stuff for the head element can be added in the settings of the pen) (and you can ignore the errors in the validator about html, doctype, head and body tags as those are dealt with by the codepen boilerplate)

if you instead are not relying on the codepen boilerplate your code is missing the doctype declaration and the title element in the head, and the html tags as the validator is saying

#6

You should really rely on either flexbox or css grid for this, as at the core all you need to do is simply create a “row” system where some slots are either occupied with an image or a text.

It require few line of css/html to have a simple skeleton.
To help you visualize the idea I have made a quick repl with simple code in it.

The idea is not to give you a “tailored” solution for your case, but to simply illustrate how you can potentially achieve it.

Hope it helps :slight_smile:
https://repl.it/join/iuyywblr-claudiorestifo