sorry for this trivial question, but i just don't get it. I would like to set the witdh of this image:
<img class='icon weather/mostlycloudy'
src="/fhem/images/default/weather/mostlycloudy.png" alt="mostlycloudy"
title="mostlycloudy">
I've tried things like
[class~="weather"] {
witdh:50px;
}
.img.icon {
witdh:50px;
}
and everything I could imagine, but the width attribute never appears if I check it with chromes inspect tool. I'm sure that I edit the correct .css file, because I can see the influence for other elements of that page. I surely am no html or css expert and maybe a bit dumb... Could you please help me?
There are 2 errors in your code.
First, the selector. img is an HTML element and therefore should not be prefixed with a . as it was a class name. (unless you're having a class named img).
.img.icon {
Should be:
img.icon {
Second, you wrote witdh instead of width. You've should notice that in the inspector this property has been marked with a ! as there's a mistake.
img.icon {
width:50px; //not wi**td**h
}
https://jsfiddle.net/zmztezc2/
img.icon (selecting the img element type) rather than .img.icon (which looks for a class containing img) should do the trick.
If you're looking to match any class starting with weather/, then I suggest [class*="weather/"].
You can't use "/" in class name.
<img class='icon weather mostlycloudy' ...>
img.weather {
witdh:50px;
}
img is tag, so you dont use coma before it. icon is class, so before class you use coma
img.icon
Little change in your code
[class~="weather"] {
width:50px;
}
img.icon {
width:50px;
}
Related
pretty new to CSS and HTML and was hoping somebody could help me fix this. I wanted to be able to change the icon for the cursor although when I run the code, simply no change. A few visits to chatGPT hasnt done me much either. Here's my code:
body2 {
cursor: url("assets/img/wiiu/Smile_icon_32x32.png"), url("assets/img/wiiu/cursor.svg"), auto;
}
And yes, it is 32x32.
I've tried moving it to different classes, changing words, changing everything. Although nothing has worked.
here is a good reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor?retiredLocale=de
So basically you try to applie to a body2 HTML element you're CSS code. If its a class try the CSS selector .body2 {} or in the case its an id of a HTML element #body2 {}.
In you're css you've got one main picture and the second one as fallback. Just make sure you set the correct path corresponding to the location of you're CSS file.
To ensure that, you can also try the full path instead of the relativ one like C:\Users\xxx\Smile_icon_32x32.png
You are using the wrong css declaration, your code will only work if you have defined a custom html element having <body2> as tag.
What you probably want is:
body { ... }
applied to <body> tag
or a css class
.body { ... }
applied to or any other tag having body as class.
or a css id
#body { ... }
applied to or any other kind of tag with body as id.
Alternatively check in the browser console if the rule is applied and if the image path is resolved correctly.
Here is an example where http://example.com/32x32/990000/fff.png&text=PNG don't exist and https://dummyimage.com/32x32/009900/fff.gif&text=GIF exist so the gif will be used instead of the png :
.body2 {
display:inline-block;
cursor: url("http://example.com/32x32/990000/fff.png&text=PNG"),url("https://dummyimage.com/32x32/009900/fff.gif&text=GIF"), auto;
}
<div class="body2">display</div>
Is there anyway i can access the style property for the particular div? For example, I have a code like below
<div class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
I want to apply some other background color for this division. But i don't want to modify the class "testing", because it is being used in some other places also. Is there anyway using CSS only to access the style property and apply my new color?
I think attribute selectors may be what you are looking for:
div.testing[style="background-color:#ff00ff;"] {
background-color: new_color !important;
}
You can create another class and overwrite necessary property:
.testing-active {
background-color: red;
}
and use it like this:
<div class="testing testing-active"></div>
You need to make a style that has higher priority than the style. You could use the !important attribute to do that:
<div class="testing" style="background-color:#ff00ff;background-color:red !important;">
Big important caveat: whatever it is you're trying to do doesn't sound like a good idea, because the code will be very difficult to maintain. What is the underlying problem that you are trying to solve?
You can access the elements with this certain style like this:
.testing[style="background-color:#ff00ff;"] {
/* put your attributes here*/
}
but you cannot change the background-color attribute since this one has a higher priority in the html.
see this:
.testing[style="background-color:#ff00ff;"] {
background-color: #00f; /* not possible */
margin: 30px; /* possible */
}
what you can do is add a new attribute to your html like this:
<div class="testing" changecss="true">
This is my test Paragraph
</div>
and add this css:
.testing[changecss="true"] {
background-color: #00f;
}
See the JsFiddle as well.
"Think it is a dynamic code. How can i add new class without using javascript? "
The Answers is You cannot add a new class using CSS dynamically/ runtime. The only way to do it is by using javascript/jquery:-
HTML:
<div id="mydiv" class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
JQUERY:
$('#mydiv').css('background','#ColorCode');
This way your class also wont change( since its being used in other places) and you can change the background also.
Can i ask why you are trying to achieve this using CSS?
I'm reworking a site but only have permission to change the CSS. Most of the elements I need to change are properly tagged as id's or classes, but a few places have ids or classes listed inside an img tag.
I want to replace that image in the img tag using only css. Is there a way to do this? ie, hide the src img and have only my css referenced image visible?
sorry for such a late post, (almost a year, i know..), but i had the same exact problem Dreamling,
Some of the html used on our site is called up externally, so editing the html was not an option for me either. Here's how i solved the problem... Using only CSS.
Use Firebug if you have it.
Now look for the image you'd like to replace in the HTML. (firebug will show the id's and classes of the elements)
Your HTML should look something like this for it to work. (with an img src element inside a span element)
<span class="Dreamlings_ClassA Dreamlings_ClassB">
<img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
<span>[This is just an extra span!] </span>
</span>
Now for the CSS :)
Call up the first element by class in the css. (use the last class name to be more specific in with editing [if you have multiple span elements with same first class name])
<span class="Dreamlings_ClassB">
should look something like this..
span.Dreamlings_ClassB {
background-image: url('../dreamlingsnewpic.png') !important;
}
and to hide that pesky image in the img src element..
span.Dreamlings_ClassA img {
display: none !important;
}
And thats it! :)
p.s. I was using the !important tags in my css to overwrite other external stylesheets..
but you don't have to use the tags if yours css will work without them. (you just have to be more specific in the css with id's and classes)
Hope this helped!
-tony
If your image tag is inside a container, anything that's a block, then use this:
<style>
#container {
background: url('image.png') no-repeat;
text-indent: -9999;
}
</style>
<div id="container">
<img src="image.png" alt="image to be replaced" />
</div>
As others said, it's really not good practice, but it works. Only tested in Chrome.
I want to replace that image in the img tag using only css.
Not that I know of, no. An image's src attribute can't be altered from CSS.
I also can't think of a workaround to do this, not even a terribly kludgy one. You can of course assign a background-image to the image element, but the actual image will always be in front of it,
You would have to have the original HTML altered in a way so the original button is a <button> element with a background-image property - that you can override using CSS.
Restricting access to the HTML but allowing access to edit CSS is odd practice. Both elements go hand in hand to produce the page.
Anyway, you could try removing or changing the name of "btn_next.png" so that it doesnt display when called from "src" and make the CSS the following:
#btn_next {
background: url('image.png') no-repeat;
display:block;
width:150px; /* for example */
height:30px; /* for example */
}
If that doesnt work, the only other way would be to hide the input button and replace the li row with a background image but then the button will cease to work. Unless you have access to an already included javascript file, then you can look at other solutions.
I have a DIV square containing the word "Next". I would like to have the DIV background color change when I hover over it and have it take me to a link when I click on it. Can I do this without using Javascript? I don't just want to use a link as I guess for that then it would only work if I go above "next".
Thank you very much for advance helping.
Inevitably we have to ask: why not make it a hyperlink? If it quacks like a duck and looks like a duck, it should really be a duck.
You can handle the hovering effect with a simple :hover rule in your stylesheet (e.g., div.whatever:hover { color: red; }), but you can't instill an element with functionality like going to a new page without the use of JavaScript.
In HTML4(and to the best of my knowledge) HTML5 you can't do this. I heard they are planning on doing it in XHTML2 but that's not out yet.
You could simply use the <a> element like a <div> just give it a class, for example NextLink and then you can do things in CSS to make it look and act like a div:
.NextLink {
display:block;
}
.NextLink:hover {
background-color:red;
}
You can achieve this by having a hyperlink within the DIV with display:block:
<style>
#next:hover { background-color:red; }
#next a { display:block; }
</style>
<div id="next">
Next
</div>
Yeah, you can't really do that without javascript--or at least it wouldn't be worth trying, in my opinion. The best approach would be to style the a tag. Something like this:
a {padding:10px;border:solid 1px #000;}
a:HOVER {background-color:yellow;}
I have the following HTML:
<div id="graphicArea">
<div id="page1" class="pageArea land"></div>
<div id="page2" class="pageArea land"></div>
</div>
my CSS stylesheet file snippet (this works):
.pageArea {
width:220px!important;
height:210px!important;
}
my CSS stylesheet file snippet (this don't work):
.pageArea.land {
width:220px!important;
height:210px!important;
}
neitheir this works:
div.pageArea.land {
width:220px!important;
height:210px!important;
}
There is not much in this file further on, so I'm pretty sure it's not overriding the css.
Anyone know why cant it work?
Thanks.
EDIT
All this css is within #media print { .. }. I don't think its relevant though.
EDIT2
Does FF has any issue regarding setting a div height/width in mm? I guess that's the whole point...
According to the CSS 2.1 specification, your code should work. Are you using Internet Explorer 6?
edit 1: .class1.class2 works with Chrome, and probably other browsers as well. Are you sure your selector is not working? Try "display: none" to be really sure.
.pageArea.land means that the element you're targeting has 2 classes, pageArea and land.
How is your HTML laid out? Is .land a child of .pageArea? If so you just need a space between them, i.e.
.pageArea .land {
....
}
Try this:
<div id="page1" class="pageArea land"></div>
.pageArea {
width:220px!important;
height:210px!important;
}
.land {
width:220px!important;
height:210px!important;
}
you have the dot of land in the pageArea , It must look like div.pageArea, .land
You have to have a space between .pageArea.land like this .pageArea .land You can try the following css structure
div#page1 .pageArea{
css goes here
}
div#page1 .land{
css goes here
}
div#page2 .pageArea{
css goes here
}
div#page2 .land{
css goes here
}
Use Firebug to determine which styles are influencing the final appearance of these elements, once the cascade is applied.
Given the small snips HTML and CSS you've given us, it looks alright, yet you are telling us that you're not getting the desired result. Add to that your superfluous use of !important, and I think it's safe to conclude that your stylesheet contains many conflicting properties that aren't shown in your code sample, and one or more of them are influencing .pageArea.land.
EDIT All this css is within #media print { .. }. I don't think its relevant though.
If it's in #media print { } the css will be applied when PRINTING
To have it be applied in the browser use #media screen { }
And if you want to see it in both print and on screen use #media screen, print { }