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 6 years ago.
Improve this question
I cannot get my #supportive DIV to sit underneath it's preceding div and I'm unsure why:
I was going to solve this by adding a 'margin-top' dynamically in javascript as the slider's height will change based on the screen size however I'm certain there must be a way to do this in CSS?
Will absolute positioning be the problem when trying to float elements 'under' each other?
Here's the website: https://dl.dropboxusercontent.com/u/4469116/new/index.html
(to reach the issue, please click on 'projects', then the first image on the top left).
Your slider has absolute positioning, therefore you must compensate for its height by applying a margin-top of the amount of the absolutely positioned items height, in this case it was around 380px
Add this CSS to your stylesheet for that view:
#supportive {
margin-top: 380px;
}
Furthermore, the float is not doing anything as I can see so you should be able to remove it
If you would like your solution not fixed, the easy way with your current markup would be to give the slider a percentage height and then give a margin-top of th#e #supportive node
.slider {
height: 30%;
width: auto;
}
#supportive {
margin-top: 30%;
}
Or you can put the .slider inside of a separate container, and give the container the dimensions you want. This way your node will always be on the bottom as you wish as it and the container of .slider will be in natural flow for the document.
Related
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;
}
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 three social icons which grow when hovered (css element:hover) - I want them to shrink slowly to the initial size when user stops hovering them - how could I solve it with Javascript, CSS or jQuery?
You can use CSS alone to achieve this via the transition property, no Javascript required.
.icon {
font-size: 2em; // assuming the icons are font-based. Use height/width otherwise
transition: font-size 0.3s;
}
.icon:hover {
font-size: 4em;
}
Working example
Well, jQuery has a handy-dandy function set called .mouseenter() and .mouseleave() that I'm sure you've heard of :).
You obviously know how to get the elements to grow, so for them to shrink I would reverse what you've done and decrease the size after .mouseleave() Something like this, I think, would work:
$(document).ready(function(){
$('your_element_here').on('mouseleave', function(){
$(this).animate({height: '20px', width: '20px'}, 500);
});
});
Only you'd replace the '20px''s with whatever height and width you want the icon to shrink down to. I hope this helps and I would be glad to expand on this as much as you need so comment if you need anything else.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
If we want to make an element disappeared from the page completely, we could use the CSS property value display:none
Alternatively we can effectively hide an element with visibility:hidden but that element would still take the space as if it were there which I don't want.
So, If I want to actually hide an element without using the display:none, I see an option of explicitly setting the width and height equal to 0 of the element.
What is the semantic difference between these two ?
An element with no height or width still has a margin and/or border and will still influence surrounding elements by its presence in the tree, e.g. with float and clear rules. Only an element with display: none is really truly not present.
display:none takes the element out of the page, so screen readers can't see it. if you want to completely remove the element from the dom you should use display: none otherwise this does the same thing.
.hidden {
visibility: hidden;
position: absolute;
top: -9999px;
left: -9999px;
}
The display property tells the browser how to show an element. Display:none means that the element will not appear on the page at all. There will be no space allocated it. it will be hidden. But if you give height and width as 0px; then in this case, the contents will appear and contents will overflow outside the div.
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.
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 8 years ago.
Improve this question
I have an HTML table. Nothing too fancy. It has the thead and the tbody. I was wondering how I can using javascript or jQuery to move the tbody only down.
Edit:
So to give you some context about what I'm doing. I have a table with some information(who cares what it is). Using jQuery I fixed the header in place so that when I scroll down the header is still in place. It is all working well, with the little problem that the header and the first row overlap. So I need to move the top of the tbody down. Meaning The header will stay in place and the body will be moved down a little so that I can see the first row of the table(ie. first row after the header).
I was wondering if there was a way of doing this with jQuery or javascript.
I've tentatively tried to reproduce your issue here. There are certainly better ways to achieve the same effect, but is this the kind of code you have? There's no need to use jquery to keep the table header fixed, so I used css:
http://jsfiddle.net/LLjdk/
Relevant CSS:
thead {
position: fixed;
background: #fff;
}
table {
margin-top: 28px
}
Note that the table header is fixed (moves with scroll), and the background is set so that when the rest of the table goes behind it, it doesn't show through. Finally, there's a margin added to the top of the table to bump it down so they don't overlap.
I am not sure if this is what you are looking for but from your description I understand that you're trying to make the thead always appear on the top of the page. Here is what I came up with.
thead {
position: fixed;
top: 0;
left: 0;
background-color: white;
}
table {
margin-top: 30px;
}
DEMO
Hope it'll help you
You could use jQuery's scroll method http://api.jquery.com/scroll/
I would need more information but it sounds like you'd do something like this:
$(window).scroll(function(){
$("table").animate({marginTop: 50}, 250);
});
EDIT: I know this answer has been accepted as correct but it seems I misunderstood the question, as apparent by the downvotes. I thought OP was after getting the table to slide down and stay fixed just as the header does. I suggested the scroll method as that is how you'd get the table to change position states on scroll.
As others have pointed out you simply want to push the table down for the height of the header + the spacing desired, like so:
table {
margin-top: 80px;
}