This question already has an answer here:
What is the point of CSS collapsing margins?
(1 answer)
Closed last year.
I have an element with a margin at the bottom of 10px. And immediately under this element, I place another element with margin at the top of 10px.
Now there is exactly 20px of whitespace between these 2 elements.
What could be the cause of this behavior?
Maybe you're giving some default margin in the body section.
So you can try saving this using:
body{
margin:0
}
Related
This question already has answers here:
What is the order of precedence for CSS?
(9 answers)
Understanding CSS selector priority / specificity
(4 answers)
Closed 2 years ago.
Say I have an element on which two classes are getting applied with conflicting styles. How is the precedence of the styles chosen?
<h1 className="red blue">What color will I be?</h1>
css file:
.red {
color: red;
}
.blue {
color: blue;
}
Which color will be applied to the <h1> element?
I tried to experiment with it and what I have concluded is that the class that gets defined at the end of the file gets applied. But it's just an observation? Am I missing something here?
codesandbox: https://codesandbox.io/s/conflicting-classes-2jbi7
CSS will read from top to bottom.
So your text is blue, if you move red after blue in your CSS file, it should be red
The last class that is in the code will affect the h1.
If they have the same specificity, the last one is the one that the h1 will be affected by.
This question already has answers here:
How to make a DIV always float on the screen in top right corner?
(2 answers)
Closed 4 years ago.
I have a need to make a hidden div element shown in an user event, in the visible top.
What I mean by visible top is,
- Its 0 if page is not scrolled
- if page is scrolled then I need coordinate of visible top, not the page top
Can that be set static with CSS or how to calculate it with jQuery or pure js.
Best Regards
You can do it with just plain css:
div {
position: fixed;
top: 0;
display: none;
}
This will always be on top: 0 regardless of whether it is scrolled or not.
This question already has answers here:
offsetting an html anchor to adjust for fixed header [duplicate]
(28 answers)
Closed 6 years ago.
So I have successfully gotten my page to jump to different sections on the page via buttons referencing the ID's like this
<button id="niftyBtn">Things</button></br>
<div id="nifty">Blah</div>
I have several of those and they all go to the correct portion of the page.
The problem is, there is a fixed nav that is included into the page that I can't change and the top of the sections are going behind that navbar instead of below it.
I have tried to use several different variations of a jquery solution I saw using .offset() but none of them have been effective. Any input is appreciated
Note: It behaves the exact same way when I use jQuery or javascript to jump the sections instead of href tags.
You don't need a javascript solution, something as simple as this will do:
h2:before,h3:before,h4:before {
content: " ";
display: block;
visibility: hidden;
margin-top: -7em;
height: 7em;
}
Granted, these are meant for headings, but you can substitute with a class, or IDs for the same effect. The measurements will have to be amended, of course.
BTW, why are you using <button> to wrap an <a>? That code should just be Things</br> and if you want it to look like a button, style it like a button.
This question already has answers here:
Slanted diagonal line in html or css?
(7 answers)
Closed 7 years ago.
I am trying to create a diagonal background in the background of an element. I can do this quite easily using a gradient, however this for a responsive website so the element needs to be fluid.
I can do something like this for a fixed shape...
div {
width:200p
height:200px;
margin-bottom:2em;
border:1px solid #aaa;
background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
}
This is using a rotated gradient with a hard stop, but it is using a fixed width. I have done a codepen here of how it would look with a width set in percentages, and as you can see, the concept breaks. http://codepen.io/juicypixels/pen/gPravL?editors=110
Would be very interested to see if there is a responsive way of doing this, even if I have to use javascript.
Thanks in advance.
try
background:linear-gradient(to bottom left,#ffffff 49%,#aaa 50%,#ffffff 51%);
instead of
background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
This question already has answers here:
Hiding the scroll bar on an HTML page
(22 answers)
Closed 9 years ago.
Is it possible to hide the browser's horizontal and vertical scroll through HTML or Javascript?
I have a listing and for that I have made my own div to div scroller and I want to hide the browser's scroll bars
Thanks in advance
You can apply overflow: hidden to html and/or body in CSS but then, of course, you have to be careful so that your <div> doesn't expand past the browser window.
Example:
html, body
{
overflow: hidden;
}
Set the body tag to overflow: hidden;.
You should be able to set the css for the div to hide the scrollbar. Put everything into a main div and set the css for the main div to this:
height: 100%;
width: 100%;
overflow:hidden;
then use your own scrollbars on the content div.