W3C error check question

Report · Nov 21, 2018

Good evening. I'm in the midst of error checking my pages one by one. I'm currently error checking my home page MICHAEL GUYDON PHOTOGRAPHY So far I've been able to clear out all but two errors. The logo on the top left shows up as an error.<img src="logo camera.fw.png" alt="" width="240" height="53" class="img-fluid"></a> The second error is this one. When I attempt to omit this, it enlarges my navigation menu font. <a class="navbar-brand" href="#"></a>↩ <link href="css/bootstrap-4.0.0.css" rel="stylesheet"><style type="text/css">↩. Is there any solution to this? Thanks in advance.

Report · Nov 21, 2018

the src image contains a white space... remove it by replacing it by an underscore, or simply remove it... (think to modify the image filename according

simply remove the yellow backgrounded text... it is an opening tag, that contains nothing, and worth doesn't have any closing tag

Report · Nov 21, 2018

Thanks for the reply. When I remove that particular line in "yellow", it enlarge my font and removes my background image. So it seems like it's serving a purpose. Correct me on this one? Thanks.

Report · Nov 21, 2018

you have some styles in there I assume you removed this bit which you'll need to retain:

<style type="text/css">
#image {
}
body {
background-image: url(Jennifer.jpg);
background-repeat: no-repeat;
background-size: cover;

}

body,td,th {
font-size: 9rem;
}
body,td,th {
font-size: 0.8rem;
}
</style>

Paul-M - Community Expert

Report · Nov 21, 2018

So what is the solution to this as far as coding it, in order to retain those elements, without using the <style type="text/css"> Or do I need to add something else to the style code, that's missing?

Report · Nov 21, 2018

youps sorry I didn't previously visit your web site, so I didn't see that some style was lying around... so as Energize point at keep it fully (opening STYLE tag, content and closing STYLE tag)... and you can only remove the type attribute... so only gets <style>

Report · Nov 21, 2018

I somewhat understand what you're saying. Could you give me an example? I want to make sure that I'm doing this right.

Report · Nov 21, 2018

instead of

<style type="text/css"> .... </style>

write

<style> .... </style>

I just used ... instead of retyping all the CSS code

Report · Nov 22, 2018

Thanks for the help. I have two more pages that I'm stuck on. This one CONTACT , FASHION and PORTRAITS . I see errors. Most of them I corrected with no problems.

Report · Nov 22, 2018

file CONTACT

line 103 a </li> is missing

line 118 you should remove the <p> tag

again after the adress tag you should remove

line 156 remove the tags <p class="m-4">

</div>

then add the following closing tags

</div>

</form>

</div>

</body>

Report · Nov 22, 2018

so here the corrected file

<!DOCTYPE html>

<head>

<title>CONTACT</title>

<style>

#image {

}

body {

background-repeat: no-repeat;

background-size: cover;

}

body, td, th {

font-size: 9rem;

}

body, td, th {

font-size: 0.8rem;

color: #FFFFFF;

}

hr {

background: white;

}

.contact-form {

background: rgba(0,0,0, .6);

color: white;

margin-top: 100px;

padding: 20px;

box-shadow: 0px 0px 10px 3px grey;

}

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

}

a:hover {

text-decoration: none;

}

a:active {

text-decoration: none;

}

</style>

</head>

<body>

</a>

<a class="dropdown-item" href="#">Action</a>

<a class="dropdown-item" href="#">Another action</a>

<a class="dropdown-item" href="#">Something else here</a>

</div>

</li>

</ul>

<a class="nav-link" href="http://michaelguydonphotography.com/">HOME<span class="sr-only">(current)</span></a>

</li>

<a class="nav-link dropdown-toggle" href="http://michaelguydonphotography.com/portraits" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> PORTFOLIO </a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/portraits">PORTRAITS</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/fashion">FASHION</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/editorial">EDITORIAL</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/advertisement">ADVERTISEMENT</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/conceptual">CONCEPTUAL</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/sepiavision">SEPIA VISION</a>

</div>

</li>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/resume">RESUME <span class="sr-only">(current)</span></a> </li>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/about">ABOUT <span class="sr-only">(current)</span></a> </li>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/contact">CONTACT <span class="sr-only">(current)</span></a></li>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/guestbook">GUESTBOOK <span class="sr-only">(current)</span></a> </li>

</ul>

</form>

</div>

</nav>

<h1>CONTACT US</h1>

