I have a site with an absolute positioned logo div on the top. It's parent is a relative div with 100% width.
I managed to get my position:absolute div where I want with next code:
css:
position:absolute;
top:0;
left:50%;
margin-left:-455px;
background:url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png');
width:206px;
height:99px;
z-index:999;
However I ran into problem: when the browser window width is less than the site width, the logo starts to move to the left side of screen.
My question:
How do I absolutely position my div related to the center of the site page, in other words I need my logo to be positiond X px away from the middle of the site...
The parent of the #headlogo element on your site is #wrapper and it is not relatively positioned.
You should therefore add
#wrapper{
position: relative;
}
Or put the #headlogo inside the #header element which is relatively positioned.
The reason that requires the above change (position: relative; in a wrapper element) is that absolute positioning will only function if the first parent element is NOT static (default). If it's anything other than static, it should function correctly!
You can do it easily with jQuery.
$(function()
{
var logo_width = width of your logo;
var window_width = $(window).width();
$('#id_of_your_logo').css('left', window_width / 2 - logo width / 2);
}
That should do fine :).
I took at the link of your site. One option is if you put your .headlogo inside the #header div instead (as below):
<div id="header">
<div class="headlogo"></div>
<!-- rest of the #header content here -->
</div>
...then change your css to:
position: absolute;
top: 0;
left: 0;
margin-left: 25px;
background: url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png');
width: 206px;
height: 99px;
z-index: 999;
Because your #header div as position:relative, any position:absolute div inside of it will be relative to it rather than the body. Therefore, when the window size reduces, it will still be relative to the header, not the body.
Related
I've got a div that sits inside another div and it's supposed to float above all of the other content in the div, and stick to the right of the div. To achieve this I had to set the div positioning to "Absolute" since when it is set to "Relative", it pushes all of the content to the side of it.
However, when positioning is set to Absolute, the div does not position correctly and sticks to the left side of the div instead of the right, causing usability problems. The div positions correctly when using Relative positioning, but not absolute.
I have tried setting the margin-left to the width of the div but the size of the div can change depending on the template the page is using. I have tried setting the margin-right property appropriately but the div moves when the browser is resized.
Expected result: http://puu.sh/479u1.png (this uses margin-right to position it but this was done to show simpily what was expected to happen - this cannot be used due to the unexpected movements caused when the browser is resized)
Actual result: http://puu.sh/479ya.png
CSS code for the floating div:
.GBDragBoxOptions
{
position: absolute;
z-index: 99;
float: right;
width: 400px;
}
If you want to position the div to the right, then just use "right: 0px;" or something like that, in conjunction with "position: absolute;". As long as the parent div is positioned in some way (i.e. relative), that should do what you want.
Float does nothing on absolute positioned elements..
Use right: 0; instead of float: right;
It's a absolute div, so why float, use top and right
.GBDragBoxOptions
{
position: absolute;
z-index: 99;
width: 400px;
top:100px;
right: 50px;
}
See this Fiddle, how can I center the blue div without fixed width and height in the parent and child?
This is to post in SO
<div class="parent">
<div class="child">
</div>
</div>
Update
These are positioned elements, I want child at the center of the screen.
Update 2
See it centered here, but I can't use fixed widths nor heights in parent neither children. I need positioned elements because I need them to be over other elements.
To center a div, you simply have to add this attribute:
margin-left: auto;
margin-right: auto;
or a more condensed version (assuming 0px for the top and bottom margin):
margin: 0px auto;
This assumes that you have some sort of width value on that element you want to center, whether fixed or a percentage. You shouldn't need anything in the parent to dictate the child's margins.
margin-top: -50%; /* why this takes the width of the parent ???? */
It's because your parent div has position: fixed and your child div has position: absolute and since absolute position element is positioned relative to the first parent element that has a position other than static.
So your child div will take a margin top and margin left with a value equal to -50% of your parent width which is -50% * 150 = 75px
Try this it's display in center of width.
<div class="parent">
<div class="child">
</div>
</div>
<style type="text/css">
.parent{
}
.child{
background: none repeat scroll 0 0 lightblue;
height: 50px;
margin: 0 auto;
width: 150px;
}
</style>
I think this could solve your problem, but this needs JQuery[.width()].
.parent{
position: fixed;
/* I can't use static width nor height, TO DELETE(try changing this)*/
width: 500px;
height: 400px;
background: red;
}
.child{
display: inline-block;
position: absolute;
/*Simulate width and height, these are actually calculated by content*/
width: 100px;
height:50px;
background: lightblue;
}
JQuery onLoad:[JSFiddle]
$(function changePostion() {
var s = $(".parent").width();
var e = $(".child").width();
var d= (s-e)/2;
$(".child").css({"left":d});
var sh = $(".parent").height();
var eh = $(".child").height();
var dh= (sh-eh)/2;
$(".child").css({"top":dh});
});
This article is a best tutorial for positioning html attribute in center. There might be a better way to do without using JQuery.
Dynamic modals can be the biggest pains in the world. You need JS to change the heights and widths. Can you use a plugin? If so here are some good options. Twitter bootstrap has a modal that's very easy to get set up but it's challenging to load divs via ajax and iframes. You have to choose one or the other. simplemodal (http://www.ericmmartin.com/projects/simplemodal/) is good but you still need to do a lot of the work yourself. It works with iframes and ajax content.
I have an absolute div inside a relative div. It's essentially a container for a absolute positioned corner banner, on the top right side of the page.
It works fine with Chrome, but not with IE. In IE it appears positioned absolutely, but inside its container. I'd like to override this, if possible, due to the way this site is built (complete template on a CMS):
#corner-banner a {
position: absolute;
right: 0;
top: 0;
display: block;
height: 200px;
width: 200px;
background: url(../images/down.png) no-repeat;
text-indent: -999em;
text-decoration: none;
}
#corner-banner a:hover {
background: url(../images/up.png) no-repeat;
}
Thanks for reading and for any input.
Cheers!
That is correct behavior. Absolute position inside a relatively positioned element will be absolutely positioned relative to the containing element.
Are you sure that the parent relative container is a div and not a td ?
EDIT
ok
This is not a CSS problem, but a bad HTML organization.
So, if you want your element to be positioned by the window, and not by his relative parent coordonates, you must put it outside the relative element.
Something like that :
<body>
<div id="corner-banner" class="norelative_element">
<!-- Your content with absolute position by the window !-->
<a>...</a>
</div>
<div class="relative_element">
<!-- Your content with relative position !-->
</div>
</body>
how to position a div element so that it shows at the top left corner, on top of all the content of the parent div, but at the same time its width does not extened more than its parents width?
Thanking you
Regarding the width, it depends how much content you have - can you set a static width on the element?
Regarding the positioning, you need to set
position:relative
on the parent, then add:
position:absolute;
top:0;
left:0;
on the child.
i am not sure...
if you position this item with:
position: absolute;
top: 0px;
left: 0px;
And the patent Div must have
overflow: hidden;
I found out a solution to it by myself. To make the child div appear on the top right corner of the parent div i set its position to absolute and top and left to 0. I solved the width problem by dynamically setting the child's width to the parent's width using jquery.
Note: the parent element's position should be set to relative for this to work on firefox.
Live preview: http://jsfiddle.net/PA6JZ/
#parent { position: relative; }
#child { position: absolute; top: 0; left: 0; }
<div id="parent">
<div id="child">Boom</div>
<p>Text here</p>
</div>
I'm really stuck here...
I have a site layout with a central layout (it's about 922px width, centered on the page)... I have a little logo that is to the top left of this, but it sticks about 10 pixels to the left of the central design. If you can imagine, it sort of sticks out to the left of the design...
Now, I was told that absolute positioning would make this happen. But I can't see how the logo would work with absolute positioning if the design itself it in the center of the page. I think this is to make sure it works in IE6... I have tried floating the logo in the central header, and then applying a negative margin of margin-left: -10px; which does work, but I've read this doesn't work in IE6.
Without a snippet of code its hard to tell, but it's probably an issue with where your element is getting it's 'absolute' positioning from. 'Absolute' is a misnomer. It really means "absolute...relative to the nearest positioned parent". So if in your design, you don't have a parent element with the css "position" style on it, it's going to take its position from the body element (which may have some margin/padding on it depending on your browser).
Adding a position: relative; to the element that you want to be the "outermost" container will allow you to specify position: absolute on an item within it, and specify your exact coordinates from there.
Set "position: relative" on a container div.
<style type="text/css">
div.page {
position: relative;
margin: 0 auto;
width: 922px;
}
div.page img.logo {
position: absolute;
left: -10px; top: 0;
}
</style>
<div class="page">
<img class="logo" ... />
</div>
Though.. I would rather make it work without absolute positioning.
When you position your logo absolutely it needs to be placed relative to something. That something is normally the viewport edge. If the logo is inside an element that is positioned relatively then it will instead be positioned relative to that element. So the answer is to make your centered page div display:relative; so the logo always aligns to the page not to the edge of the browser window. Here is an example:
The HTML:
<div id="centeredpage">
<img id="logo"... />
</div>
The CSS:
body {
text-align:center;
}
#centeredpage {
width:922px;
margin:0 auto;
text-align:left;
position:relative;
}
#logo {
position:absolute;
top:0;
left:-10px;
}
I hope that helps.