I have some kind of animated javascript slider. I wan't some items to stick out a little of the top of my slider but to be hidden when they stick out of the bottom of the wrapper, so i made a div with overflow:hidden; with a little extra space over it. I now need to get rid of that extra-space in the flow.
It wasn't a problem before because i'd just set the div as absolute but now i'm making my layout fluid and i can't have absolute divs because the slider's height is relative to the document's width. Is there any way to get rid of those extra-pixels ? Thanks in advance.
http://jsfiddle.net/ySg6f/
Here's the actual website if it can help : http://pa3com.a3net.fr/
<header>
<div id="slider_wrapper">
<div class="overflow">
<div id="slider">
</div>
</div>
</div>
header
{
padding-top:20px;
background-color:blue;
}
#slider_wrapper
{
position:relative;
background-color:green;
}
.overflow
{
padding-top:12px;
overflow:hidden;
}
#slider
{
height:0;
padding-bottom:25%;
background-color:red;
top:-12px;
position:relative;
}
.overflow {
padding-top: 0;
}
#slider {
top: -12px; /* remove this */
}
Finally solved it by using negative margin and adding 1px padding on the parent.
Related
I'm trying to make an image under a title on the top left but the image doesn't want to cover the left side.
I changed the position to position: absolute, made the margin and padding 0, inspected the HTML page and can't see anything that can influence this image.
The HTML:
<div class="header">
<div class="container">
<div class="row">
<div class="col">
<h1>Dillan Robbertze<h1>
<img src="mountain-og.jpeg">
</div>
</div>
</div>
</div>
The CSS:
.header img{
height:Auto;
left:0;
margin:0;
padding:0;
position:absolute;
width:100vw;
z-index:1;
}
Expected Results: Image is under the title top left.
Actual Results: There is a white space left and top of the image.
EDIT: I added top:0; thanks to #Somesh Mukherjee. The image moved up, but there is still a left space that shouldn't be there.
add a class to the parent div element. and add position relative to it.
.myNewClass {
position: relative;
}
also, make sure your parent elements don't have margin and padding. for that, you can use a CSS reset like this:
* {
margin: 0;
padding: 0;
}
though this will make sure all of your elements don't have any margin or padding so you need to specify all you need by yourself. you should put this at the top of your CSS file if you want to use it.
You have not specified the top attribute
.header img{
height:auto;
left:0;
top:0;
margin:0:
padding:0;
position:absolute;
width:100vw;
}
why don't you try:
top: -28px;
position:relative;
Helped me once, or twice in similar situations.
The background is pretty simple, I wanted to have a small caption slide up from the bottom of an element when the user hovers/taps. See fig 1.
A bit of digging said this couldn't be done using CSS, but I really don't see why. A few hours later, I think I'm very close to solving it, but I can't jump the final hurdle.
My logic was, if your parent element has overflow: hidden, and you absolutely position the caption off the bottom of the parent, you can just animate the position values using the transition attribute so it slides up. Pure CSS baby!
You can't animate height- the text is crushed, the element has to be moved as a block (though not necessarily rendered as display:block).
Here's where I've got to so far https://jsfiddle.net/zufwavpn/. The HTML,
<div class="item-wrapper">
<div class="content">
Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
</div>
<div class="popup-title">
<span>A title for my content</span>
</div>
</div>
And the CSS (I've converted to vanilla CSS here),
.item-wrapper{
height:22rem;
position:relative;
overflow:hidden;
color:white;
font-family:sans-serif;
}
.content{
height:100%;
background-color:red;
padding:10px;
}
.popup-title{
position:absolute;
top:100%;
bottom:0%;
width:100%;
transition: bottom 0.5s, top 0.5s;
vertical-align: bottom;
}
.popup-title span{
display:block;
margin:0;
background-color: black;
}
.item-wrapper:hover .popup-title{
bottom:0%;
top:0%;
}
The reason I feel close is that at this stage, the popup basically works, but the content inside it should be aligned to the bottom of the container. Essentially it's the age old trick of set an absolutely positioned element's top and bottom to '0' but used to animate something from below the container.
Why am I animating the top and bottom attributes? If you only work with the 'top' value, you can hide the element by setting top:100%, but you can't animate that so it'll rest on the bottom of the parent. You'd need a specific value for top to be set to (height of parent minus height of content of pop up), and the pop up content / parent could be any size. You could set bottom:-100% - and this actually works, you can animate to bottom:0%, and the pop up with rest at the bottom of the parent. All good and done with no need to set a top value. But, it's unsatisfactory, you're having to place the slider way way below the parent and animate it up, which for various reasons to do with the other animations, produces a badly timed effect.
So, here we have the pop up element positioned at the bottom of the parent, with no height since the top and bottom values coincide, and the content overflowing downwards. Perfect. Then the top value animates up, the pop up element now has top:0; bottom:0, filling the parent, and if only I could get the content to stick to the bottom all would be well.
This last bit isn't usually too difficult. We have vertical-align, and the whole world of flex, but they all seem to produce errors and bugs and lead me down holes. Any ideas anyone? At this point I have to move on and just use javascript, but I feel like it's a problem worth solving in its own right.
.item-wrapper {
height:22rem;
position:relative;
overflow:hidden;
color:white;
font-family:sans-serif;
}
.content {
height:100%;
background-color:red;
padding:10px;
}
.popup-title {
position:absolute;
top:100%;
width:100%;
transition: transform 250ms;
vertical-align: bottom;
}
.popup-title span {
display:block;
margin:0;
background-color: black;
}
.item-wrapper:hover .popup-title {
transform:translateY(-100%);
}
<div class="item-wrapper">
<div class="content">
Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
</div>
<div class="popup-title">
<span>A title for my content</span>
</div>
</div>
Adjusted the top: and bottom: properties for the .popup-title, and moved the background color to the div, not it's child span. No need for specific heights here. It should be dynamic.
.item-wrapper{
height:12rem;
position:relative;
overflow:hidden;
color:white;
font-family:sans-serif;
}
.content{
height:100%;
background-color:red;
padding:10px;
}
.popup-title{
position:absolute;
bottom: -101%;
width:100%;
transition: bottom 0.5s, top 0.5s;
vertical-align: bottom;
background-color: black;
}
.popup-title span, .popup-title p{
display:block;
margin:0;
padding: 10px;
}
.item-wrapper:hover .popup-title{
bottom: 0;
}
<div class="item-wrapper">
<div class="content">
Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
</div>
<div class="popup-title">
<span>A title for my content. Height of the content here is irrelevant.</span>
</div>
</div>
<br />
<div class="item-wrapper">
<div class="content">
Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
</div>
<div class="popup-title">
<p>The popup div should expand as necessary. Even if there are multiple sentences or paragraphs.</p>
<p>Just dont' make it taller than the wrapper div</p>
</div>
</div>
Simply make .popup-title to have negative bottom position (not top value needed at all) and on hover transition it to 0.
.item-wrapper {
height: 22rem;
position: relative;
overflow: hidden;
color: white;
font-family: sans-serif;
}
.content {
height: 100%;
background-color: red;
padding: 10px;
}
.popup-title {
position: absolute;
bottom: -100%;
width: 100%;
transition: bottom 0.5s, top 0.5s;
vertical-align: bottom;
}
.popup-title span {
display: block;
margin: 0;
background-color: black;
}
.item-wrapper:hover .popup-title {
bottom: 0;
}
<div class="item-wrapper">
<div class="content">
Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
</div>
<div class="popup-title">
<span>A title for my content</span>
</div>
</div>
I have a "fixed" DIV on the very top of my page:
<div id="banner-wrapper">
<div id="banner"></div>
</div>
with the following CSS:
#banner-wrapper {
width:300px;
height:500px;
}
#banner {
width:300px;
height:500px;
position:fixed;
top:0;
left:0;
background:orange;
}
This "fixed" DIV is followed by a "content-wrapper" DIV:
<div id="content-wrapper">
<div id="content-left">
content left
</div>
<div id="content-right">
content right or sidebar
</div>
</div>
with the following CSS:
#content-wrapper {
width:300px;
background:red;
position:absolute;
top:500px;
bottom:0;
}
#content-left {
width:150px;
float:left;
}
#content-right {
width:150px;
float:right;
}
The issue I'm having is that the "content-wrapper" DIV does not fully cover the "fixed" DIV. The top of the "content-wrapper" covers the "fixed" DIV and the bottom of "content-wrapper" becomes transparent, showing the "fixed" DIV beneath.
I was able to solve the problem by giving the "body" a height in CSS. However, I do not want to give the "body" a height as I do not know the true hight of the content and would like it to remain flexible. I've also have tried inserting
<div style="clear:both;"></div>
before the closing tags but it does not force the "content-wrapper" down.
Here is an example of the issue on JSFiddle.
As you can see, the "red" box does not reach the "blue" box even though it is set to absolute, bottom 0. From what I can tell it reaches the bottom if it does not contain any DIVs inside of it. But once I add the "content-x" DIVs, it no longer reaches the bottom of the page.
Thank you for any help.
You could relatively position the element #content-wrapper rather than absolutely positioning it. Then you can omit the top/bottom positioning and it will behave as expected.
The reason it wasn't working in the first place was because you were giving the absolutely positioned element a height of 100%. Therefore it will have the same height is the window, which is not what you wanted.
Updated Example
Change the following:
#content-wrapper {
width: 300px;
height: 100%;
background: red;
position: absolute;
top: 500px;
bottom: 0;
}
to:
#content-wrapper {
width: 300px;
background: red;
position: relative;
}
Absolutely positioned (side yellow advertisements) div's cause unwanted horizontal scrollbar when window is resized (size decreased) beyond them. Scrollbar should appear only when window is smaller than main #container and these advertisement div's should not affect the layout. It doesnt matter if they get covered.
HTML:
<div id='topbar'>
<div id='menu'> <a href='#'>Link1</a>
<a href='#'>Link2</a>
<a href='#'>Link3</a>
<a href='#'>Link4</a>
</div>
</div>
<div id='container'>
<div id='pushfix'></div>
<div id='ad_container'>
<div id='ad1'>ad</div>
<div id='ad2'>ad</div>
</div>
Lorem ipsum placeholder text
</div>
CSS:
body, html {
height:100%;
}
body {
margin:0;
}
#topbar {
width:100%;
background-color:#DCDCDC;
height:40px;
position:absolute;
}
#menu {
width:250px;
background-color:#B3B3B3;
margin:0 auto;
height:100%;
text-align:center;
line-height:40px;
}
#menu a {
color:#fff;
}
#container {
height:100%;
background-color:#808080;
width:240px;
padding:0 5px;
margin:0 auto;
}
#pushfix {
height:40px;
}
#ad_container {
position:relative;
width:240px;
}
#ad_container div {
width:100px;
background-color:yellow;
height:300px;
position:absolute;
}
#ad1 {
left:-105px;
}
#ad2 {
right:-105px;
}
Exact layout replica: http://jsfiddle.net/8UkQA/
Absolutely-positioned elements that expand beyond the boundaries of the body seem to cause scrollbars to appear, for some reason. You can remedy this by simply wrapping everything inside the body tag in a relatively-positioned div styled with overflow: hidden;. The absolutely positioned content that expands beyond the boundaries of this container won't cause scrollbars on the window.
Here's a working example: http://jsfiddle.net/8UkQA/1/
I may like to further add, if the same problem is being faced and by using the solution suggested by #Aaron the page seems to not scroll then you can use axis specific version of the "overflow" attribute, as following,
overflow-x: hidden;
This will only hide the content protruding on the right hand side (or left hand side if website is RTL) and not the vertical content.
Also to further enhance this method if the protruding content is appearing only at a certain resolution (as in my case), you can use css media query to restrict the behaviour.
#media (min-width: 1500px) {
body {
overflow-x: hidden;
}
}
You need to give the child coordinates a.k.a. top: 0; left: 0;
// need to disable AutoScroll first, otherwise disabling the horizontal scrollbar doesn't work
flowLayoutPanel.AutoScroll = false;
// disable horizontal scrollbar
flowLayoutPanel.HorizontalScroll.Enabled = false;
// restore AutoScroll
flowLayoutPanel.AutoScroll = true;
Hope this will resolve your issue.
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.