CODEWITHSUNDEEP
htmlcss
Ivan Paredes
Ivan Paredes

Reputation: 475

css class not working, in a css file, but in a style tag yes

i have a problem if i put the code

        <style>
            .MyClass123 {
                content: url("img/ic_datos_activo_48px.png");
                max-width: 100%;
                max-height: 30px;
            }
        </style>

        <div style="float: left;position:absolute; right:0">
            <img class="MyClass123"/>
        </div>

there is worked, but if i put the css class in a css file, not work. in the html document there's are other class, but they works

Upvotes: 3

Views: 5458

Answers (2)

Neil K
Neil K

Reputation: 1328

Change the code to:

.MyClass123 {
   max-width: 100%;
   max-height: 30px;
   float: left;
   position:absolute; 
   right:0
}

<div>
    <img class="MyClass123" alt="Image" src="img/ic_datos_activo_48px.png"/>
</div>

Upvotes: 0

TheThirdMan
TheThirdMan

Reputation: 1522

CSS doesn't differentiate between inline, in-page or linked styles. If results between those methods differ, the reason is either erroneous including of the external file or the load order of your CSS, neither of which could be judged from the info in your question.

Furthermore, there are several problems and things to improve with the code in your question:

  • As @FrédéricHamidi commented, you're not using the content property as you should - it's only valid use is within :before and :after pseudo-elements.
  • Your img element doesn't have a src attribute, and possibly should have an alt attribute as well (since this isn't part of the question, I won't go into great detail, but a good description can be found on the MDN page.
  • Since you're using a CSS file to store your page styles, you shouldn't rely on inline styles whatsoever. Instead, add the respective attributes to those elements and address them via CSS selectors. This will give you long-time maintainability, good task management (HTML files structure content, CSS files handle display) and won't look like your first HTML page.
  • There is very little chance you actually need the float property on an absolute positioned element.

That being said, since you're apparently trying to set a background image, here is the code you would need for that:

<style>
    .wrapper {
      position: absolute;
      right: 0;
    }
    .MyClass123 {
      background-image: url("img/ic_datos_activo_48px.png");
      max-width: 100%;
      max-height: 30px;
    }
</style>

<div class="wrapper">
    <div class="MyClass123"></div>
</div>

If instead you need the image to be a part of the document flow, use the img element for that purpose. If you need to change those with CSS (this would mostly be the case if you did some JS manipulation), a clean way to do it would be to creature multiple image elements and hide them as needed:

<style>
    .image2, .image3 {
      display: none;
    }
</style>

<div>
    <img class="image1" src="img1.jpg" alt="Image 1" />
    <img class="image2" src="img2.jpg" alt="Image 2" />
    <img class="image3" src="img3.jpg" alt="Image 3" />
</div>

If you need to set the src to a previously unknown value entirely, you would be better off solving this via JS anyway, as CSS is for design purposes, not for content manipulation (with a handful of exceptions, yours not being one of them). For completeness' sake, here's a jQuery one-liner on how to tackle the problem:

$('.MyClass123').attr('src', 'new_url.jpg');

Upvotes: 1

Related Questions