Validation problem

[qim]

Hi

Can’t get my head round this. I had a page that worked well but did not validate The code for the particular place was

<div class="ad">
<div class="metro">
<a href="/Europe/images/metroBcn.jpg" alt="Map of Barcelona Metro lines"  width="1398" height="770" target="_blank"><b>Press here</b> to see larger map.

</div>

 <div class="img-container"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" src="../images/MetroBcn500.jpg"></a> 
</div>
</div>

After a lot of trial and error I got it to validate but the page did not work: the larger image did not show up. Somehow the validaot did not like the alt , width, and height

So, I’m now left with this which works biút still does n ot validate.

<div class="ad">
<div class="metro">
<a href="/Europe/images/metroBcn.jpg"  target="_blank"><b>Press here</b> to see larger map.

</div><!-- close metro -->


<div class="img-container"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" src="../images/MetroBcn500.jpg"></div></a>

</div><!-- close ad -->


Validation Output: 2 Errors 
Line 410, Column 6: End tag div seen, but there were open elements.</div><!-- close metro -->
✉

Line 408, Column 55: Unclosed element a.…rope/images/metroBcn.jpg"  target="_blank"><b>Press here</b> to see larger map.

[pr0c3ss]

I suspect your a href tag. more specifically, where it closes. You have 2 src links, so make 2 a href.

[qim]

Hi, thanks

I’d gone through this before and did not see the full picture…

Like this

<div class="ad">
<div class="metro">
<a href="/Europe/images/metroBcn.jpg"  target="_blank"><b>Press here</b> to see larger map.</a>

</div><!-- close metro -->

 

<div class="img-container"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" src="../images/MetroBcn500.jpg"></div>

</div><!-- close ad -->

it validates and works if you press the “press here” but I wanted it to continue working if you pressed also the actual smaller image.

[pr0c3ss]

You’ll need to link the smaller image and the press here text, as they have two different purposes (right?). Why not pull the press here text out of the metro container because it’s already linked and put that text in separate button.

<div class="ad">
  <div class="metro"><a href="/Europe/images/metroBcn.jpg" target="_blank"></a></div><!-- close metro -->

<div class="link-button"><a href="../images/MetroBcn500.jpg"><b>Press here</b> to see larger map.</a></div>
<div class="img-container"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" </div>
</div> <!--close ad-->

the bottom larger image code will need some changes, as it is the larger image will be showing by default. Do you have some js that changes the img-container display?

[qim]

No, no js

this is the link. It works fine, but no longer as before when it did not not matter if you pressed the Press here or the actual img

http://pintotours.net/Europe/Spain/taxisBcn.html

[pr0c3ss]

there’s no user input, so what are you validating? You mean the console errors?

The text is linked fine. Just close the a tag within the div metro like above…

Then make a new a href in img container

<div class="img-container"><a href="image you want to link to" target="_blank"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" src="../images/MetroBcn500.jpg"></a></div>

[qim]

Hi, it’s too early and the brain still not functioning…

I think I did what you suggested but it works when I press the “Press here” but when I press the image I get the smaller one.

It’s stlll live

[pr0c3ss]

Change img container code to this

<div class="img-container"><a href="/Europe/images/metroBcn.jpg" target="_blank"><img title="Map Metro Barcelona" alt="Map of Metro of Barcelona" width="500" height="275" src="../images/MetroBcn500.jpg"></a></div>

[qim]

Hi.success

I had MetroBcn.jpg instead of metroBcn.jpg…

As I said, still half-asleep!

many, many thanks!

[pr0c3ss]