• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 434
  • Last Modified:

CSS Image Class Question

I'm pretty new to CSS - and have a question about applying classes.

In our css - there's a rule that specifies:

.columns>div img{height:auto; margin-bottom:1em; width:300px}

So - any images that meet that criteria are automatically sized to 300px in width.

That works fine.

However - there's a sub image within that div that I want sized to 16px that's also coming up as 300px wide.

How would you fix that?

I figured something like:

.columns>div img .alternate {height:auto; margin-bottom:1em; width:16px}
or...
#alternate{height:auto; margin-bottom:1em; width:16px}

with the corresponding html being <img class="alternate">

but neither of those worked.

Help?  :)
0
erzoolander
Asked:
erzoolander
  • 3
2 Solutions
 
jonahzonaCommented:
Add an !important so it doesn't get overridden.

.columns img .alternate {height:auto; margin-bottom:1em; width:16px !important;}

Open in new window

0
 
jonahzonaCommented:
Also, keep in mind that # is an ID, while . is a class.

So img#alternate would have to be <img id="alternate">

while img.alternate would be <img class="alternate">
0
 
jonahzonaCommented:
Here is a quick mockup of what this would look like.

Image is included below.

<head>
<style type="text/css">
.columns img {
  height: auto;
  margin-bottom: 1em;
  width: 300px;
}

.columns img.alternate {
  height: auto;
  margin-bottom: 1em;
  width: 16px !important;
}
        </style>
</head>
<body>
<div class="columns">
<img alt="image" src="bg.png" />
<img class="alternate" alt="small image" src="bg.png" />
</div>
</body>

Open in new window

bg
0
 
nachopittCommented:
There should not be a space between "img" and "alternate" because you want to apply the style to all images within the alternate class:

.columns>div img.alternate {height:auto; margin-bottom:1em; width:16px}
0
 
erzoolanderAuthor Commented:
Thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now