I'm working on an overlay in CSS and ran into a cross browser issue. The overlay height should be 80% of the viewport and be centered vertically. (80% height on the element, -40% top margin, 50% from top positioned absolutely).
The fiddle below works in Chrome but not in Firefox.. the issue seems to be the percentage for margin-top. Make sure to resize your browser to see the full effect.
Fiddle: http://jsfiddle.net/DEn6r/1/
Thank you for helping!
Since you're using percentages for both top and margin-top, you can combine them, and simply use top: 10%.
See this demo: http://jsfiddle.net/jackwanders/DEn6r/3/
Also, if you'd like to drop the negative left margin, you can use this trick to center the div horizontally:
#inside {
position: absolute;
width: 300px;
height: 80%;
top: 10%;
left: 0;
right: 0; // set left and right to 0
margin: 0 auto; // set left and right margins to auto
background: white;
}
Related
I have a pop up window that is supposed to be position:fixed and draggable. The issue is that whenever the window pops up it uses a css transition so all of its properties are animated. I have tried to use left:50% transformX:(-50%) to horizontally center it but the pop up window jumps horizontally when it appears (as it animates the transform). I have also tried centering it with left:0 right:0 margin:0 auto; but the window also jumps out of position when you begin to drag. These issues are only present when the window first appears or it is dragged for the first time, after the first drag everything works as expected.
I pass in the following options to the draggable setter.
elem.draggable({ start: function() {
$(this).css({transform: "none", top: $(this).offset().top+"px", left:$(this).offset().left+"px"});
} });
This fiddle centers with margin:0 auto
here is a fiddle demonstrating my problem
this fiddle centers with left:50% transform:translateX(-50%);
second fiddle
Have you tried giving the modal a width then using margin:0 auto; Typical in order to centre an element you need to give the element a width.
.centeredElement {
margin: 0 auto;
width: 960px;
}
The problem is that margin: 0 auto relies on the fact that the element's left and right properties are set to 0. You are seeing the jump because jQuery UI manipulates the left positioning, and it is no longer 0 after dragging the element. The same applies to the transformX:(-50%) method. This will only center the element horizontally if left is set to 50%.
The workaround is to set left: 50%, and then add margin-left: -40px to displace the element's width (i.e., a negative left margin based on half of the width of the element; in this case -40px since the element has a fixed width of 80px).
Updated Example
.box {
border-radius: 5px;
padding: 10px 15px 10px 15px;
min-width: 30px;
width: 80px;
height: 80px;
left: 50%;
margin-left: -40px;
position: fixed;
/* ... */
}
I have this layout:
Code here: http://m6000225.ferozo.com/test/
I need the blue and brown image to lay below the main content div, and both be aligned regardless of the window width, both centered horizontally.
I implemented a css tip I read on this site, which is having a div with absolute position and left: 50% and an img inside with relative position and left: -50%.
It works fine, except for the fact that it pushes the page width to the right, as you can see in the screenshot, the scrollbar can be seen.
3rd party lib solutions like jQuery are welcome, but I'd prefer plain CSS.
PS: I also need something similar below the footer, but I guess using the same solution with a negative bottom value should work, right?
PS2: Extending the blue-brown strip to both borders of the window is no problem as I already used another div with absolute position and background-repeat: repeat-x.
The scroll bar is appearing because of the left: 50%; on the class .header-image. You should drop that altogether. Since that tag has a width set, when you push it over 50% it falls outside the window forcing the scroll bar to appear.
After you drop the left call, you should then set the width of that div to the width of the window, not a specific value in pixels. Use Width: 100%. So, that tag should look like:
.header-image {
height: 245px;
position: absolute;
top: 40px;
width: 100%;
z-index: -1;
}
After that, you'll need to re-center the image contained within the div. To do that, instead of using positions (which rely on set boundaries), give the element auto margins. Use :
.header-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
That will recenter the image. Please let me know if this is what you were looking for!
Per Paulie_D's suggestion:
.header-image {
position:absolute;
z-index: -1;
top: 40px;
width: 100%;
height: 245px;
background-image: url('header.png');
background-position: center;
background-repeat: no-repeat;
}
That did it.
To horizontally center an element, one sets width to x, left to 50% and margin-left to -x/2. This works perfectly with x = 50 % (see example below). Why does it not work for vertical centering? The example below does not work.
div.myDiv {
width: 50%;
height: 50%;
left: 50%;
top: 50%;
margin-left: -25%;
margin-top: -25%;
position: absolute;
border: 1px solid #555;
}
<div class="myDiv">I'm a div</div>
Tested in FF10 and IE8 with HTML 4.01 Transitional and only one div-tag in the body-section.
You don't have fixed width and height (fluid). So you can't make the div in center vertically just using the CSS you mentioned in your post. You need to go with javascript or jQuery to achieve that. I have done this before, so I am just linking it here. https://stackoverflow.com/a/15293191/1577396
As specified in W3C, the margin properties including margin-top and margin-bottom refers the width of the containing block (not the height), if set in percentages.
So, you can't align a fluid container vertically using margin-top and margin-bottom as the case in fixed dimension container.
Vertical centering can be done in css playing with display: table-cell or fiddling with line-height - just a starting point for you to play with
Try this:
div.myDiv {
margin: 0 auto;
}
auto will get you the horizontal centering you are looking for OR you can just set auto for the entire myDiv to get both vertical and horizontal centering.
div.myDiv {
margin:auto;
}
There are tons of articles about centering an absolutely positionned element, but all of them are for fixed dimensions and a fixed window.
However, the dimensions of the position:absolute element I want to center are variable (mxn-width) according to the size of the browser. I want my element to remain horizontally centered regardless of the size of the window and even when the user changes the window size.
Is that possible to achieve without JS ?
From what I understand of your problem, this could be solved by
# divId {
margin-left: auto;
margin-right: auto;
max-width: 300px;
}
You could do this:
#myDiv {
width:40px;
height:40px;
position:absolute;
top:50%;
left:50%;
}
Take in account though that the percentages will need to be adjusted based on the size of your div. If you have an element that is 400px wide and you use left 50% it won't be exactly in the middle because it calculates 50% from the left border of your div, not the center of the div.
By using percentages, a block element can be made to center, regardless of the size of the element or the browser window. This is accomplished by setting the element's upper left corner to the center of the screen using left:50%; and top:50%;, then offsetting that backwards 25% with margin:-25%;.
Height and width must also be set to 50%. Setting top and left (and/or bottom and right) pulls the block out of the normal flow and treats it much like position:fixed and position:absolute does. Thus, it is on a different z-index layer and will overlay the elements that are in the normal flow.
This CSS class applied to a <div>, makes it half the size of the browser window, both horizontally and vertically, and centers it. Since the <div> will not be in the normal flow, this works well for creating pure-CSS popups...
.blockCenter {
display: block;
height: 50%;
left: 50%;
margin: -25%;
top: 50%;
width: 50%;
}
Instead of being 50% wide and 50% tall, this class would make the element 50% wide and 90% tall. Notice how the top margin must always be negative one-half the height to keep it centered...
.blockCenterTall {
display: block;
height: 90%;
left: 50%;
margin: -45% -25%;
top: 50%;
width: 50%;
}
I have a footer div with 100% width. It's about 50px high, depending on its content.
Is it possible to give that #footer a background image that kind of overflows this div?
The image is about 800x600px, and I want it to be positioned in the left bottom corner of the footer. It should work sort of like a background image for my website, but I've already set a background image on my body. I need another image positioned at the bottom left corner of my website and the #footer div would be perfect for that.
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 30px 0 0;
background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
}
The image is set to the footer, however it doesn't overflow the div. Is it possible to make that happen?
overflow:visible doesn't do the job!
There is a very easy trick. Set padding of that div to a positive number and margin to negative
#wrapper {
background: url(xxx.jpeg);
padding-left: 10px;
margin-left: -10px;
}
I do not believe that you can make a background image overflow its div. Images placed in Image tags can overflow their parent div, but background images are limited by the div for which they are the background.
You can use a css3 psuedo element (:before and/or :after) as shown in this article
https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/
Good Luck...
No, you can't.
But as a solid workaround, I would suggest to classify that first div as position:relative and use div::before to create an underlying element containing your image. Classified as position:absolute you can move it anywhere relative to your initial div.
Don't forget to add content to that new element. Here's some example:
div {
position: relative;
}
div::before {
content: ""; /* empty but necessary */
position: absolute;
background: ...
}
Note: if you want it to be 'on top' of the parent div, use div::after instead.
Using background-size cover worked for me.
#footer {
background-color: #eee;
background-image: url(images/bodybgbottomleft.png);
background-repeat: no-repeat;
background-size: cover;
clear: both;
width: 100%;
margin: 0;
padding: 30px 0 0;
}
Obviously be aware of support issues, check Can I Use: http://caniuse.com/#search=background-size
Use trasform: scale(1.1) property to make bg image bigger, move it up with position: relative; top: -10px;
<div class="home-hero">
<div class="home-hero__img"></div>
</div>
.home-hero__img{
position:relative;
top:-10px;
transform: scale(1.1);
background: {
size: contain;
image: url('image.svg');
}
}
You mention already having a background image on body.
You could set that background image on html, and the new one on body. This will of course depend upon your layout, but you wouldn't need to use your footer for it.
Not really - the background image is bounded by the element it's applied to, and the overflow properties only apply to the content (i.e. markup) within an element.
You can add another div into your footer div and apply the background image to that, though, and have that overflow instead.
This could help.
It requires the footer height to be a fixed number. Basically, you have a div inside the footer div with it's normal content, with position: absolute, and then the image with position: relative, a negative z-index so it stays "below" everything, and a negative top value of the footer's height minus the image height (in my example, 50px - 600px = -550px). Tested in Chrome 8, FireFox 3.6 and IE 9.