I've this div:
<style>
#asd{
height:auto;
width:1024px;
margin-left:auto;
margin-right:auto;
background-color:#093;
}
</style>
I want this div's bottom to always reach down to the window's bottom, whatever the window's current size is.
what I tried so far adding to #asd's css, without the expected results:
margin-bottom:0px;
or
height:100%;
or
bottom:0px;
any advice?
Add
position:absolute;
bottom:0;
to your class...
#asd{
height:auto;
width:1024px;
margin-left:auto;
margin-right:auto;
background-color:#093;
position:absolute;
bottom:0;
}
You'll be wanting position: fixed If you use fixed you'll then need to tell it where to fix to:
#asd{
height:auto;
width:100%;
margin-left:auto;
margin-right:auto;
background-color:#093;
position: fixed;
bottom: 0;
}
So to tell it to be at the bottom of the page you use bottom: 0px
Make sure you set a height and width of the 100% on the body, html element like so:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Then use min and max-height on the ASD element:
#asd{
height:100%;
min-height: 100%:
max-height: 100%;
width:1024px;
margin-left:auto;
margin-right:auto;
background-color:#093;
}
Try setting min-height to 100%:
<style>
#asd{
min-height:100%;
width:1024px;
margin-left:auto;
margin-right:auto;
background-color:#093;
}
</style>
Related
I am trying to create a popup window triggered with JQuery and styled with CSS. I added a close button to the top right side of the box, however when you scroll down inside the box (overflow: scroll, due to max-height of the box) the X close button scrolls also, even though an absolute position is defined:
.team-name-popup{
position:fixed;
z-index: 9;
top:10%;
left:50%;
margin-left:-350px;
width:700px;
height:auto;
max-height:400px;
background:rgba(0,0,0,0.9);
overflow:scroll;
}
.team-name-popup-inner{
position:relative;
width:100%;
height:auto;
max-height: 100%;
padding: 50px;
overflow:scroll;
}
.team-popup-close{
position:absolute;
z-index:999;
top:5px;
right:10px;
color:#fff;
}
HTML
<div class="team-name-popup">
×
<div class="team-name-popup-inner">
<h5 class="team-name">Name</h5>
Text here
</div><!--team popup inner-->
</div><!--team popup-->
I tried changing the overflows, but then the scroll does not work:
.team-name-popup{
....
overflow:hidden;
}
.team-name-popup-inner{
....
overflow:scroll;
}
Default
Scroll
Please check this solution.
.team-name-popup{
position:fixed;
z-index: 9;
top:10%;
left:50%;
margin-left:-350px;
width:700px;
height: 400px;
max-height:400px;
background:rgba(0,0,0,0.9);
overflow:scroll;
}
.team-name-popup-inner{
position: absolute;
width:100%;
height: 400px;
padding: 50px;
overflow:scroll;
}
.team-popup-close{
position:absolute;
z-index:999;
top:5px;
right:10px;
color:#fff;
}
I have a div fixed on the top and a div content below it.
When I scroll the page I want div content to be over the div top, I put z-index in div content but nothing happens...
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
}
#content{
background:red;
margin-top:120px;
height:5000px;
z-index:300000;
}
html
<div id=top></div>
<div id=content></div>
I need div top to be fixed and content relative.
what is wrong?
https://jsfiddle.net/y97o6kaL/
Give z-index: -1; to #top will work for you.
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
z-index: -1;
}
Working Fiddle
I would add position: relative; to the #content div.
This would remove the need for any z-index styles.
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
}
#content{
background:red;
margin-top:120px;
height:5000px;
position: relative;
}
<div id=top></div>
<div id=content></div>
I'm using following outlook code which embeds an Outlook calendar in my website, but its aligned to the left by default. Can you please let me know to make it centre aligned to the screen.
Thanks
Code I'm using is
<style unselectable="on">
#wrap {
width:1000px;
height:900px;
padding:0;
position:relative;
left:0px;
top:0px;
overflow:hidden;
}
#frame {
width:1000px;
height:900px;
position:relative;
left:0px;
top:0px;
}
#frame {
-ms-zoom:0.7;
}
</style>
<div id="wrap" unselectable="on">
<iframe id="frame" src="[paste in here the link that outlook.com provides for you ... in between the quotes and without the brackets]"></iframe>
</div>
for center align set margin:0 auto to it's parent (if parent has width in px) or iframe.
#wrap {
width:1000px;
height:900px;
padding:0;
position:relative;
left:0px;
top:0px;
overflow:hidden;
margin:0 auto;
}
Add this line to #wrap in your css
margin: 0px auto;
See jsFiddle.
I have a header created with two div containers, one #header-container and one #header:
#header_container {
background:#eeeeee;
border:0px hidden;
height:100px;
position:fixed;
width:1000px;
top:0;
margin: auto;
display: block;
}
#header {
line-height:60px;
margin:0 auto;
display:block;
width:940px;
text-align:center;
}
I am of course unable to have both "fixed" and "center", so how can I center the header while keeping the "fixed" property?
Thanks!
This should do the trick to horizontally center a div with fixed position, of which the width is not 100%:
position:fixed;
background-color:grey; /* optional */
height:100px; /* optional but useful for most of you, choose value you want*/
width:1280px; /* optional but useful for most of you, choose value you want*/
top:0px; /* optional but useful for most of you, choose value you want*/
margin-left:auto;
margin-right:auto;
left:0;
right:0;
More info here: http://www.w3schools.com/cssref/pr_pos_left.asp
If you add "left: 50%;margin-left: -500px;" to #header-container, it will center. Don't forget to place the margin-left behind the margin: auto;
So your code will be:
#header_container{
background: #eeeeee;
border: 0px hidden;
height: 100px;
position: fixed;
width: 1000px;
top:0;
left: 50%;
margin-left: -500px;
display:block;
}
#header{
line-height: 60px;
margin: 0 auto;
display: block;
width: 940px;
text-align:center;
}
Here's a fiddle:
http://jsfiddle.net/AJLZT/8/
Just use
#header { margin: 0 30px;}
This might help. You just need to add the margin-left tag in your code
#header_container{
width:1000px;
height:200px;
margin:10px;
background:orange;
position:fixed;
margin-left:350px;
}
#header {
line-height:60px;
margin:0 auto;
display:block;
width:940px;
text-align:center;
}
Here is the 100% cure for this problem in one go.
Here you go:
First, add the bootstrap in the "head" in "html"
Then in the header, add the class "container-fluid"
Then in the style section, type as:
header {
position:fixed;
top:0;
left:0;
right:0;
}
//boom!!! problem solved.
I have a poblem with an element that is positioned relative. The problem is that I have a header with position fixed and content which is positioned relative. If I scroll down the content the element is put in front of the header. I tried with z-index but I just can't get it to work. I have put z-index:999 on header.
Here you can see my jsFiddle
Here is a picture:
The z-index on the relative positioned element should be lower than the z-index on the fixed position element. Here is a quick example:
HTML
<div id="fixed">Fixed Position</div>
<div id="relative">Relative Position</div>
CSS
body{
height: 3000px;
}
#fixed{
top: 0;
height; 100px;
background: green;
width: 100%;
position: fixed;
z-index: 2;
}
#relative{
position: relative;
top: 100px;
left: 50px;
height: 100px;
width: 100px;
background: red;
z-index: 1;
}
Working Example: http://jsfiddle.net/XZ4tM/1/
Fixing Your Example
The header styling has an issue, there are two colons :: proceeding the z-index properties value.
.header{
width:960px;
background: #43484A;
height:80px;
position: fixed;
top:0;
z-index: 9999; /* Removed extra : here */
}
Fixed Example http://jsfiddle.net/kUW66/2/
What I think you did is correct that using z-index in only a option. I have some work for you to understand.
Please follow the JS Fiddle link
HTML
<div id="header">Header</div>
<div id="content1"><div id="content2"></div></div>
CSS
body{
margin:0px auto;
color:#FFF;
}
#header{
background-color:#006666;
width:100%;
height:50px;
position:fixed;
text-align:center;
font:bold 12px Arial, Helvetica, sans-serif;
line-height:50px;
display:block;
z-index:10;
}
#content1{
width:70%;
height:1200px;
margin:0px auto;
background-color:#FFFF66;
position:relative;
top:50px;
z-index:9;
}
#content2{
width:50px;
height:250px;
margin:0px auto;
background-color:#F60;
postition:absolute;
left:50px;
top:50px;
}
Hope that helps.
"Content" is relative to the window, not the grey square.
Did you try to make that grey square position:relative?
Without the HTML and the CSS, it's really hard to know the real cause.
.categories li{
position:relative;
z-index:-1;
list-style: none;
float:left;
width:310px;
height:310px;
color:white;
background:#77647F;
margin-right:10px;
}
check this fiddle :)HERE
I have changed the z-index to -1 to make it work.