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.
Related
I also look at this question IE renders inline-block div differently than FF/Chrome but this cannot help me.
This is the CSS code for my element (in html it's an invisible square link):
#box-scenario {
position: absolute;
margin-top: 43%;
margin-left: 37%;
background-color: rgba(255, 0, 0, 0);
width: 11%;
height: 21%;
display: inline-block; }
The invisible square link is about 200px higher than FF/Chrome positioning.
Here is a Fiddle for you too look at in each browser. I added a parent div with stripes and also added a red outline around the invisible link, so that we would have some reference points.
The invisible square link is about 200px higher than FF/Chrome positioning.
For me, across all the browsers, the link renders at 3.5 bars above the bottom. Where does it render for you?
#parent {
outline: thin solid black;
position: relative;
height: 180px;
width: 180px;
background: repeating-linear-gradient(to top, white, white 10px, yellow 10px, yellow 20px);
}
#box-scenario {
position: absolute;
margin-top: 43%;
margin-left: 37%;
background-color: rgba(255, 0, 0, 0);
width: 11%;
height: 21%;
display: inline-block;
outline: thin solid red;
}
<div id="parent">
<a id="box-scenario"></a>
</div>
Without seeing your entire markup and style sheets. I would suggest, if you haven't done it already, is to reset all padding and margin using:
* {
margin: 0;
padding: 0;
}
It removes all default margin and padding for every object on the page, regardless of the browser. This provides a nice clean slate for design and ensures that all spacing is intentional, explict, and ubiquitous across browsers. There is no reason not to do this.
You can always use -webkit-margin(s) (i.e., before, after, start, end). Same goes for -moz-margin.
I did try using position:fixed; (I saw another topic with similar problem)
Here is the page I am working on
The Problem: click on the "*Click to view acute conditions" which is under Same Day Appointments. This opens up a div that is position:fixed 50% top & left of the page but not when scrolled down.
Here is a Jfiddle (only the preview frame: http://jsfiddle.net/u5cXv/2/embedded/result/)
The Code: Below is the parent div
#ubookwhite_content {
Background-color:#fff;
display:none;
position: fixed;
outline:solid 10px #cccccc;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -400px;
width: 800px;
padding: 25px;
z-index:1002;
overflow: auto;
}
The Javascript is a simple open close function. Can you please help me understand why this doesn't position when scrolled down.
You are defining the styles for that element in two places. Here is the other one:
#ubookwhite_content {
Background-color: #fff;
display: none;
position: absolute;
border: solid 5px #cccccc;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -400px;
width: 800px;
padding: 25px;
z-index: 1002;
overflow: auto;
}
That second is after the first and uses position:absolute
The width of your #ubookwhite_content is 800px, but once the padding is added in, the actual element width is 850px. This is setting your element off by 50px when you use margin-left: 400px.
You can either make the width: 750px or make the offset margin-left: 425px. Either way takes into account the additional width of the padding: 25px.
http://jsfiddle.net/u5cXv/4/
Your website doesn't match what you copy and pasted onto the website. The position on the website isn't fixed: it's absolute, which is completely different. If your code says fixed, you may need to re-upload to your server.
This is apparently located on index: line 860.
I would also recommend using google's "inspect" command in order to investigate later issues.
Try removing the margins or playing around withit. Keep the position: absolute
margin-top: -150px;
I've used CSS border arrows quite regularly, but I don't know if what I want to achieve is possible with them, so I went another route and used pseudo elements instead. I know my solution relies on trigonometry but still don't know how to emplement it.
I need , regardless of the height of my .front div, to be able to maintain the 7PX width, thus, allowing for a flexible height with a fixed width:
.front{
height: 20px;
**width: 7px;**
background-color: darkred;
position: relative;
}
and that implies changing the transform angle in a mathematically controlled way:
.front:after{
content: " ";
height: 30px;
width: 15px;
background-color: lightgreen;
position: absolute;
top:0;
left: 0;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
Is there a simpler way to achieve this? Images are obviously out of the question, because pixellation...
JsFiddle here.
Here's your fiddle with a triangle in the top right corner made purely of CSS. I'm sure that animating it is just a matter of resizing the two border widths.
#top_rt_tri {
position:absolute; top:0px;right:0px;width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 60px 60px;
border-color: transparent transparent #007bff transparent;}
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.
I have a web page like this (codes). AS you can see, there is a content div . And a little div which fixed to page, and scrolling with it. I want to align it to content div's left. I t will be like this page. There is a small fixed box which containing social sharing buttons. It's aligned to contents left. I want to do like this.
Try this update of your fiddle. I think it does what you want, but there are much nicer solutions when the order of the two div's can be rearranged.
you need to modify your css for your sosyal-paylasim div to this (notice the last 2 elements):
#sosyal-paylasim {
background-color: #F3F6FE;
border-color: #A5B2D0 #DBE4F3 #DBE4F3;
border-style: solid;
border-width: 2px 1px 1px;
box-shadow: 0 2px 3px #E2E2E2;
min-height: 150px;
overflow: hidden;
position: fixed;
top: 200px;
width: 64px;
z-index: 100;
left: 50%;
margin-left: -490px;
}
Further explanation can be found here.
----------- EDIT TO MAKE DIV OUTSIDE CONTAINER ---------------
Per your comment, if you want it outside of the container, use this:
#sosyal-paylasim {
background-color: #F3F6FE;
border-color: #A5B2D0 #DBE4F3 #DBE4F3;
border-style: solid;
border-width: 2px 1px 1px;
box-shadow: 0 2px 3px #E2E2E2;
min-height: 150px;
overflow: hidden;
position: fixed;
top: 200px;
width: 64px;
z-index: 100;
left: 50%;
margin-left: -557px;
}
The trick is that you are centering the div with the left: 50%, and then pushing it back to the left by half the width of the main container (plus the width of the div(64px) plus both borders for the div(2px) plus the left border for the container (1px) to make it outside).