Is it possible with either CSS or jQuery to center an absolute div inside or outside a relative div, if you dont know the width of the relative div witch in this case is the parent element of the two.
normally i would do something like:
.child {
position: absolute;
top: 100%;
left: -50px;
width: 200px;
height: 300px;
}
but only if i knew that the parent is 100px wide, but what if i dont know?
FIDDLE
If you don't need to target IE8 and lower, you can use the CSS3 calc() function:
left: calc(50% - 100px);
Replace 100px with half of whatever width your absolute positioned child element is.
JSFiddle example: http://jsfiddle.net/Gmmqh/5/
Note the use of box-sizing: border-box to make the boxes even with each other, like on the third one.
To center anything use below code
margin:0px auto;
So your .child becomes
.child {
display: none;
position: absolute;
top: 100%;
margin:0px auto;
/*left: -50%;*/
width: 200px;
height: 300px;
background: #eee;
border: solid 3px #ddd;
}
Related
I'm loading an image inside a div #popup, which is inside a main wrapper called #main
#mask {
display: block;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.84);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
}
and
#popup {
display: block;
position: absolute;
top: 30px;
max-width: 960px;
z-index: 9999;
background-color: #efefef;
height: auto;
left: 80px;
right: 80px;
margin: 0 auto;
margin-bottom: 80px;
}
with jQuery i load an image inside #popup and i can scroll it up and down, but when i close the overlay and I load another image, the image is not visible form the top...it maintains the same scroll position when i left/close the first image...
dunno why...how can I reset it without resetting the whole page?
$('#popup').scrollTop(0);
seem is not working...
You are trying to reset the scrolling of the wrong div, you should reset the scroll of the div that has the overflow property set.
In this case the div that handle the scroll is the #mask div, so apply the scrollTop() the #mask element.
$('#mask').scrollTop(0); will do the work.
Make sure the element (#mask) is already visible when calling the scrollTop() will not work.
Could somebody please assist. I am trying get an image to have a max-height and an auto width. The problem is these rules are being ignored as it's parent is fixed
DEMO http://jsfiddle.net/gop4jhm9/5/
#myDiv {
position: fixed;
top: 100px;
left: 50%;
width: auto;
height: auto;
max-height: 100%;
background: red;
display: inline-block;
padding: 10px;
max-height: 30%;
}
#myDiv img {
width: auto;
height: 100%; // being ignored
}
Is there any way of doing this via CSS, JS, jquery ?
The problem is that you have the #myDiv with two max-height attributes. Take away the second one, which restricts the div to 30%, and it will work in fixed.
That is because it intends to keep the image's aspect ratio because you set the margin to auto. if you wish for a max height to be set, set it in the max-height property of the #myDiv.img.
#myDiv {
position: fixed;
top: 100px;
left: 50%;
width: auto;
height: auto;
background: red;
display: inline-block;
padding: 10px;
}
#myDiv.img
{
width: auto;
max-height:90%;
}
I'm currently trying to create a little menu that changes position as the user scrolls. I've come up for this for a style - http://jsfiddle.net/piedoom/S8tyn/
As you can see, the dots are appended to each text <div> element, and it looks like this.
However, this looks very ugly. How can I center each dot beneath each text div? I've tried doing things like text-align: center to no avail.
Use the css style of margin: auto to center the child div.
http://jsfiddle.net/S8tyn/1/
Just change your style to next
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
height: 10px;
margin: 0 auto;
}
Demo
Here is the answer for your question:
added left and margin-left
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
left:50%;
margin-left:-5px;
height: 10px;
}
updated link
I have a div at the top of my site which is 100% wide and in a absolute and fixed position. The code for it is like:
div.header{
height: 60px;
width: 100%;
position: absolute;
position: fixed;
top: 0px;
left: 0px;
background-color: #eeeeee;
}
Now everything in that works, but when users scroll down the site content appears behind this. Is there a way that I can prevent this from happening?
remove position: fixed;
it should be like
div.header{
height: 60px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #eeeeee;
}
If you want to make it fixed than remove position:absolute. both will not work together.
you have position:absolute and fixed both together, but fixed will override the position because it is after absolute.
Now if you want to appear any element above of other and it has a position: absolute or fixed you can use z-index, heigher z-index element will cover up the lower z-index element.
A div element that needs to be displayed on front should have a higher z-index value than the element that needs to be behind.
eg.
div.header{
....
....
z-index:9999;
}
div.normal{
....
....
z-index:9998;
}
On my website I have a div footer that always appears at the bottom. I use the following code - It may come in handy in the future or for someone searching for a similar query.
#bottom
{
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
z-index: 999;
background-color: rgb(30,122,212);
border-top:3px solid black;
border-bottom:1px solid black;
-moz-box-sadow: 0 0 10px white;
box-shadow: 0 0 10px white;
}
I hope this helps.
It is a silly question. Just remove the position: fixed; property from your class.
What's the easiest and shortest way to center an absolute position div in the body without using a library like jQuery. Thank you!
Edit:
Something like http://jsfiddle.net/apfwh/ but maybe with a bit cleaner?
I think no js needed. CSS will do it (see here):
body {
background: #888;
}
.box {
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
UPD
In case you don't have fixed width/height of element:
JS (when element is opened):
element.style.margitLeft = -element.offsetWidth / 2
element.style.margitTop = -element.offsetHeight / 2
CSS:
.box {
background: #ccc;
position: fixed;
left: 50%;
top: 50%;
}