I know this has probably been asked a million times, but how do I center a div that has absolute positioning.
I have tried this and it does not center it.
You can view the site here password:springy88
#logo{ position:absolute; width:243px; left: 50%; margin-left: 121.5px; }
Centering a div is very easy of you know the width and height of the Div.
Assuming that your div has 100width and 100 Height
div {
position:absolute;
left:50%;
top;50%;
margin-left:-50px;
margin-top:-50px;
}
if you are not sure about the dimentions , then probably you can go for a jquery method.
You need to use negative margins - margin-left:-121px. That will center the logo. After that you'll need to properly position your nav...
You could set the % value half of 50%, ie: left: 25% or right: 25%; Providing the wrapper is twice the width of the element.
Test Here..
Related
this is more of a mathematical question than a programming question, but here goes:
I have a container div that is 100% wide.
Within, I have two floated divs. The left div is 66% wide and floated left. The right div is 30% and floated right.
I have an h2 element within the left hand div and I'd like it to extend beyond the constraints of its parent and extend to the far right edge of its parent.
What is the formula to figure out the percentage width of the h2 element, if its parent is 66% of the top container.
I currently, through trial and error, have it set to 151.5%, but I hate that it's just an eyeballed guess. I'd really like to know how you would figure out the correct percentage.
Since it is a responsive design, I can't use a fixed dimension, it has to be percentage.
You can more easily place your <h2> in an absolute position like so
h2 {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
and then add position: relative; to your left column. But this will work well if you only have one tag in that column. Otherwise you'll need either to do some more math when you're trying to place other <h2> elements or use javascript to calculate the width of the bigger container
Never mind, figured it out. 100% (container width) divided by width of left div (66%) = 151.515152
My mistake was rounding my css percentages to 66% instead of 66.66666667%.
Thanks for all the help
If I understand correctly this is the solution to your problem: http://jsfiddle.net/pgJeC/1/
NOTE: Colors are set only to show the layering
.id1 {
width:66%;
float:left;
background:maroon;
}
.id2 {
width:30%;
float:right;
background: green;
}
h3 {
color:red;
width:100%;
white-space: nowrap;
display:block;
}
I'm trying to break out of a parent div so I can have a colour div cover the width of the browser.
However, for some reason it pushes the block off to the left.
This is my site.
This is my code:
HTML:
<div class="aboutTop"></div>
CSS:
.aboutTop{
width: 100%;
height: 600px;
background-color: black;
margin-left: -100%;
margin-right: -100%;
}
Where am I going wrong?
To make your div "break out" of its parent, you'll have to use position: relative;
HTML:
<div class="aboutTop">
<div>break out!</div>
</div>
CSS:
div
{
width: 100px;
height: 100px;
border: 1px solid #000;
}
.aboutTop div
{
position: relative;
top: 50px;
left: 50px;
}
This is because child elements are restricted to the boundaries of their parents. USing positioning takes the element out of the document flow. Using relative positioning takes it out of the flow but uses its original position within the parent as the point of reference. Absolute uses the top left corner of the browser window as its reference. :)
http://jsfiddle.net/qkU7F/
The width will always reference the parent div, no matter what. So you can use jQuery to set the width of the element based on the window width.
var winWidth = window.innerWidth;
$('.aboutTop div').css("width", winWidth);
http://jsfiddle.net/qkU7F/3/
In this:
margin-left: -100%;
margin-right: -100%;
The percentages are relative to the parent element.
So if the parent element is 200px wide 100% will be 200px.
If you want something to span the width of the browser you have a couple of options:
Use absolute position and left:0; right:0;
make the element a direct child of the body element and set it's width to 100%
.aboutTop{
position:fixed;
width: 100%;
height: 600px;
background-color: black;
margin-left: -100%;
margin-right: -100%;
}
When you give a width:100% without positioning, it will take 100% with respect to parent division. You need to make it fixed, or you need to change the width of the parent division.
The code you write, must from start be aimed at what you want to achieve. For something like this, you should not have a parent division with less width.
If yo use relative positioning, or absolute with negative margin the width will still be 100% of parent division. You will have to increse width to something like 110% to achieve.
I think it's better to remove padding of your div #site. let it to have full width of browser.
then apply padding to children divs as you want.
You're setting width: 100% but also margin-left: -100%. This means that the element will span from -100% to 0.
Since you're also setting margin-right: -100% it looks like you want it to span from -100% to +200%, which means you need to set width: 300% instead.
Tried to make a floating div, with a -1 z-index to be in the background all the time, but when I make it's position absolute, then it disappears. Also want to place it in the middle with y-repeat image.
.perchament{
position:absolute;
margin:0 auto;
height:100%;
background: url("image_assets/parchment.png") repeat-y;
margin-top:25px;
z-index:-1;
}
It disappears because there is no content in it and no width specified.
Add this to your CSS:
left: 50%;
width: 100px;
margin-left: -50px;
The width needs to be set and the left margin is always half of that.
DEMO
As others have said, why not just do a background image on the body?
body {
background: url("image_assets/parchment.png") center repeat-y;
}
In this particular case, you'll need to add a width to your div (since it's absolutely positioned).
However, what's wrong with a background rule on the body element or something similar?
Absolutely positioning elements should us "top" and other such positioning controls instead of margin etc and set a width and height.
.perchament{
position:absolute;
top: 0;
left: 0;
width: 500px;
margin:0 auto;
height:100%;
background: url("image_assets/parchment.png") repeat-y;
margin-top:25px;
z-index:-1;
}
Does that help?
I'd also avoid using a minus z-index. Instead, you could set this item to z-index: 1 and then set the container above it (with everything else inside) to z-index: 2.
OR, if it's just a background image you want, you could simply put that onto the BODY tag of the document instead of a div. The BODY or HTML element is always the bottom of the stack.
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%;
}
putting image always in center page(E.x image loading for ajax call), even when move scroll. how is it?
For most browsers, you can use position:fixed
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
If the image was, for instance, 40x30 pixels, you'd set margin-left:-20px; margin-top:-15px instead.
Here's a jsfiddle example: http://jsfiddle.net/WnSnj/1/
Please note that position:fixed doesn't work exactly the same in all browsers (though it's ok in all the modern ones). See: http://www.quirksmode.org/css/position.html
<style>
.CenterScreen{
position:fixed;
/*element can move on the screen (only screen, not page)*/
left:50%;top:50%;
/*set the top left corner of the element on the center of the screen*/
transform:translate(-50%,-50%);}
/*reposition element center with screen center*/
z-index:10000;
/*actually, this number is the count of the elements of page plus 1 :)*/
/*if you need that holds the element top of the others. */
</style>
If you add this class your element, it will be always center of the screen.
For example:
Hello world
This might help you : http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/
Put the image in a div tag with some class name (centeredImage) and use the following css
div.centeredImage {
margin: 0px auto;
position: fixed;
top: 100px;//whatever you want to set top;
}