<p class="required small">* = Required fields</p>

<hr>

<div class="col-md-6">MICHAEL GUYDON

<address>P.O. BOX 3203 BERKELEY, CA. 94703</address>

<p>Phone:- 415-684-4047</p>

</div>

</div>

<label>*email</label>

</div>

<label>phone</label>

</div>

<label>*message</label>

</div>

<label>human test</label>

</div>

<button type="submit" id="submit" name="submit" class="btn-lg btn-primary btn-block">SUBMIT</button>

</div>

</div>

</form>

</div>

</body>

</html>

Report · Nov 22, 2018

Update. The contact page works. However, what's missing is the confirmation that pops up, that was in the initial code that was given to me on here, from Nancy O'Shea. What I've noticed while doing a compare and contrast is the differences in the php code that was in the initial code from the one that I had pasted a few days ago. The same one that you guys looked at. I only copied and pasted it and never modified the code, but to just add my email and host provider's email. My point being, I see some different approaches in the codes. Interesting. With that being said. How do I get the confirmation that email was sent, back on the page?

Report · Nov 22, 2018

The contact form I gave you was built for Bootstrap 3.7, not 4.0.

There's a big difference between the 2 versions. Revert to the original code I gave you and it should work.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 23, 2018

good catch Nancy...

Report · Nov 23, 2018

did you got all three files working now, or do you still need any help on one of them

Report · Nov 23, 2018

Regarding the contact page. They both function. The initial one always worked, but the issue were the errors, while error checking it. When I'd implemented your code, replacing the other, it works too, but with no errors. What is missing is the confirmation that the message was sent. But Nancy clarified why which is related to the previous Bootstrap support, so I put her code back in for the time being. As each reply and suggestion is given to me, I'm learning, vs guessing what code behavior works and what doesn't. If you could add a confirmation to the code, or show me where and how to add it, I'd use your code, because it's error free. And I'll update it to Bootstrap 4. I just want to make sure that the client knows that his or her message has been sent. The only reason why I know that it work, is when I check my messages.

Regarding my other pages, Fashion, portrait. I'm still trying to figure that one out. I just have to make sure that I'm grasping the directions that were given to me on here. My other pages were easy, where I didn't need help, those checked off error free. So that's a motivator to keep it going. Not that I need that to be motivated. I'm going to get it done either way. It's my will. Let me know it a message confirmation can be added to the code? Thanks.

Report · Nov 23, 2018

do all three pages are currently on line ?

CONTACT I guess that is the one using the old code that Nancy reference too...

Report · Nov 23, 2018

Yes. All three are on. Yes, you're correct, regarding the old code that Nancy is talking about.

Report · Nov 23, 2018

Legacys7 wrote

Yes. All three are on. Yes, you're correct, regarding the old code that Nancy is talking about.

There is an answer for your fashion page validation issues in this thread - post No. 16. Have you applied those changes?

Report · Nov 23, 2018

well concerning CONTACT, everything is fine until after the last SUBMIT BUTTON

where you have to add all the appropriate closing tags

so after line 145 add

</div>

</form>

</div>

then remove from lines 157 to 160 lines which seams to be just NOISES

so remove

</div>

and instead of it add a closing BODY tag

</body>

that should do the job....

next thread I will just send you the corrected code

Report · Nov 23, 2018

<!DOCTYPE html>

<head>

<title>CONTACT</title>

<style>

#image {

}

body {

background-repeat: no-repeat;

background-size: cover;

}

body, td, th {

font-size: 9rem;

}

body, td, th {

font-size: 0.8rem;

color: #FFFFFF;

}

hr {

background: white;

}

.contact-form {

background: rgba(0,0,0, .6);

color: white;

margin-top: 100px;

padding: 20px;

box-shadow: 0px 0px 10px 3px grey;

}

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

}

a:hover {

text-decoration: none;

}

a:active {

text-decoration: none;

}

</style>

</head>

<body>

<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>

<a class="dropdown-item" href="#">Something else here</a> </div>

</li>

</ul>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/">HOME<span class="sr-only">(current)</span></a> </li>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://michaelguydonphotography.com/portraits" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> PORTFOLIO </a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="http://michaelguydonphotography.com/portraits">PORTRAITS</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/fashion">FASHION</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/editorial">EDITORIAL</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/advertisement">ADVERTISEMENT</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/conceptual">CONCEPTUAL</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/sepiavision">SEPIA VISION</a></div>

