The header position of my website is always aligning to the left side in IE.
But it should be in the middle, in Chrome and Firefox its working without problems.
May i ask for your expertice for this?
Homepage:
CSS Code:
.header {
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
Please try this code for proper solution.
For header class you need to add below CSS
.header {
width: 100%;
}
and for navigation part, you need to update left side margin with below CSS.
.nav .ul .li {
margin-left: 32px;
}
By margin auto and max-width fixed no need to give left and right .It will automatically placed in the center of the page.
So just remove left and right
.header {
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
Sorry for title butchering, but I must admit I have no clue if there are better terms to describe what I'm trying to achieve. Instead I've included an image (they tend to say a thousand words)
What I'm trying to create is the cyan box. I hope the image kind of explains the idea.
SOLVED
Per Kees van Lierop answer I ended up doing the following:
&__label {
#include span-columns(6);
margin-top: 4rem;
background-color: rgba($color-secondary, 0.5);
color: white;
padding: $base-padding;
position: relative;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 100%;
width: 9999px;
height: 100%;
background-color: inherit;
}
}
Giving me a nice result:
You can add a :before pseudo-element which is positioned left to the box, and with the cyan background:
.cyan-box {
position: relative;
&:before {
position: absolute;
top: 0;
right: 100%;
width: 10000000px; // a large amount, long enough to reach the edge
height: 100%;
content: '';
display: block;
background: cyan;
}
}
I'have 3 div blocks and I would like to place them as in the picture.
It works with the following CSS code, but when I resizes my browser, the blocks aren't exactly at the same position (you can see it at the 2 pictures with comments).
Do you have an idea ? Maybe an other position (absolute or other ?).
PS : I use relative position because I use JqueryUI (draggable, resizable) to create blocks and to position them.
Thanks.
Here is the CSS code :
#corps {
background: black;
}
#bloc {
width: 40%;
background: blue;
position: relative;
top: 50px;
}
#bloc2 {
width: 40%;
background: lime;
position: relative;
top: 100px;
left: 2%;
}
#bloc3 {
width: 45%;
background: purple;
position: relative;
top: -300px;
left: 50%;
}
The problem here is the relative positioning. It's going to cause the elements to be positioned relative to the parent container #corps. If you don't plan on editing that with jQuery in any other way, it's not going to behave like you're describing you'd like it to.
Here's a jsfiddle that iterates the best way to accomplish what you're looking for with css using inline-block display and vertical alignment: https://jsfiddle.net/4gw22vrh/
#corps {
background: black;
}
#bloc {
width: 40%;
background: blue;
display:inline-block;
}
#bloc2 {
width: 40%;
background: lime;
}
#bloc3 {
width: 45%;
background: purple;
display:inline-block;
vertical-align:top;
}
First time really using the pseudo :after selector. Not sure if the problem I'm running into is a limitation of it or I'm just missing something obvious.
Here's my live code.
li.current:after {
border-width: 1px 1px 0 0;
content: ' ';
background: #256f9e;
display: block;
height: 13px;
position: absolute;
width: 10px;
top: 6;
margin:0px auto;
z-index: 99;
transform: rotate(-224deg);
-webkit-transform: rotate(-224deg);
-moz-transform: rotate(-224deg);
-ms-transform: rotate(-224deg);
-o-transform: rotate(-224deg);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
text-align: center;
float: center;
}
I've created a little triangle (Or rather a box that has been rotated to look like a triangle). I want it centered within the <li></li> but can't figure it out using my normal methods.
The things that have failed (in no particular order):
text-align: center;
float: center;
margin: 0 auto;
margin-right: 0;
margin-left: 0;
What am I missing? I doubt it matters, but I'm using AngularJS. Thought I'd mention it in case there is a known conflict between Angular & Pseudo selectors (which I doubt).
Thanks.
The issue is your use of absolute positioning & the method you're using to try and center it. If you position an element absolutely, the ol' margin: 0 auto; method won't work to center the thing. I point you to an explanation as to why this is at the end of the question, but in case you just want this to work let's get to the solution first.
Here's some working code. View it on JSFiddle
#tool-menu li {
...
position: relative;
}
li.current:after {
...
position: absolute;
width: 10px;
top: 6;
left: 50%;
margin-left: -5px;
}
Let's break down what's going on here.
Setting up a new Containing Block
In your original Fiddle, the pseudoelement is positioned absolutely relative to the viewport. An example might be the best way to show what this means, and why we don't want this. Consider setting it to top: 0. This would keep it latched to the top of the browser window (or, in this case, the JSFiddle frame), rather than the parent (the li). So, if our menu happened to be at the bottom of the page, or even moving around, the pseudoelement would be floating independent from it, stuck to the top of the page.
This is the default behavior of an absolutely positioned element when you don't explicitly set the position on any parent elements. What we want is to have its position defined relative to the parent. If we do this then the pseudoelement sticks with the parent, no matter where it happens to be.
To make this happen, you need to set the parent, #tool-menu li, to be explicitly positioned (which means setting it to be anything other than position: static). If you choose to use position: relative;, it won't change the computed location of the parent on the page, and does the thing we want. So that's why I used that one.
In technical terms, what we're doing here is creating a new containing block for the child.
Positioning the Pseudoelement
Now that our absolute positioning will be determined in relation to the parent, we can take advantage of the fact that we can use percentages to define where to place the child. In this case, you want it centered, so I set it be left: 50%.
If you do just this, though, you'll see that this lines up the left edge of the pseudoelement at 50%. This isn't what we want – we want the center of the pseudoelement to be at the middle. And that's why I added the negative margin-left. This scoots it over a bit to line the middle up with the center of the parent.
And once we do that, it's centered! Brilliance!
Why didn't my margin: auto; work?
The auto value of a margin is calculated from a fairly complex algorithm. At times, it computes to 0. I know from experience that this is one such instance of that happening, though I haven't yet traced my way through the algorithm to see exactly why. If you'd like to run through it, take a look at the spec most browsers have most likely implemented.
Using calc to center
You can also use the calc function in css to center the pseudo element.
Note: This isn't supported in IE8 and below (caniuse) but you can provide a fallback for older browsers.
View it on this code pen. I'm also using MarkP's css border method to draw the triangle.
li.current:after {
content: '';
display: block;
height: 0;
position: absolute;
width: 0;
overflow: hidden;
bottom: -5px;
left: calc(50% - 5px);
z-index: 2;
border-top: 5px #256f9e solid;
border-left: 5px transparent solid;
border-right: 5px transparent solid;
}
Wouldn't be better to just define the width as a percentage, make it a block element and text-align it in the center?
"float: center;" is invalid, and won't work. Mixing floated and absolute positioned elements are a sure way to get trouble with your layout as they don't really work that well togheter.
Try something like this:
li.current:after {
content: 'YOUR CONTENT';
display: block;
width: 100%;
text-align: center; }
Using margin:auto to center
As long as the element has a width declared you can use the absolute centering method.
To use this method the right and left properties must be set to 0 for margin: auto to be effective.
This method can be expanded to implement horizontal centering as well.
see link for full info:
http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
li.current:after {
content: "";
position: absolute;
display: block;
right: 0;
bottom: -5px;
left: 0;
margin: auto;
border-width: 5px;
border-style: solid;
border-color: transparent;
border-top-color: #256f9e;
width: 200px;
height: 200px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
<div>
<ul>
<li class="current"></li>
</ul>
</div>
Not directly related (have already voted up jmeas) but you may also find it easier to use the CSS border trick to make the triangle. e.g.
li.current:after {
content: '';
display: block;
height: 0;
position: absolute;
width: 0;
overflow:hidden;
bottom: 0;
left: 50%;
margin: 0 0 -5px -5px;
z-index: 99;
border-top: 5px #256f9e solid;
border-left: 5px transparent solid;
border-right: 5px transparent solid;
}
Similar tactics as to what jmeas has suggested with regards to the vertical positioning. We align to the bottom and then use a negative margin-bottom to push this out to the desired location.
With transform: translate() centering can be accomplished without a fixed size. This is because translate(<x>%) will use the (psuedo-)element's own size, while left and margin-left will use the container's size. By using these together we can therefore find the exact center-point.
tl;dr
To center vertically:
.container {
position: relative;
}
.container:after {
top: 50%;
transform: translateY(-50%);
}
To center horizontally:
.container {
position: relative;
}
.container:after {
left: 50%;
transform: translateX(-50%);
}
Full example
.container {
position: relative;
display: inline-block;
background: #4aa;
color: white;
padding: .5ex 1ex;
}
.container:after {
content: ":after";
position: absolute;
background: #a4a;
color: white;
padding: .5ex 1ex;
/* position below container */
top: 100%;
/* move right by 50% of containers width */
left: 50%;
/* move left by 50% of own width */
transform: translateX(-50%);
}
<p class="container">
Container with content
</p>
This may be the simplest way to do it:
.child_class::after{
position: absolute;
content: 'YourContentHere';
width: 100%;
text-align: center;
top: 50%;
}
the simplest way to do this -
With pesudo element :after or :before use display: inline-block;
Try something like this:
content: url(../images/no-result.png);
display: inline-block;
width: 100%;
text-align: center;
Using display: grid to center ::before
...worked nice for me. I'm using fa-Icons on this page and centered them within an element with 50% border-radius:
i {
font-size: 0.9rem;
border: 1px solid white;
border-radius: 50%;
width: 30px;
aspect-ratio: 1;
margin-inline: 5px;
}
i::before {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
This tutorial can help you to make center CSS pseudo-elements.
https://techidem.com/centering-pseudo-before-after-elements-content/
h2 {
text-align: center;
color: #181818;
padding-bottom: 20px;
margin-bottom: 35px;
border-bottom: 1px solid #eaeaea;
position: relative;
}
h2::after {
content: "";
width: 70px;
height: 4px;
background-color: #ff0000;
left: calc( 100% - ( 50% + 35px ) );
position: absolute;
display: block;
bottom: 0;
}
<h2>Most Recent Posts</h2>
You may use container queries with grid layout
element {
container-type: size;
&::after {
content: '';
position: absolute;
width: 100cqw;
height: 100cqh;
display: grid;
place-items: center;
}
}
Container queries: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
I personally don't really like the idea to change position attribute or do some margin manipulation. I think the easiest way is two lines of CSS:
.element::after {
/* your css */
line-height: initial;
vertical-align: initial;
}
And there is no need to touch the parent.
My site, http://hivechatter.com/, is super sexy for Firefox, Chrome, IE8, you name it:
But then along comes IE7, who mauls her divs so bad that they nearly run off the screen! And for whatever reason the content within the divs is centered. What the heck is going on here? It seems to be something to do with the way IE7 interprets the left: percentage margins, but I can't figure it out.
For convenience and posterity's sake, below are the relevant portions of my css, with text formatting and other nonsense removed. #container is the overall page container, #blue_box is the main content box, #left and #right are the columns in the blue box, #divider is the white line that separates them, #links is the light blue nav hovering below #blue_box.
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: no-repeat #222933;
overflow: hidden;
}
#container {
position: relative;
left: 34%;
top: 10%;
width: 50%;
min-width: 450px;
max-width: 700px;
overflow: auto;
padding: 0;
}
#blue_box {
position: relative; /* so that divider has appropriate height */
width: 94%;
padding: 3%;
overflow: auto; /*needed so that div stretches with child divs*/
}
#left {
position: relative;
float: left;
width: 44%;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
}
#divider{
position:absolute;
left:49%;
top:6%;
bottom:6%;
border-left:1px solid white;
}
#links {
float: right;
width: 16em;
overflow: auto;
}
Change your position from relative to absolute for the container CSS.
Your problem is your image is just there with the container coming after it with a relative positioning.
IE7 is centering your container because you've set your body to text-align:center, then you're setting your container left:34%. IE is just adding those together for some reason. This is probably why your stuff is being centered in IE. You could do a conditional stylesheet for IE7 and remove the text-align.
Can't test at the moment if this will solve the issue but using margins on the blue box to position it instead of position: relative usually makes things a lot easier in the dark world of ancient Internet Explorers.