Validation problem and footer frustrations

HTML & CSS
1

please see

https://validator.w3.org/nu/?doc=https%3A%2F%2Fforallthetime.com%2Fprogress%2Findex.html

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

see

https://forallthetime.com/progress/index.html

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

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

<img src="https://forallthetime.com/progress/IMAGES/28.jpg" alt="nature scene">
<img src="https://forallthetime.com/progress/IMAGES/v.jpg" 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

MANY THANKS!!!

2

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>
  <div class="social_media">
    <a href="#" target="_blank">
      <i class="fab fa-instagram"></i>
    </a>
    <a href="#" target="_blank">
      <i class="fab fa-facebook"></i>
    </a>
    <a href="#" target="_blank">
      <i class="fab fa-twitter"></i>
    </a>
    <a href="#" target="_blank">
      <i class="fab fa-linkedin"></i>
    </a>
    <a href=#" target="_blank">
      <i class="fab fa-youtube"></i>
    </a>
  </div>
  <div class="phone">252 555 7531</div>
</footer>

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 - https://use.fontawesome.com/releases/v5.15.4/css/all.css in CodePen

Here’s the CodePen link → https://codepen.io/Strider64/pen/bGQeoWa

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.

3

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?

4

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
5

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

6

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

context

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:

also…

i removed the trailing slash, problem solved :slight_smile:

seriously, i am grateful for your help!!!

7

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.

8

This is your html copied from the validator.

<ul class="nav-links"> ↩
`` ↩
<!-- USING CHECKBOX HACK --> ↩
<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
9

ok,

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:

thanks!

10

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.

11

i feel a bit better :slight_smile:

1 Like
12

do not mean to bug you :frowning:

how do i solve

https://validator.w3.org/nu/?doc=https%3A%2F%2Fforallthetime.com%2Fprogress%2Findex.html

errors

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

13

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
14

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


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

thanks!

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

16

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

18

sanjanamohanty4342

thank you!

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

i validated https://forallthetime.com/progress/index.html

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

https://validator.w3.org/nu/?doc=https%3A%2F%2Fforallthetime.com%2Fprogress%2Findex.html

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](https://html.spec.whatwg.org/multipage/#the-input-element) not allowed as child of element [ul](https://html.spec.whatwg.org/multipage/#the-ul-element) 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:

19

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.

</head>

</html>

<body>

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
20

It was in a different thread:

1 Like
21

ok, i may have goofed :frowning:

see

https://forallthetime.com/button/index.html

and

https://validator.w3.org/nu/?doc=https%3A%2F%2Fforallthetime.com%2Fbutton%2Findex.html

corect code please…

i have asked this before :slight_smile:

again i am lost

so sorry guys… i lost myself!