On a website that I have been working on (www.koa-de.nl) I used the following code to center the navigation bar:
left: 50%;
transform: translateX(-50%);
I used this because margin-left: auto + margin-right: auto put the element slightly off-center.
Now I've noticed this doesn't work in older browsers and pushes the menu partly out of screen (due to left: 50%)
How can I work around this? Can I add some code to make sure the navigation is centered on all browsers?
Thanks for your help!
Doesn't even look like you need the translate and left property.
Try this:
.navibar {
background-color: #ffffff;
width: 65%;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-style: none solid solid solid;
border-width: 0 2px 2px 2px;
border-color: #CF1B19;
margin: 0 auto;
}
The reason why this works is because you already have position: fixed on the .navbar-fixed-top class, along with a left: 0 and right: 0.
All you need to do next is set a margin: 0 auto to center the nav.
Using this the nav looked perfectly centered to me.
Say I want to simulate 2 different layers of objects, over a background. Objects on the first level should have a large shadow, and objects on the second layer should have a smaller shadow.
Now, what if an objects on the front layer is overlapping an object on the second layer? Then it should have a large shadow on the background, but a smaller shadow on the second layer object.
Here's an example of what I'm looking for:
Can this effect be achieved with CSS? Even SVG filters, or something like that maybe? Any ideas?
you may use a pseudo to increase part of a shadow:
div {
height: 150px;
padding-top: 50px;
margin: 3em;
width: 300px;
box-shadow: 2px 2px 5px;
}
p {
margin: 2em;
position: relative;
box-shadow: 2px 2px 5px;
height: 50px;
width: 500px;
background: white;
}
p:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 265px;/* offset value to mind */
box-shadow: 5px 5px 5px #333;
pointer-events:none; /* takes it off the way, else negative z-index might do also */
}
<div>
<p>
</p>
</div>
size, margin and padding for demo purpose, use real content :)
Before posting this question, I have looked into various stack overflow questions and implemented them but it didn't work for me.
Please do not post this question as duplicate.
My problem is that my dropdown is not coming on top of other elements.
I have posted the code in jsfiddle
NOTE: Please drag the output window towards the left to get the proper view of the header
In the SCSS window, user profile dropdown is handled by class navbarDropdown
.navbarDropdown {
float: right;
padding: 0px 10px;
position: relative;
img {
margin-top: -5px;
height: 40px;
}
ul {
background-color: $base-secondary-color;
padding: 4px 0;
position: absolute;
z-index: 999;
top: 30px;
left: 0;
width: auto;
border: none;
border-radius: 1px;
}
ul a {
height: 30px;
padding: 0 40px 0 10px;
display: block;
}
}
I have tried position:absoulute and z-index.
I don't know where is the mistake. Any help is appreciated?
By the looks of it, the reason your drop down list is hidden is because it overflows the content of the nav element, ".navbar". Adding the CSS property overflow: visible; should fix the immediate problem.
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'm absolutely positioning elements inside floating divs. The last absolutely positioned elements sticks to the top of the div in chrome until we resize the window (see here)
Things I tried so far:
Putting a container inside the floating element
Overflow: hidden/auto to the floats, elements and container
This only happens in chrome. Any idea why/what is happening?
Only small thing you have to do and everything else is great. Use this
.schedule-course-slot-wrapper {
position: absolute; /*Important*/
border: thin solid;
border-radius: 3px;
margin: 0 2px;
padding: 0 3px;
height: 100%;
}
instead
.schedule-course-slot-wrapper {
position: relative; /*Important*/
border: thin solid;
border-radius: 3px;
margin: 0 2px;
padding: 0 3px;
height: 100%;
}
You have to use
pop.style.left = l+"px";
pop.style.top = t+"px";
instead of
pop.style.posLeft = l;
pop.style.posTop = t;
or both.