EDIT: Tinkerbin example located in comments.
The issue I'm running into is with the fixed topbar going behind the slider (only one slide is in there now for testing). This is happening because the light green background used to outline the header is created using an :after pseudo-element on the .page-header class, like so (using SASS):
.page-header {
position: relative;
z-index: 0;
padding: 35px 0;
&:after {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
height: 400px;
border-bottom: 5px solid $white;
z-index: -1;
}
}
This places the pseudo-element behind the header, but sill leaves it in front of the slider. I've positioned the slider relatively to place it in front of the pseudo-element, but I can't figure out for the life of me how to adjust so the topbar is always on top. Here the code for the topbar:
.nav-cont {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
height: 40px;
z-index: 9999;
}
Feel free to take a look at the demo site and let me know if you have any ideas. I've been going through Chris Coyier's references along with some others and just can't seem to muster up a solution.
Thanks in advance for anyone who might be able to take a look into this!
I figured it out.
.nav-cont is a child of the header, and because of the weird z-index necessities of the background, it is getting pulled under the slideshow. z-index is relative, so with a high z-index the navigation could only be the highest thing in the header, which was all under the slideshow.
Moving .nav-cont out of the header and giving it a high z-index solves this problem. Also, strictly speaking, semantically the navigation belongs in a <nav> element.
Fixed example
Related
I have created a page that is some very simple text images and a video. I have then put this content into a div(div innver), this div(div innver) has a white background. This Div(div innver) is then inside another div(div outer). Div(div outer) has a back ground colour of blue. for some reason div(div innver)'s background colour does not go the entire length of the page.
This is a link to a page that allows you to see my problem.
http://cssdeck.com/labs/bhppooft
What i am wanting is the white background to be the entire height of the page, not just the top.
Your inner div is absolutely positioned and has a fixed height of 100%. This results in a white box of exactly the same height as the viewport.
Check this one
I removed your absolute position of the div, it was causing the issue.
For the explanation, like #Paul said below :
Your inner div is absolutely positioned and has a fixed height of
100%. This results in a white box of exactly the same height as the
viewport.
EDIT after your comment :
You want the white div to be stick to the top and the bottom, see this fiddle
body { margin: 0;}
p:last-child { margin-bottom: 0; }
Be careful about margin and padding of your elements. The fix I've made works in the present case but couldn't work if you add others elements after the last p tag.
Also, make sure to close tags you are opening and respects the order of these (I didn't correct all tags in the JSFiddle)
Finally, you can use CSS stylesheets to clarify your HTML code :)
Just Remove both
Position: absolute;
Height:100%;
from the inner div then your problem will solved.
Wrong code
----------------xxx ------------
background-color: white;
bottom: 0;
font-size: 20px;
height: 100%;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
text-align: justify;
top: 0;
width: 80%;
z-index: -1;
---------------- xxxx -------------
Right code
----------------xxx ------------
background-color: white;
bottom: 0;
font-size: 20px;
left: 0;
margin: 0 auto;
right: 0;
text-align: justify;
top: 0;
width: 80%;
z-index: -1;
---------------- xxxx -------------
A little popup told me I had a new Twitter follower in my browser. I clicked inspect element to poke around, and of course wasn't surprised that it was a fixed position element, but the CSS surprised me.
#spoonbill-outer {
position: fixed;
right: 0px;
bottom: 0px;
margin: 22px;
z-index: 10;
}
Is there a reason for using margins instead of right:22px, bottom:22px?
Interesting point to consider, I tried it both ways and essentially both approaches lead to the same result.
I would say both approaches are equivalent in the simplest example.
If you look at the CSS specification, the left/right offsets and the left/right margins and the width can be constrained depending on which values are specified or set to auto.
See: http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
However, I found it hard to imagine a case in which specifying offsets versus margins would make a difference (there might be an exotic case, but I can't think of it off the top of my head).
body {
margin: 0;
}
.popup {
background-color: yellow;
position: fixed;
right: 0;
bottom: 0;
margin: 40px;
}
.popup-alt {
background-color: lightblue;
position: fixed;
right: 40px;
bottom: 40px;
}
<div class="popup">Yellow Popup Element</div>
<div class="popup-alt">Blue Popup Element</div>
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
I have been trying to figure out how a pixel pattern overlay can be applied over a website section like in this site: http://www.tinkeringmonkey.com/ (over the background video image at top and image in bottom section)
I'm sure this is fairly straightforward, I just don't know what to google to try and find the css or whatever I need to implement it.
Thanks heaps for any replies!
David
If you inspect the website using your browser's developer tools you will see that they have simply included an empty div, scaled it to 100% width and height of it's container, positioned it absolutely, given it a higher z-index than the video container and used a tile-able background image to produce the diagonal lines you see. In this instance the class applied to the div is called mk-section-mask and the css applied to that class is...
.mk-section-mask {
background: url(../../images/video-mask.png) center center repeat;
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
}
where video-mask.png is a 4px square png with a diagonal line running through it... See here
Hope that helps
Dan
Here take a look at this fiddle
With pseudo element :after, you can add a repeated background and make its position:absolute with top-left-right-bottom to zero.
CSS
div {
width: 300px;
height: 300px;
display: block;
position: relative;
background: url(https://placekitten.com/g/300/300);
}
div:after {
content: "";
background: url(http://dev.bowdenweb.com/a/i/style/patterns/tileables/06/dot-grid-1.png) repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
opacity: 0.5;
}
In general, when you want to know how a certain effect or layout is achieved, try the web inspecting tools in your browser. I use Google Chrome to develop sites, it comes with a very complete tool set.
As for your specific question, there's several ways to attain this. If you want to apply this overlay to a non-void element, my approach would be using HTML pseudo-elements:
.overlay {
position: relative;
}
.overlay:after {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: url(path/to/your/transparent/overlay.png) repeat scroll 0 0;
}
Apply the class overlay to whatever <div> and you're good to go. There's a catch, though: elements inside the .overlay won't respond to mouse/touch events, because the overlay on top will get them first.
This site http://doomedfromdayonemerch.bigcartel.com/ is currently scrolling too much down the page, this is because the footer (hidden) is at the bottom of the page. Even when i move the footer with CSS the page still scrolls the same amount. would like it to ideally to only scroll down a little bit. I did have overflow-y:hidden on the body, and although this did work, it doesn't allow for smaller screens/zooming in, as you then cannot scroll at all. Any help would be great! :)
In your CSS code add
html{
height:100%
}
The problem isn't with footer.
The problem resides in your div id="navigation"
I did some questions related to sticking footer into bottom of page. Check them out, maybe will help you.
I know an answer has been selected but let me explain a little further. You have the navigation div positioned relative, instead of absolute. It looks like you were trying to use absolute positioning because I see z-index in the navigation css. To use absolute positioning the parent element needs to be set to position: relative; and the element you want to have absolute needs to be set to position: absolute;
add position relative to #wrap
#wrap {
width: 740px;
height: 700px;
margin: 0 auto;
padding: 5px;
text-align: left;
position: relative;
}
and change navigation to absolute
#navigation {
z-index: 99;
position: absolute;
top: 175px;
padding-top: 10px;
padding-right: 5px;
margin-right: 4px;
height: 442px;
background: rgba(228, 228, 228, 0);
clear: both;
border-bottom-right-radius: 10px;
right: 10px;
}