I am just trying to stick header to the top. I have set position to fixed and top:0px; and left:0px.
I have uploaded my code here.
Below is the CSS class for header:
header.header
{
background: #861912;
padding:5px 10px;
overflow: hidden;
height: 43px;
position: fixed;
width: 100%;
top: 0px;
left: 0px;
}
Please help me finding out what stopping my header to stick at top.
Just put the Navbar out of other divs and directly inside body and increase it's z-index, this way it will work fine.
The problem seems to be this line:
.container {
...
-webkit-transform: translateZ(0) translateX(0) rotateY(0deg);
}
(and, of cource, the variant without prefix too).
If I remove it via Developer Tools, everything works fine.
But I'd rather move that <header> completely outside the container.
This problem occur by transform css property. try it after remove transform from .container
Related
So I'm doing a course where I have to use the z-index to tuck an image behind the div below:
Here's what it is supposed to look like: example
And here is what Mine looks like, even after copying the exact same code, with some tweaks too after reading how other people in my similar situation managed to solve it My version.
Here is the code for the stuff I had to change for it to look like the example:
#features{
padding: 7% 15%;
background-color: white;
position: relative;
}
.iphone-img{
transform: rotate(25deg);
position: absolute;
}
Every time I tried to slightly tweak the up and bottom values, the image's positioning would change drastically. I managed to get the exact positioning I wanted when adjusting with google inspect element, but when actually adjusting in vsc I did not manage to get the same result
There is no z-index in your code.
You need to add it, such as:
.element-background {
position: relative;
}
.element-phone {
position: absolute;
z-index: 2;
bottom: 0;
left: 50%;
}
This code will position your phone image on top of the background, at the bottom and almost in the center.
I am fiddling around with making a parallax website, have been following the steps from Keith Clark to slowly get to know parallax. However, I stumble upon an issue that looks like a Firefox issue? On load, the first layer and the darkseagreen background layer are cut in half. If I change the translateZ property from -1px to 0, everything is loaded correctly but then the parallax effect isn't working anymore.
If I scroll down or adjust the size of my browser, the rest is visible, but I would like to have it visible on the initial load.
Link to codepen I'm using Firefox 80.0.
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 100vh 0;
width: 100%;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
background-color: darkseagreen;
width: 100%;
}
.title {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
}
In my case it was an inherited 'overflow: hidden' that clipped the content in FireFox unnecessarily.
Reading through the original docs I found:
One important rule to keep in mind when grouping elements is, we
cannot clip the content of a group. Setting overflow: hidden on a
parallax__group will break the parallax effect. Unclipped content will
result in descendant elements overflowing, so we need to be creative
with the z-index values of the groups to ensure content is correctly
revealed/hidden as the visitor scrolls through the document.
With this you have to deal with the z-index cleverly, which is kind of an issue in my approach, but I can handle it.
In particular by using intersection observers. Once a certain intersection is reached the z-index is flipped. This makes the entire code more complex, which is what I'm afraid of, but it seems to work.
Within my body tag I have a header and div#content element. My aim was to create a fixed header and then push the content of the content element out from under it using a margin-top attribute. However when I did this the header also moved down as though it were joined to the content. I fixed this by adding a position: absolute to the content. The trouble is I cant explain to myself why it worked. It just did. I am using Firefox on Ubuntu.
This is the header css:
header {
position: fixed;
top: 0px,
left: 0px;
margin: 0px;
background-color: #3F51B5;
font-family: sans-serif;
color: #FFFFFF;
width: 100%;
z-index: 1;
}
This is the content css:
#content {
position: absolute;
margin-top: 100px;
}
Here is the codepen.
Please educate me someone :)
Several observations:
position: absolute; didn't really fix it. Check out this codepen for a demonstration. Notice the fair amount of content I added after your divs and how they don't display correctly? This is because:
You had a typo on your first css element. Here's a codepen demonstrating a fix: http://codepen.io/anon/pen/YwvBJy You wrote , instead of ;. You didn't close the top: ; attribute so your browser tried to fix it by using the #content margin-top.
Bad syntax-- used a , instead of ; on line 3
header {
position: fixed;
top: 0px,
left: 0px;
so the attributes top and left are wrecked.
You used a comma instead of a semicolon here
head { top 0px }
Please replace the comma with smemicolon than you dont need position: absolute .
I'm working on this page and trying to get the slideshow to display correctly at tablet and mobile widths with media queries. However, all of the slider container elements are setting their height to 590px and this is creating a large gap beneath the slider and its content. I don't belive any of the elements have a fixed height set, but I have used some max-height:590px here and there. Any thoughts on how to get rid of that gap and force the containers to resize correctly?
Slider uses Cycle2.
Some HTML code
<div id="slider" class="cycle-slideshow" data-cycle-pager="#adv-custom-pager" data-cycle-slides="> div" data-cycle-timeout="7000">
<div class="singleSlide">
<!-- content goes in here -->
</div>
And some CSS that I think is important:
#homeslider {
height: auto;
}
#homeslider, #slider img {
width: 100%;
height: auto;
}
#homeslider {
width: 1090px;
margin: 0px auto;
max-height: 590px;
}
For reference, this slideshow is the expected behavior.
ETA: Added some of the code that I think is important?
In your .slidercaption you have a top:-200px which is causing the issue. Unlike margin, elements with position:relative won't physically move when you set a top or left style. That means the occupied space for that element will still remain on that position.
So to fix that, remove top: -200px and replace with margin-top: -200px instead.
From this:
.slidercaption {
position: relative;
top: -200px;
}
To this:
.slidercaption {
margin-top: -200px
}
Take note, in your css there's a margin:0 set in that element. Make sure your update will override that existing style.
Update:
A far better solution is to use position:absolute instead, since having a negative margin or position is more likely to get an issue with that huge value.
So...
From:
.slidercaption {
position: relative;
top: -200px;
}
To:
.slidercaption {
position: absolute;
bottom:0;
}
Then what was causing the below elements to go up is because of this:
#sliderNav {
margin-top: -190px;
}
Change that to:
#sliderNav {
position: absolute;
bottom: 168px;
z-index: 99;
width: 100%;
margin: 0;
}
When you came to a point where you are using large negative values, you can use position:absolute instead which is very helpful and less likely to have some issues if used properly.
I'm currently changing a PSD design to a HTML site. I've come into an issue however. I am unable to center a certain element. I've tried all the usual tricks.
http://lowhop.net/
See here the main blue header is out of line (not centered). I tried
#slider{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
Before, however it didn't work reliably. (Appeared only to work on my screen resolution/browser).
Thanks
You need to explicitly define a width on the element when using margin: 0 auto to center.
Block elements take up the full available viewport width unless you explicitly give them a width.
Since you explicitly set the width of the slider DIV, you can use another trick to center it:
#slider
{
z-index: 2;
background-image: url(../img/sliderbg_09_09.png);
position: absolute;
display: block;
width: 982px;
height: 251px;
left: 50%;
margin-left: -491px; /** half DIV width */
}
I'd probably steer away from having this as a position absolute DIV, doesn't look like it needs it but that's a quick and dirty centering :)
Hope that helps
If you must use absolute positioning, you can use something like my answer here.
Basically, you declare an explicit width for your element, then give it
left: 50%;
margin-left: -[your width/2];
like user showdev mentioned :
Does it need to be positioned absolutely? Does it even need to be centered? It looks like you've positioned div#navBar simply by adding margin-left: 85px. It seems that you could use that same method for div#slider.
you have
#navBar {
background-image: url("../img/navbg_07.png");
display: block;
height: 38px;
margin-left: 85px; /* attention on this */
margin-top: 31px;
position: relative;
width: 879px;
z-index: 1;
}
and this
#slider {
background-image: url("../img/sliderbg_09_09.png");
display: block;
height: 251px;
position: absolute;
width: 982px;
z-index: 2;
}
so, try 'margin-left: 85px;' your #slider.