Validation problem and footer frustrations

please see

this is what i was left with

confused :frowning:

<input type="checkbox" id="checkbox_toggle" />

i get an error about that last tag… line 23, if i remember correctly there should be no space before />

help me out

i had this issue before, and was resloved in VS Code… problem was solved… back again

i correct it in VS Code, save,and it goes back to the error!

no clue how to fix it

also address the other warnings, errors please


i have 3 images to the left, only 1 shows.

yes, i have posted this before… i tried the correct path

<img src="" alt="nature scene">
<img src="" alt="nature scene">

lastly, the footer is a mess on smal screens… its not at the footer and over laps the code

i would really appreciate the full, correct code… and i also ask for your solution… i want this to be a learning experience


I would change you HTML around a little bit →

<footer class="colophon">
  <div class="address">
    PO Box 7531<br>
    Any Town USA<br>
    ZIP 1357
  <div class="social_media">
    <a href="#" target="_blank">
      <i class="fab fa-instagram"></i>
    <a href="#" target="_blank">
      <i class="fab fa-facebook"></i>
    <a href="#" target="_blank">
      <i class="fab fa-twitter"></i>
    <a href="#" target="_blank">
      <i class="fab fa-linkedin"></i>
    <a href=#" target="_blank">
      <i class="fab fa-youtube"></i>
  <div class="phone">252 555 7531</div>

I would use grid and flexbox in the css

.colophon {
  display: grid; /* Create a CSS grid */
  grid-template-columns: 1fr 1fr 1fr; /* Divide the grid into three equally sized columns */
  gap: 20px; /* Add some space between the grid items */
  align-items: center; /* Vertically center the grid items */
  padding: 20px; /* Add some padding around the footer */
  background-color: #f4f4f4; /* Background color for the footer */

/* Style the address */
.address {
  grid-column: 1; /* Place the address in the first column */

/* Style the social media links */
.social_media {
  display: flex; /* Create a flex container */
  justify-content: space-around; /* Evenly distribute space around the items */
  grid-column: 2; /* Place the social media links in the second column */

.social_media a {
  color: #000; /* Set the color of the icons */
  text-decoration: none; /* Remove the underline from the links */
  font-size: 2.4em;

.social_media a:hover {
  color: #0077b5; /* Set the hover color of the icons */

/* Style the phone number */
.phone {
  grid-column: 3; /* Place the phone number in the third column */
  text-align: right; /* Align the text to the right */

I used an external link - in CodePen

Here’s the CodePen link →

An I only did the footer/colophon - maybe you can figure out the rest or someone else can help? My main point is use useful naming when it comes to classes or ids. That will save you a lot of headaches.

Thank you :slight_smile:

the footer is still misplaced on smaller screens… take a look

please address my valldation questions and other problems above, too

do i owe you a $0.25 now?

Error : Element input not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

What do you not understand about this error?

1 Like

In html5 there are no trailing slashes (outside of any svgs). Remove the trailing slash.

i dont understand what an input does for me to start with

i DO get how an input can be a child to ul means

i dont understand how


is being used

and the rest i dont get :frowning:

(Suppressing further errors from this subtree.)

please explain how to fix this error… maybe go slow for me :slight_smile:


i removed the trailing slash, problem solved :slight_smile:

seriously, i am grateful for your help!!!

Is this not your code? Yje input tag you gave in your OP is a checkbox. The id of that element gives a clue as to its use. It is used to toggle the menu.

It looks to me as though your ul is in the wrong place.

This is your html copied from the validator.

<ul class="nav-links">
<input type="checkbox" id="checkbox_toggle" />

There is an input straight after the ul opening tag. Nothing can be a direct child of a ul except for a li tag. All other content must be in a li tag

You know that :). It’s more or less lesson one in html :wink:

1 Like


i grabbed this code from codpen

what do suggest i do to remedy the problem?

what would that look like?

am i out of luck here? remove that code and start with another?

BTW, i think it best i validate my codepen code before i start using it in my own code :slight_smile:


Good idea! There is a built-in validator in Copdepen, although I don’t know how good or thorough it is, but it’s a start.

i feel a bit better :slight_smile:

1 Like

do not mean to bug you :frowning:

how do i solve


if you addressed this i may have missed it… sorry!

you can tell by now i am not the sharpest tool in the shed :slight_smile:

THANK YOU to you both! I sincerely appreciate your time an trouble and will appericate your pateince

Looking at the validation errors, I can’t see what you have changed. You still have the slash at the end of your input tag which @PaulOB said to remove in post #5 and you still have input as a child of ul.

1 Like

I’m not sure what you are missing but for clarification. :slight_smile:

  <li> Any html you like goes here. Nothing  can be outside of these li tags except more li tags.     </li>
1 Like


hhhhmmm i successfuly remove the slash, save, validate, and its still there :frowning:

in VS Code, the salsh isnt there, yet is in the validation

That’s interesting. So what happens to your code between VSCode and the server?


thank you!

having some issues replying to your post… so i will try here!

i validated

looks like 1.

Checkbox Tag Error: Make sure there is no space before the closing “/>

is resolved… dont see it there

.2. yes i can access the validator

  1. my img urls are fine now

  2. solved that days ago!

my vaidation

yes, i am aware there are still erors… i have found they vanish after a while after correcting my code and publishing my code… not concerned…

so whats left are errors 2- 4

these have been a pain for me to figure out. i may have had help with these errors, but i still dont get it

what do i not get?.. well what i DO get is a <li> being under a <ul>

not so much here

**Error** : Element [input]( not allowed as child of element [ul]( in this context. (Suppressing further errors from this subtree.)

this is why i would appreciated a codepen with all the corrections

to be clear, this is not my code. i found this code (and its errors) on codepen

again, please, need some help here :slight_smile:

i am not too swift and cant folow code i dont understand

i in no way wantt to bug you guys!

if its my lack of inteligence, dumb it down for me

so please provide a codepen (or whatever way you choose) to give me the proper code… resolving the erros

again, thank you!

most appreciated :slight_smile:

I think you are replying to a spam post that has now been deleted :slight_smile:

You seem to have changed the page in question and now the only error is the extra closing html tag that you have here.




Remove that middle closing tag. (I believe @ralphm already mentioned that but I can’t see his post either !) (I’m on such a slow connection that only half this Sitepoint page loads anyway :))

1 Like

It was in a different thread:

1 Like

ok, i may have goofed :frowning:



corect code please…

i have asked this before :slight_smile:

again i am lost

so sorry guys… i lost myself!