</li>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/resume">RESUME <span class="sr-only">(current)</span></a> </li>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/about">ABOUT <span class="sr-only">(current)</span></a> </li>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/contact">CONTACT <span class="sr-only">(current)</span></a>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/guestbook">GUESTBOOK <span class="sr-only">(current)</span></a> </li>

</ul>

</form>

</div>

</nav>

<h1>CONTACT US</h1>

<p class="required small">* = Required fields</p>

<hr>

<div class="col-md-6">MICHAEL GUYDON

<p>

P.O. BOX 3203 BERKELEY, CA. 94703

</address>

<p>

<p>Phone:- 415-684-4047</p>

</div>

<label>*email</label>

<label>phone</label>

<label>*message</label>

<label>human test</label>

<button type="submit" id="submit" name="submit" class="btn-lg btn-primary btn-block">SUBMIT</button>

</div>

</form>

</div>

</body>

</html>

Report · Nov 23, 2018

well I ve started to comment all the error from the PORTRAIT file, but it is a real mess... so I stopped and removed all comments and in the next thread I will just copy a reorganised file... test it, I haven't time to do it... so test it, and if that works, study from there comparing both files OLD and NEW

in the same way, you have a SCRIPT link to vue.js and I'm not sure that you really need it... because you just use SWIPER...

any way...

Report · Nov 23, 2018

<!DOCTYPE html>

<head>

<title>PORTRAITS</title>

<style>

body {

margin: 0;

background-color: #000;

}

* {

box-sizing: border-box;

}

.swiper-container {

height: 100vh;

width: 100vw;

text-align: center;

}

@media screen and (max-width: 768px) {

.swiper-slide {

width: 100%;

}

img {

max-height: 100%;

max-width: 100%;

}

.swiper-button-prev, .swiper-button-next {

display: flex;

justify-content: center;

color: #fff;

font-size: 35px;

height: auto!important;

}

@media screen and (max-width: 768px) {

.swiper-button-prev {

top: 100px;

background-color: #000;

border-radius: 4px;

padding: 0 9px 0 5px;

}

.swiper-button-next {

top: 100px;

background-color: #000;

border-radius: 4px;

padding: 0 5px 0 9px;

}

.caption {

color: white;

}

</style>

</head>

<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>

<a class="dropdown-item" href="#">Something else here</a>

</div>

</li>

</ul>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/">HOME<span class="sr-only">(current)</span></a> </li>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> PORTFOLIO </a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="http://michaelguydonphotography.com/portraits">PORTRAITS</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/fashion">FASHION</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/editorial">EDITORIAL</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/advertisement">ADVERTISEMENT</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/conceptual">CONCEPTUAL</a>

<a class="dropdown-item" href="http://michaelguydonphotography.com/sepiavision">SEPIA VISION</a>

</div>

</li>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/resume">RESUME <span class="sr-only">(current)</span></a> </li>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/about">ABOUT <span class="sr-only">(current)</span></a> </li>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/contact">CONTACT <span class="sr-only">(current)</span></a>

<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/guestbook">GUESTBOOK <span class="sr-only">(current)</span></a> </li>

</ul>

</form>

</div>

</nav>

</div>

</div>

var app = new Vue({

el: '#app',

data: {

infinite: true

},

mounted: function () {

var mySwiper = new Swiper ('.swiper-container', {

centeredSlides:true,

direction: 'horizontal',

loop: this.infinite,

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

});

}

})

</script>

</body>

</html>

Report · Nov 22, 2018

On your 'contact' page you have some mal-formed code. You are ok down to your closing </nav>

You need to replace your form code with the below, down to the comment

MICHAEL GUYDON<p>

<address>P.O. BOX 3203 BERKELEY, CA. 94703</address>

<p><p>Phone:- 415-684-4047</p>

</div>

</div>

<label>*email</label>

</div>

<label>phone</label>

</div>

<label>*message</label>

</div>

<label>human test</label>

</div>

<button type="submit" id="submit" name="submit" class="btn-lg btn-primary btn-block">SUBMIT</button>

</div>

</form>

ALSO you have this right at the foot of the page. Delete it.

</div>

Not sure why you are calling the Bootstrap css twice?

Once is sufficient from the cnd or locally:

Report · Nov 22, 2018

Will look at this. Thanks.

Adobe Community

W3C error check question

1 Correct answer