CODEWITHSUNDEEP
htmlcss
rinkemiku
rinkemiku

Reputation: 29

ID or Class on an Image Tag does not work

I'm trying to position some images for a site, and I've given the images different IDs so i may position them differently. On my css when i started the positioning it wouldn't work. either by ID or Class,

I placed these images inside a div just to check if everything is well, and I guess to easily point the exact img tags I want to use.

the code follows:

<--html-->

<div class="resume">
    <a  href="#"><img style="height:auto; width:auto; max-width:100px; max-height:100px;"src="imgs/pdf.png" class="pdf" ></a>
    <a  href="#"><img id="word" style="height:auto; width:auto; max-width:100px; max-height:100px;"src="imgs/mword.png" ></a>
    <img id="pline" style="height:auto; width:auto; max-width:100px; max-height:100px;"src="imgs/line1.png" >
    <img id="wline" style="height:auto; width:auto; max-width:100px; max-height:100px;"src="imgs/line2.png" >
</div>

<--css-->

.resume img 
{
    position:relative;
    top:100px;
}

.resume img .pdf 
{
    position: relative;
    top:500px;
}

So if anyone could help me where I went wrong, I would greatly appreciate it. Thanks!

Upvotes: 1

Views: 4704

Answers (3)

Pankaj
Pankaj

Reputation: 54

.resume img.pdf {
  position: relative;
  top:500px;
}

Upvotes: 0

Tushar Gupta
Tushar Gupta

Reputation: 15923

There should be no space between the element and the class in your case. i.e it must be img.pdf.These are level 3 selectors which look for the specific namespace.

For EG: The following assigns style only to H1 elements with class~="pastoral":

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

Given these rules, the first H1 instance below would not have green text, while the second would:

<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>

Upvotes: 4

Andy G
Andy G

Reputation: 19367

There should be no space between img and .pdf. This means an img tag containing an element (or elements) with class .pdf. img.pdf means img tags with this class.

For an id you would just use #pline, there would be no need to use img#pline because id's are unique on the page, and img #pline would be incorrect as described above.

Upvotes: 5

Related Questions