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!
Related
I'm following a tutorial on youtube to create a replica of LinkedIn with CSS + ReactJS. I've been following the tutorial exactly (using it as more of a learning opportunity than anything) yet sometimes when the tutorial adds certain code, it doesn't appear on my environment when I try to add it. I found a work around for one case, but when I try to add a border-bottom to css it just won't show up.
CSS:
.header{
position: sticky;
top: 0;
display: flex;
justify-content: space-evenly;
border-bottom: thin solid lightgray; /*this is a vscode shortcut*/
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
z-index: 999;
}
JS:
function Header() {
return (
<div className ='Header'>
<div className="header__left">
<img src="https://www.flaticon.com/svg/static/icons/svg/174/174857.svg" alt=""/>
<div className="header__search">
<SearchIcon/>
<input type="text"/>
</div>
<div className="header__right">
<HeaderOption Icon= {HomeIcon} title="Home"/>
<HeaderOption Icon={SupervisorAccountIcon} title="My Network"/>
</div>
</div>
</div>
);
}
*HeaderOption is an imported JS function I created. It isn't conflicting with the CSS I believe because I have removed it and the border still won't appear.
Thank you in advance.
CSS is case insensitive.
But in HTML the class and ID are case sensitive
change
<div className ='Header'>
to
<div className ='header'>
First off, you might wanna check your classNames' spelling for case-sensitivity.
If that's not the issue, your divs are probably collapsing with each other, so it renders the pixels through approximation. This is usually the case if you try zooming in your page and the missing border magically appears.
I suggest setting a height for your header where the borders don't collapse with the other divs' borders. Also, I prefer setting a fixed measurement unit rather like px,rem,%, etc. rathen than using thin.
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.
I have some code which displays images from imgur.
When hovering over an image, I want the title attribute to appear at the top of the image.
I have achieved all of this, but when the text becomes visible, it only appears on one line and writes over itself when it runs out of space, as in the image.
I would like the text to start on a new line once it reaches the end of it's container.
I have tried adding word-wrap: break-word; to each of the CSS selector below, as well as to a P selector (as the link is wrapped in a p-tag).
Any advice on how to resolve this is much appreciated!
I have the following html:
<section id='photos'>
<p>
<a class='hovertext' href='http://i.imgur.com/gallery/eWlGSdR.jpg' title='Opened my window shade while flying over Japan, noticed a volcano was erupting. (OC) [2448x2448]'>
<img src='http://i.imgur.com/eWlGSdR.jpg' alt=''>
</a>
</p>
And the following CSS:
a.hovertext {
position: relative;
text-decoration: none !important;
text-align: left;
}
a.hovertext:before {
content: attr(title);
position: absolute;
top: -1;
padding: 0.5em 20px;
width: 90%;
text-decoration: none !important;
color: red;
opacity: 0.0;
}
a.hovertext:hover:before, a.hovertext:focus:before {
opacity: 1.0;
}
As Dinesh said in the comments, this was caused by poor code awareness, as elsewhere in the code, I was calling 'line-height:0;' on the #photos element.
Removing this solved the problem.
i think you coul use some java script on this, if you only want to make it add a extra line to it, correct me if im wrong.
Here's an example what i think you mean:
First add this text next your class="hovertext" :
id="HoverText"
Add this part after your body or paste the code between script into a .js file and call it with
<script src="filename.js"></script>
<script>
HoverText=document.getElementById("HoverText");
HoverText.onclick=function(){ClickToShowText()};
function ClickToShowText(){
HoverText.innerHTML+="<br>New line with text";
}
</script>
just use the break tag at the end of the text that's supposed to be on the first line.
</br>
easy
I have this CSS class
.background-color-blue {
background-color: #00C0FF;
}
and I want to be able to use it on some elements if needed.
I now it is not very semantic, but it is used for HTML template that is meant to be easy to use, small in size, and universal.
I want to be able to use it on elements like some panels, sidebars, modals, top-bar menu , or whatever I want
of course it works, but only for divs that do not have background-color already specified.
in this case:
<div class="modal background-color-blue"></div>
.modal has already specified bg color to #fff. now it does not work - it stays white.
I have found two solutions for that:
.background-color-blue {
background-color: #00C0FF !important;
}
and
div.background-color-blue {
background-color: #00C0FF;
}
I am not sure about these... which solution is better? Or is there any other solution that would work better?
I think this method:
.modal.background-color-blue {
background-color: #00C0FF;
}
is not good since I would have to do it with any similar element.
and
<div class="modal">
<div class="background-color-blue">
</div>
</div>
also isn't good since modal already has some padding.
Just use !important it will help to override
.background-color-blue {
background-color: #00C0FF !important;
}
Take a look at this : when-using-important-is-the-right-choice
If you think that modal will be able to have different colors, i guess you'd like this (ITCSS - BEM inspired). This will help you to stay at a low specificity rate, preventing you to have some problems with future classes or have to overwrite them.
Exemple here :
http://codepen.io/AxelCardinaels/pen/ZGVKzp
HTML :
<div class="container">
<div class="modal modal--grey">
<h1 class="modal__title"> Modal Title</h1>
<p class="modal__text">Hello this is the content of the modal !</p>
</div>
</div>
CSS :
/*Base Class */
.modal{
width:40%;
margin:0px auto;
padding:20px;
text-align:center;
border-radius:10px;
box-shadow:1px 1px 1px rgba(1,1,1,0.3);
}
/*Attribute classes for the modal, just make a choice in your HTML ! */
.modal--grey{
background:rgb(220,220,220);
border:1px solid rgb(200,200,200);
}
.modal--blue{
background:rgb(65,105,225);
border:1px solid rgb(58,95,205);
}
The proper usage is
! important
Normally it should have been blue background. Perhaps something else that is preventing the elements of blue.
But don't forget that; the last !important taken into account.
I have this stylesheet:
*{
padding: 0px;
margin: 0px;
}
a{
background:yellow;
}
and this webpage:
Home
About
Contact
Results in:
How do I make those anchor tag to "touch" each other,removing that unwanted space in-between?
thanks
Luca
You need to remove the whitespace (in this case the newline) between your tags. Some browsers render it as a space.
You can use this trick to get rid of the space:
HTML:
<div id="test">
Home
About
Contact
</div>
CSS:
#test { font-size:0; }
#test a { font-size:16px; background:yellow; }
Live demo: http://jsfiddle.net/quucy/
I think I might find a pretty cool way to solve it :-). I started with the fact of using <!-- comments --> to fill empty < span >s etc.
So if you want to keep your anchor-on-a-new-line structure and do not want the spaces between them... simply open a block comment on the end of the line and end it on the new line just before new < anchor >
Like this:
<div id="test">
Home<!--
-->About<!--
-->Contact
</div>
and DEMO: http://jsfiddle.net/Lukis/reZG2/1/
The space between the links might be produced by newline characters you have in your code but it really depends in which browser you get this behavior (some browser ignore these characters some do not).
Try putting all three tags in a single line and without spaces between them.
HomeAboutContact
How about puting them in ul/li structure?
#test li {
background:yellow;
float: left;
list-style: none;
}
<ul id="test">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
All the above answers show some neat ways of getting rid of that unwanted whitespace but I don't see the one I've been using for almost a decade; so here's another simple solution to your very old problem for people who still wrestle with that whitespace -- use float!
HTML:
<div id="test">
Home
About
Contact
</div>
CSS:
#test {
overflow:hidden;
/* this isn't really required here but helps;
or use your preferred method for clearfix */
}
#test a {
float:left;
background: yellow;
}
jsfiddle:
http://jsfiddle.net/fjj7dsyx/2/
You can use flexbox:
div {
display: flex;
}
<div>
Home
About
Contact
</div>
Or if you use Bootstrap:
<div class="d-flex">
Home
About
Contact
</div>