Help for a noobie! :) What am I doing wrong in my line of code

HTML & CSS
1

Hey!
So I am getting an error for my code (it opens in pardot page instead of company page). I would love for it to open as their webpage. (AS I CAN ONLY PUT ONE IMAGE, i WILL PUT SOME SPACES IN THIS CODE AND PUT IMG SRC TOGETHER)

Here is the code I use:

</div>
<div class="col-xs-2">
<a class="panel panel-negative-lg paddingAll-l" title="Partners" href="/en/customers/">
<img class="img-responsive" width="145" height="87" <a href="https://www.nasmhpd.org/" target="_blank"><imgsrc="http://i64.tinypic.com/2mwf59g.jpg" border="0" width="145px" height="87px" align="center" alt="NASMHPD">
</a>
</div>

This is the image which i created.
THANKS!!!

<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/sitepoint/original/3X/4/1/41b24204e2b44f58f8f8db695f2a630159c8b77d.png" width="524" height="322">
2

Welcome to the forums @gorhamsj

I’m not sure that I understand your question. :open_mouth:

But looking at your html code, I think you should find this tool useful:-

Every front-end dev should have it bookmarked, especially “noobies”.

3

Thank you for your response.

So I am putting an image into a landing page and when I click on the image it takes me to a pardot page instead of the url for the image. So I know there are issues with how I am writing the code. Would you mind seeing if I put the code together in the right way?

Origionally there was no <a href>… after <img class="img-responsive" width="145" height="87", it went directly to <img src>… but I need to pull the image from a 3rd party site. Thanks a lot for the help :frowning:

4

The validator should point out where the errors exist in your code, that is exactly what it is for. :slight_smile:

To go through it element by element:-

</div>

^ An orphaned closing div, hopefully this just got caught in the selection when you copied the code and has an opening tag before it.

 <div class="col-xs-2">

^ Looks like you are using Bootstrap. No comment. :speak_no_evil:

<a class="panel panel-negative-lg paddingAll-l" title="Partners" href="/en/customers/">

Your opening anchor tag, seems OK, assuming the URL in the href attribute is correct for the target you want.

<img class="img-responsive" width="145" height="87" <a href="https://www.nasmhpd.org/" target="_blank">

Here is where things turn bad. You don’t cloes the img tag, then open a second a tag inside it.
The img tag must close, it’s a self closing tag, so does not need a separate closing tag, it just needs to close itself with a >. Then the a tag, you cannot nest anchors, you already have and anchor element open.

<imgsrc="http://i64.tinypic.com/2mwf59g.jpg" border="0" width="145px" height="87px" align="center" alt="NASMHPD">

Now you have an imgsrc element, only there is no such element in the html spec.

What it sounds like you need is simply an img element nested within an a element:-

<a href="my-target-url" title="Link Title">
    <img src="my-image-file.jpg"  width="145" height="87" alt="Some Picture">
</a>
1 Like
5

Thank you very much!!

OK first goal is ok :slight_smile: I was able to get the picture in there and click through it to the website. That makes me happy. So thank you very much for this. appreciate you helping write the correct code for me.

There is only one problem now. The image is now not in the white encasing…
I dont know if you can see it here.

722Ă—314 78.6 KB

Thanks!!!

6

Please post a link to your test page so we can see the code as it exists now.

1 Like
7

There are alot of factors to cause the Image to overflow the content such as floats or absolute elements or simply the container is too small for the image causing it to overflow so generally floats would just require overflow:auto; or position absolute elements require the container to have position:relative; but if it happens to be a fixed height div than either increasing the height or even better to just remove that all together otherwise best option is to make the images responsive or make it overflow-y:hidden;

ofcourse everyone can give better help when you show us the code as it may be easier to see the problem and try to assist you in anyway we can.

8

It may be that you have the correct html structure now, but if the look of it is wrong, that is likely related to the css which we have not seen. The other thing we need to know is what you expect or want it to look like.

9

As others have suggested that looks like you have floated the 4 images and therefore they are no longer contained within the parent (the element with the white background). Add overflow:hidden to the parent (the parent of all those floats that has the white background) to see if this is the problem as overflow other than visible will cause elements to contain floats and bring them back in the flow.

If that solves your problem them take a few minutes to google float containment and clearing and why adding overflow other than visible contains floats.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.