In my project, my item's padding-left is set by previous stylesheet
And we can see there is padding-left 15px:
If I uncheck the padding-left:
Uncheck the padding-left is my requirement, so I write a css:
.lml-list-item {
background-color:#111111;
padding-left:0px; // I set padding-left:0px;
}
Then I check the html in the firefox, but found my css did not use:
Why my css do not work? and no matter I set lml-list-item in front or after the class, it always not work.
<a href="#" class="lml-list-item item-link item-content ">
<li class="item-content lml-item-content">
<div class="item-media black"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">info</div>
</div>
</li>
</a>
Seems your 15px padding impacts deeper than just .lml-list-item Try:
.list-block>ul>.item-content.lml-list-item {
padding-left: 0;
}
Or as last alternative an !important override:
.lml-list-item {
padding-left: 0 !important;
}
As you can see from the pictures you've included, the padding-left: 15px is set on .list-block .item-content, so assigning a rule for .lml-list-item will of course not work.
Using .list-block .item-content.lml-list-item will, and perhaps also .list-block .lml-list-item as long as it's included after the existing stylesheet. Also, if you want to override just a few rules, you could just add a <style>-block to <head> in the actual file (instead of adding another stylesheet), as inline / declared styles will override stylesheet-styels.
Related
Here's some code that contains a tags, one which contains an image.
<div class="container">
Not styled
<img src="image.png">
</div>
If I only want to style the image, how would I do it (without creating a class or something similar)?
For example, if I want to style all the a tags, I could use the following CSS:
.container a {
/* styles here */
}
If I want to style all the img tags, I could use this:
.container img {
/* styles here */
}
Is there a way to apply this same logic to an img in an a tag?
Edit: Here are the styles I'm applying. For some reason, when I use .container a img it adds extra padding/margins.
.container a {
padding: 9px 10px 5px 10px;
}
Edit 2: I think the problem lies elsewhere. Whenever I try any of the suggested responses (i.e. .container a img, #img, src="image.png") they all lead to the amount of vertical padding/margin increasing. Should I delete my post? It seems all it is getting is downvotes right now.
Yes You can do that, Have a look into the demo, it will be applied to all the images under a tag
.container a img {
/* styles here */
}
If you just want a single image to be applied for css, try giving it an ID, then apply css to an id
Demo which applies to all
.container a img{
filter: sepia(100%);
}
<div class="container">
Not styled
<img src="https://www.whistler.com/images/placeholders/200x200.gif" />
<img src="https://www.whistler.com/images/placeholders/200x200.gif" />
</div>
Demo which applies to single id
#img{
filter: invert(100%);
}
<div class="container">
Not styled
<img src="https://www.whistler.com/images/placeholders/200x200.gif" />
<img src="https://www.whistler.com/images/placeholders/200x200.gif" id='img' />
</div>
You can do a nested CSS
.container a img {
/* styles here */
}
.container a img {} is the best way to do it, but every IMG will use the amount of padding/margin that you've given in the .container a {padding: etc }. So try to position the IMG with margins.
I think you can simply use CSS to point exactly to the image like below:
img[src="image.png"]{
}
your question: If I only want to style the image, how would I do it (without creating a class or something similar)?
Now, if you only want that specific image no problem, but if later more and more images will behave the same way you better create a class
note: you didnt specify what styles you wanted for the image, so I asummed you wanted this ones padding: 9px 10px 5px 10px
<div class="container">
Not styled
<img style="padding: 9px 10px 5px 10px;" src="image.png">YES styled
</div>
Give your image a seperated class and then style it in your css
You just to need to write CSS with a in heirarchy as
.container a img {
// your code
}
I am not that familiar with CSS and have a very basic question. I simply want to remove right and left padding from the following "div":
<div id="__grid2" data-sap-ui="__grid2" class="noPaddingRightLeft sapUiRespGrid sapUiRespGridHSpace1 sapUiRespGridMedia-Std-LargeDesktop sapUiRespGridVSpace1">
"sapUixxx" classes are provided by a framework and cannot be adjusted directly. Therefore I declared a new css class "noPaddingRightLeft" and added it to the div:
.sapUiRespGridHSpace1 .noPaddingRightLeft{
padding: 0 0; }
When I check the result in the Chrome debugger tools it looks like this:
CSS at Runtime
There is no sign of my class "noPaddingRightLeft" though it's in the class list of the element. How can I override sapUixxx css files correctly?
Thanks for help
Tobias
Add the important flag to your css
.class {
padding-right: 0 !important;
padding-left: 0 !important;
}
Do:
<div id="__grid2" data-sap-ui="__grid2" class="noPaddingRightLeft sapUiRespGrid sapUiRespGridHSpace1 sapUiRespGridMedia-Std-LargeDesktop sapUiRespGridVSpace1" style = "padding: 0">
Or create the css class as following:
#__grid2{
padding: 0 !important;
}
Add this to your css:
.sapUiRespGrid.sapUiRespGridHSpace1 {
padding: 0;
}
quick question about my stylesheet. I was always taught that CSS overwrites up to down. So something on line 1 could be overwritten by something on line 10. I'm trying to increase the padding in a section, but not touch the other style:
This is on Line 642
&:first-of-type > div {
padding-top: 10px;
img {
margin-bottom: 20px;
}
}
This is on Line 722
.apiPT {
padding-top: 32px;
}
I don't even want to mention that I don't believe my HTML should be picking up the style from 642, but it is and it's being overwritten by it. I really would love to avoid using !important as that's obviously not too good. But not really sure why I'm having this issue...
<div class="col-md-7 col-md-offset-5 apiPT">
<ul class="pipe">
<li>API references</li>
</ul>
</div>
You could assign an id tag to the link if it is the only link there
<a href="api-reference/v3" id="example" >API references</a>
That would overwrite it
The answer is just as #sn3ll said:
.class1 .class2 .apiPT {
...
}
gave it a higher priority - thanks for the help!
I'm working on a custom navbar on a site I'm making but I've run into an issue. I've searched around and have found some similar threads, but nothing that has worked for me. I have a navbar with an image and some text underneath. What I'm trying to accomplish is while hovering over either the text or image, the hover effect for both occurs. The issue is that for the image, the hover effect is done thru an ID and the text hover effect is done thru a class. Here is my markup for one of the sets.
<div class="col-md-2 col-sm-1">
<a href="#Url.Action("Index","Home")" title="HOME" style="margin-left:10px;">
<div id="homenav"></div>
<div class="navtext">HOME</div>
</a>
</div>
And here is the CSS for the image:
#homenav {
margin: 0 auto;
display: block;
width: 47px;
height: 50px;
background: url('../Images/NAV_ICONS/NAV_HOME.png') no-repeat 0 0;
}
#homenav:hover {
background: url('../Images/NAV_ICONS/NAV_HOME_RED.png') no-repeat 0 0;
}
And the CSS for the text:
.navtext{
font-family: RobotoCondensed-Bold, 'Arial Narrow', Arial, sans-serif;
color: #00457c;
overflow: hidden;
white-space: nowrap;
}
.navtext:hover{
color: #ee2e24;
}
And just for clarity, I'm simply trying to make both turn the same color red. Any advice will be greatly appreciated.
Could this fit your needs ?
Put both div (#navbar and .navtext) inside a wrapper div, then put your hover styles in those selectors:
#wrapper:hover #homenav
and
#wrapper:hover .navtex
See fiddle here.
But the hover styles come for a hover over the whole wrapper div.
When using css :hover, the property changes will only affect the element being hovered. You would have to use Javascript/JQuery to do this, but it's pretty straightforward.
First, we need to change the :hover css elements into classes like so
.navtextHover{
color: #ee2e24 !important;
}
.homeNavHover {
background: url('http://lorempixel.com/g/400/200/') no-repeat 0 0 !important;
}
We also need to add a new class. This class will essentially mean that they are all tied together when hovered - ie, when one is hovered, all will be treated as hovered. So add that to the HTML (I called it syncedHover)
<div class="col-md-2 col-sm-1">
<a href="#" title="HOME" style="margin-left:10px;">
<div id="homenav" class="syncedHover"></div>
<div class="navtext syncedHover">HOME</div>
</a>
</div>
Then the javascript merely adds the classes on hover and removes them on exit
$(".syncedHover").hover(
function () {
$("#homenav").addClass("homeNavHover");
$(".navtext").addClass("navtextHover");
},
function () {
$("#homenav").removeClass("homeNavHover");
$(".navtext").removeClass("navtextHover");
}
);
This could be written better by passing data to the JQuery method on hover so you don't have a list of addClass methods, but this isn't too cumbersome for only two elements.
This JSFiddle shows a working example with how it can be done https://jsfiddle.net/bou7mqk3/1/
You just need to put a class on the link instead. As in, the parent a tag that the two elements are nested inside.
In this HTML the only change is the additional class on the link - 'your-class', and I removed the unnecessary syncedHover classes:
<div class="col-md-2 col-sm-1">
<a href="#" title="HOME" style="margin-left:10px;" class="your-class">
<div id="homenav"></div>
<div class="navtext">HOME</div>
</a>
</div>
And then update your CSS to this:
.your-class:hover #homenav{
background: url('../Images/NAV_ICONS/NAV_HOME_RED.png') no-repeat 0 0;
}
.your-class:hover .navtext{
color: #ee2e24;
}
No JavaScript needed at all!
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor