I am attempting to create a top and bottom margin for a div and when I specify only the bottom margin it works correctly:
#RightBar{
display: block;
position: fixed;
height: 100%;
width: 25px;
bottom: 150px;
right: 0px;
background: Aqua;
}
<div id="RightBar"></div>
However when I add the top margin, the bottom margin all of a sudden doesn't work at all - it's almost as if it no longer reads it:
#RightBar{
display: block;
position: fixed;
height: 100%;
width: 25px;
bottom: 150px;
top: 25px;
right: 0px;
background: Aqua;
}
<div id="RightBar"></div>
Any ideas on what may be causing this?
It's because you also have a height declaration of 100%, which can't fit between your 25px top and your 150px bottom. A conflict results in one of the rules being ignored, usually the oldest one.
Remove the height to fix this. You don't need it now that the height can automatically be calculated from the top and bottom:
#RightBar{
display: block;
position: fixed;
width: 25px;
top: 25px;
bottom: 150px;
right: 0px;
background: Aqua;
}
<div id="RightBar"></div>
Related
I have a CSS problem with a couple of parts. The first part is that I need an absolute positioned :after element to be visible above a fixed position element. The second part is that I need to be able to have a modal as a child of that fixed element that will cover the whole screen. Here's a simplified version of my app.
HTML
<body>
<div class='header'></div>
<div class='nav'></div>
<div class='content'>
<div class='modal'></div>
</div>
<div class='footer'></div>
</body>
CSS
.header {
position: fixed;
height: 50px;
width: 100%;
}
.nav {
position: fixed;
top: 50px;
height: calc(100vh - 100px);
width: 100px;
z-index: 1;
}
.nav:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 100%;
margin: auto;
height: 0;
border-left: solid 10px black;
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;
}
.content {
position: fixed;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
A codepen: https://codepen.io/winterblack/pen/ypBOqz
I can either have a z-index: -1 on my content element, or a z-index: 1 on my nav element. Either way, it gets in the way of the modal, which must have the content element a its parent.
The best solution I can think of right now is to use z-index: -1 on the content element, and remove it when the modal is opened. That will have the strange effect of having the absolute element disappear while the modal is opened...not too big of a deal probably, but not ideal. Any other ideas?
If you changed the position of content to relative, would that be an ok compromise for what you're trying?
.content {
position: relative;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
background: aquamarine;
}
I would like to create a following shaped notice bar on the bottom of my webpage (sticky).
Here is my HTML
<div class="notice-container">
<div class="wave"></div>
<div>
<p>Content here</p>
</div>
</div>
And here is my CSS, I tried several things, but here is the latest:
.notice-container {
display: block;
height: auto;
background-color: #ccc;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.wave:after {
content: "";
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: auto;
}
Since the container has a position: fixed, how can I get the repeat-x work on the wave? I would like to display the background-image on top of the container div.
Your pseudo element needs display: block; and also a specified height attribute. Since the value auto would just tell it to extend to fit its contents (and it has none), then the height value would remain 0.
.wave:after {
content: "";
display: block; /* <- Add this */
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: 60px; /* Or whatever your wave.png requires */
}
Place your url and justice the sizes of image in background-size. Also do not forget to change needed height of pseudo element which is also needs to configure margin-top and top
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
footer {
width: 100%;
height: 70px;
border: 5px solid red;
border-top: 0;
margin-top: 20px;
position: relative;
}
footer:after {
width: 100%;
display: block;
content: '';
height: 20px;
position: absolute;
left: 0;
top:-20px;
background-image: url(https://i.stack.imgur.com/z4HMY.png);
background-size: 10% 20px;
}
<footer></footer>
This is driving me nuts.
The situation is as follows.
I have 1 wrapper div that needs to span the entire width / height of the screen.
I need 1 div that is positioned on the right hand of the screen and has a fixed width (eg. 100px;).
Then the other div needs to span the remaining left half of the screen (no further !).
Note: I don't want to float the elements, I really need the divs to span the entire height of the screen, because a Google Map will be loaded into the div.
I am aware of the calc function in css, but I don't want to use it, because IE8 doesn't support it.
http://jsfiddle.net/gze4vcd2/
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
#wrapper{
position: relative;
width: 100%;
height: 100%;
background: greenyellow;
}
#left{
position: absolute;
left: 0;
width: auto;
background: blue;
}
#right{
position: absolute;
right: 0;
height: 100%;
width: 200px;
background: yellow;
}
This doesn't work at all.
I have tried all sorts of things, but I just can't get it to work.
Have you tried to use position: fixed for your #Wrapper
#wrapper{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: greenyellow;
}
#left{
background: red;
position: fixed;
left: 0;
top: 0;
height: 100%;
right: 100px;
}
#right{
background: blue;
position: fixed;
width: 100px;
top: 0;
height: 100%;
right: 0px;
bottom: 0px
}
Above is the updated code that works for me
My problem is having a fixed navigation at the top of the page and setting the rest of the document to margin: 0 auto; so that when the page is expanded, everything stays in the center. Is there a way to have the fixed header stay fixed at the center of the page when the page expands and contracts as well as it moving up and down as the page scrolls or no?
.container {
max-width: 1200px;
height: 1200px;
position: relative;
border: 0px;
text-align: center;
left: 30px;
}
.header {
width: 1200px;
height: 140px;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
left: 50%;
top: 0px;
z-index: 1;
}
Your nav has a fixed width? Your HTML/CSS code would be wishfull.
But having to guess, I think this might help:
.header {
position: fixed;
width: 400px;
left: 50%;
margin-left: -200px; /* 50% of the elements width */
}
.content {
width: 400px;
margin: 0 auto;
}
Demo.
I'm building a menu with 100% width - and I'm trying to position one button on the left side and one on the right side.
This is what I have, however as you can see the button is not placed 8px from the right.
How would I go about it? Thanks!
#options-buttons {
height: 40px;
width: 100%;
}
.okay_button
{
position: relative;
top: 3px;
right: 8px;
background-image:url('http://i.imgur.com/RIIV8.png');
float: left;
display: block;
width: 68px;
height: 34px;
background-repeat: no-repeat;
outline: none;
}
.okay_button:hover
{
background-position: 0 -34px;
}
Use float right and right; jsFiddle
.okay_button
{
top: 3px;
right: 8px;
background-image:url('http://i.imgur.com/RIIV8.png');
float: right;
display: block;
width: 68px;
height: 34px;
background-repeat: no-repeat;
outline: none;
}
Working example (I replaced the background with text for demo purposes):
You are mixing float, display, and position incorrectly.
You simply need to change position: relative; to position: absolute; on your .okay_button, since that will force it to be relative to its container, not its otherwise normal position.
Working example: http://jsfiddle.net/zPkH8/3/
.okay_button
{
position: absolute;
...
}