CODEWITHSUNDEEP
htmlcss
user3972776
user3972776

Reputation:

Trouble with CSS selector and image properties

I'm new to CSS. I have an image that I'm assigning attributes to in HTML. This is part of the code:

<li class="views-row views-row-1 views-row-odd views-row-first">
    <div class="user-profile user-listing" typeof="sioc:UserAccount" about="/users/chris">
<div class="user-photo">
    <div class="field field-name-field-photo field-type-image field-label-hidden">
    <div class="field-items">
    <div class="field-item even">
    <img src="Dave-web.jpg" alt="" height="150" width="200"></div></div></div>  </div>

I want to assign some attribute to <img src="Dave-web.jpg"> through css file. I tried both of these, and they didn't work.

.field-item  img{
    height:150; width:200;
}


.field-item > img{
    height:150; width:200;
}

Upvotes: 0

Views: 43

Answers (3)

Karmacoma
Karmacoma

Reputation: 668

I think, you are using Drupal. You can use Display Suite extension and add CSS your markup items. Also, your answer is here:

.field-item img {
    height:150px;
    width:200px;
    color:black;
}
.field-item > img {
    height:150px;
    width:200px;
    color:red;
}

DEMO

Upvotes: 0

Mark Wade
Mark Wade

Reputation: 527

Remove the height and width attributes from your <img> tag. They will override any valid css.

height="150" width="200"

Add px to your css

.field-item img {
  height:150px; width:200px;
}

Bonus: Close your <img> tag

<img src="Dave-web.jpg" alt="" />

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

I just noticed that you're missing measurement unit in your css rules:

 height:150; /*won't work*/

height: 150px;/*works*/

And I hope you wanted to remove inline width and height for those images.

Upvotes: 2

Related Questions