I am currently working on a process site for my Web Design I class. Seeing that I have previous knownledge of HTML I didn't want to stick to a generic layout of my site.
That being said I have come across this problem in the past and just can't remember how to fix it.
http://bccvisualdesign.com/art271/simmons/index.html
As you can see if you resize the browser the div doesn't stretch once a scrollbar is introduced. I am wondering if it is my CSS for the div?
div.content{
width: 50%;
margin-left: 25%;
background: #FFF;
position: fixed;
top: 0;
bottom: 0;
padding: 0px 35px 0px;
-moz-box-shadow: 0 0 40px #000;
-webkit-box-shadow: 0 0 40px #000;
box-shadow: 0 0 40px #000;
}
The goal is to have the white div infinitely stretch top to bottom regardless of the scroll or not. Thank you all for your help!
Using position: absolute rather than position: fixed, as in your live example, you can get this to work by removing the bottom position, or changing it to bottom: auto, and setting a min-height: 100% on div.content.
Related
I'm trying to pin a flexible DIV (centered, with max-width) to a header:
position: fixed;
top: 49px;
left: 50%;
margin-left: -50px;
It's working fine, but my flexible div is not "flexible" anymore (it's just max-width size). How can I get a flexible and sticky div at the same time?
Fiddle
I want the red one to be resizable and pinned to header
You could add a position: sticky; top: 0;, it will position the sticky at the top of it's parent. Lets say you where to put a hero just below the header, it will position at the bottom of the hero.
EDIT:
to make this browser compatible you should use a polyfill, there are a couple to choose from but here are two I used.
1) Filamentgroups polyfill fixed-sticky
2) wilddeer polyfill stickyfill
http://jsfiddle.net/shbcgac8/4/
.sticky-card {
position: sticky;
top: 0;
width: 100%;
max-width: 960px;
height: 150px;
margin: 0 auto;
background: red;
box-shadow: 0 2px 4px rgba(0,0,0,0.24);
margin-bottom: 24px;
}
Keep it fixed, keep it's max-width, and then just add width: 100%;
When you downsize the screen it will also resize down.
I created an Ad prototype for a client. And I am unable have child show-up underneath parent, even though their z-indexes are correct.
Please take a look - http://www.charuv.com/prototype/i4.html
Steps to the issue
Window scroll - scroll up having your mouse over the black background.
Content scroll - scroll up having your mouse over the device-simulator, the one with a thick white border.
Having done above , you would see following visual glitch (not sure if its fixable)
CSS issue
Video inside #ad-box is overlapping the super-parent - #get-frame, but not the immediate parent #c1.
So the structure is like -- #get-frame -> #c1 -> #ad-box
CSS rules
Following are the CSS rules for above three
#get-frame {
margin: 6% auto 0;
overflow: auto;
border-width: 72px 25px 63px;
border-style: solid;
border-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, .8);
border-radius: 50px;
z-index: 999999;
position: relative
}
#c1 {
z-index: 99999;
background-position: left top;
background-attachment: fixed;
background-image: url("blue.jpg");
background-attachment: fixed
}
#ad-box {
position: fixed;
margin: 11.5% 26.2%;
top: 0;
left: 0;
overflow: auto;
z-index: 99999
}
Appreciate your time.
Remove position: relative; z-index: 99999; from #c1. This way there is no parent context and the fixed position #ad-box is free to interact with z-indexes elsewhere in the DOM structure.
JSFiddle Demo
I have a div for a header and a div for a content wrap.
For some reason, I can't have a margin on the bottom of the header that forces the content wrap to push down. It just ignores it completely and I have no idea why.
Does anyone know what is going on with this? It doesn't do this when I take away the position: fixed; attribute on the header, but I want it to be fixed at the top so when scrolling the header is always in view.
Hoping someone can explain why this happens or at least what it is called so I can google it.
body {
margin: 0;
padding: 0;
font-family: arial;
background: #5A9910;
text-align: center;
}
/* ==========================Main wrap for page==*/
div.wrap {
width: 100%;
margin: 0 auto;
text-align: left;
}
/* ==========================Header with logo==*/
div.header {
position: fixed;
width: 100%;
background: #ffffff;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}
/* ==========================Header logo image==*/
img.headerlogo {
width: 30%;
}
/* ==========================Content wrapper==*/
div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 0 auto;
}
<div class="wrap">
<div class="header">
<p>Header</p>
</div>
<div class="contentwrap">
<p>Test</p>
</div>
</div>
When you set an element to position: fixed;, you remove it from the "normal document flow". Imagine your website is a river, and you're looking down at it from above. Each element is a rock in that river. Any margin you've applied to your elements is like a force field around one of those rocks.
When you set position: fixed; on one of those rocks, you're essentially pulling it up out of the river so that the rock, in essence, is floating above the river in midair. The rock and the river's flow of water will still look the same to you, because you're up above looking straight down, but the rock is no longer interacting with the river's flow.
If you had applied margin to that rock, that force field around the rock is no longer keeping any water away from it, because the rock is hovering in midair thanks to its position: fixed; property. So there's no water or other rocks (other elements) from which it needs to distance itself. Your rock's force field (your element's margin) is pushing against thin air, so nothing in the river will be affected.
But a picture is worth a thousand words, as the saying goes:
This man is not really kicking over the Leaning Tower of Pisa, but it sure looks like it! In this example, the background of the picture, including the Leaning Tower of Pisa, is your page (or your 'normal document flow'), and the man is an element (or the rock from our last example) with position: fixed; applied.
Read more about the position property here and, more up-to-date, here.
One way to fix this is to set your header to top: 20px; z-index: 2; to make sure it's positioned at the top and above every other element on the z-plane, and then give your body position: relative; and a margin-top equal to the height of the header (in this case, 52px) plus the value of the header's top property. To increase the space between your header and your body, just increase the margin-top amount. This is sometimes called the "sticky header/footer" approach. Here's a demo:
body {
margin: 0;
padding: 0;
font-family: arial;
background: #5A9910;
text-align: center;
}
/* ==========================Main wrap for page==*/
div.wrap {
width: 100%;
margin: 0 auto;
text-align: left;
}
/* ==========================Header with logo==*/
div.header {
position: fixed;
top: 20px;
z-index: 2;
width: 100%;
background: #ffffff;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}
/* ==========================Header logo image==*/
img.headerlogo {
width: 30%;
}
/* ==========================Content wrapper==*/
div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 0 auto;
position: relative;
margin-top: 72px;
}
<div class="wrap">
<div class="header">
<p>Header</p>
</div>
<div class="contentwrap">
<p>Test</p>
</div>
</div>
P.S. position: fixed; is a CSS property (a property-value pair, to be precise), not an HTML attribute.
i think you have to explictly declare the position of fixed div.
div.header {
position: fixed;
width: 100%;
background: #ffffff;
top:20px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}
and assign margin at the content div
div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 80px auto;
}
check this fiddle if works like you need:
https://jsfiddle.net/0cmvg92m/3/
Margin does not work because position of the header is fixed.
You have to use padding-top on your contentwrap.
Your header have property position:fixed. Hence the margin that you apply to header does not impact the content section.
To solve this problem, you need to give either margin or padding to the contentwrap element
the css that worked with me is
#toaster-container {
width: 99%;
height: 98%;
margin: 15px;
position: fixed;
top: 0;
}
but I'm not sure how that worked, and don't know if it will still work with zooming
one more thing, the above css make width as the whole screen (100%). maybe that break some usages of top, bottom, right and left properties
I am working on a CSS3 tabs (Without JS) and having a big problem.
I am trying to make auto height of absolute div so that it can expand or shrink height accordinly but for some reasons it is not working.
I tried to give 100% height to my html,body but still not working. Without putting in more words, Here is JS fiddle.
Here is my relevant CSS:
.content {
background: #3404FC;
position: relative;
width: 100%;
height: 200px;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}
.content div {
position: absolute;
top: 0;
left: 0;
/* padding: 10px 40px; */
z-index: 1;
opacity: 0;
}
As you can see blue background is height so why it is not taking auto height. I tried 100% but it is not working at all.
Please help!
You can try this:
.content div{
position: relative;
}/**instead of position: absolute;
you can selected div visibility: visible:
and none-selected div visibility hidden;
Even though you've set the height to 100% of the parent div, in this case content it won't have a height. The reason is, all of your child elements are positioned absolute. This makes the elements go out of the normal flow making the height of the parent div to 0px.
Use this :
body,html,.tabs{height:100%;}
Because you are using margin in tabs, its height will be more thant 100%.
I have a page background image that must be aligned precisely in order to coordinate with the background image of a frame (so it looks like the same image over page and frame). Here is what it looks like (note the plant image).
The problem is that the page background image is making the horizontal scroll bar appear. I want the horizontal scroll bar to appear when the window is smaller than the frame (#main_frame), not when the window is smaller than the page background image.
Here is the (SASS) CSS that (I think) is relevant:
#main_frame
-webkit-border-radius: 25px
-moz-border-radius: 25px
border-radius: 25px
-webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.7)
-moz-box-shadow: 10px 10px 10px 0px #706270
box-shadow: 10px 10px 10px 0px #706270
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
background-color: white
border-style: solid
border-color: black
border-width: 2px
width: 950px
margin: 50px auto
height: 800px
background: #fff url(../images/plant_white.jpg) 560px -95px no-repeat
#plantBackgroundHolder
width: 1200px
height: 900px
background: #ffc url(../images/plant_yellow.jpg) 690px -40px no-repeat
position: absolute
z-index: -1
top: 0
margin-left: -600px
left: 50%
And the HTML:
<div id="plantBackgroundHolder">
<div id="main_frame">
...
</div>
</div>
I'm pretty sure it's the width of the #plantBackgroundHolder that is causing the horizontal scroll bar to appear; but if I remove that, the background image gets shifted around.
Background information:
The original solution for making a transparent overlay effect
The site with the problem
The repo of the site
Any suggestions would be greatly appreciated!
You're declaring a height here and there on your CSS, you need to remove that, you need to let the height flow freely instead of setting a fixed height. Here are the places i could find:
body { height: 1000px } // remove height, also width!!!
#plantBackgroundHolder { height: 900px } // remove height
Moreover, remove the margin that you have set on the #main_frame id and set it to something like 10px auto 0 to remove the margin you have set on the bottom of the div.
Also, remove this from your html tag, you're forcing the scroll to appear on the page;
html { overflow-y: scroll }
Note: you need to heavily revise your code, you're not properly nesting your divs and you can easily achieve the same effect with less than half of what you have now.
Working to align the two images might keep coming back to haunt you. One approach is to use a single image with a transparent background. PNG's with alpha transparency work since IE6 (more info).
Sandwich the png between the white background behind the content and the border around the content. Here is an example JSFiddle.
/* Container provides (yellow) background behind the image */
#main_frame_container {
position: relative;
border-radius: 25px;
margin: 50px auto;
width: 300px;
background-color: yellow;
}
/* Position the "background" image */
#background_image {
position: absolute;
right: -10px;
top: -10px;
width: 100px;
}
/* Main content over both the (yellow) background and image */
#main_frame {
position: relative;
border-radius: 25px;
border: solid black 2px;
padding: 20px;
}
body {
background-color: pink;
}