We Keep Coding

Problems with the sticky div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
fixed div through position:sticky and after scrolling navbar which is fixed overlaps div. How can this be fixed?
Navbar from bootstrap
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks

You can use z-index property in CSS, imagine you have 2 divs, div-1 which has it's position sticky and and div-2
the code would be:
.div-1 {
position: sticky;
z-index: 0;
}
.div-2 {
z-index: 1;
}

I didn't understand what you want please write your code here, before that try the code below and see its work or not
* {
padding:0;
margin:0;
box-sizing: border-box;
}
#your-id-name-for-navbar{
z-index:99;
}

Black space after HTML ends [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
So , I have gotten a ticket from a client saying that he has some extra space after the footer end,i looked into it and it's true,basically,after the HTML ends there are a good few scrolls of plain black space. I tried giving the html doc a height of 100% and body a min-height:100% ,but it doesn't work.

It seems that the overflow of the div class="page-width" in the footer class="site-footer" is causing this issue. Set the css property overflow: hidden; to resolve the issue.
The implemented change:
.page-width {
overflow: hidden;
max-width: 1180px;
margin: 0 auto;
padding: 0 10px;
}

There is something that is shown from the dev tools that you have included in the HTML tag and has classes as follows html.js.svg.supports.csstransforms.csstransforms3d.csstransitions.shopify-features.__smart-payment-buttons--enabled.gr__virtualbabylon_com that has a dimension of 1349*2357.11. One of those classes or a combination of them generate that height of 2357.11. That is where you should start looking at.

Why does this code not work in my browser? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
If I run the following code in my browser (chrome) it doesn't work. However, when running this code in the stackoverflow preview compiler it works. Can somebody explain to me why ?
The code is supposed to change the background color of a div element.
My goal is to change the color of div using js. I also tried changing the value of a label and that didn't work either. The JS works without changing color( or text ) because it triggers an alert at the end. The code is also called after the document was loaded successfully.
function load() {
var div = document.getElementById('div1');
var label = document.getElementById("label");
// div.style.background = "green";
// label.value = "ml";
alert("hi");
}
document.addEventListener(load, load());
body {
background: #24313E;
font-family: arial;
color: #F2F2F4;
}
#div1 {
background: red;
width: 400;
height: 400;
}
<div id="div1">
hover me
</div>
<label id="label">hi</label>

You should pass a function reference to document.addEventListener.
Also the event name you want is "DOMContentLoaded"
ie use document.addEventListener("DOMContentLoaded", load); instead of document.addEventListener("load", load());
I think the reason why it works on Stackoverflow is because when load() is called the html part is already loaded so the selectors work

Positiong img under secondary img [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have problem again. I need positioning img (button) under news img. Here is link : HERE

try
img {
border: 0;
display: block;
}
You were getting problem because display of "img" and "a" was inline(no line feed) by default.
Set display of any one of them to block.

Give the anchor tag which contains the button style property - display: block

Is it possible to make the trimmed borders by "border-radius" unclickable? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Is it possible to make the trimmed borders by "border-radius" unclickable, and also not detecting you are hovering over it?

One way is to make the wrapping div and a tags also have a border radius...
.blackground > div, .blackground > div a {
border-radius: 100%;
}
.blackground > div a {
display:block;
}

The trick is to make the <a> tag the one whose size changes, because that's the element that determines the click area.
So you can do
.backgroud > div > a {
display: inline-block;
border-radius: 100%;
overflow: hidden;
}
Then remove the border radius (if you want) on the actual image.