I have a button inside of a parent div. I would like the button to be in the upper-right of the div.
If the parent div had its CSS position set to relative, I would just make the button's position: absolute and top: 0px and right: 0px or something along those lines (right would actually be dynamically based on the size of the button).
The problem is, someone else made the div, it has no position attribute, and I can't change its style. How can I still position this button where I want it?
Example HTML:
<div id="someone_elses_div">
<button id="my_button">Hello World</button>
</div>
You could use the css calc() to calculate left margin for the button according the the div's width: FIDDLE
as you can see, almost all current browsers support calc(): CALC()
css:
#someone_elses_div{
background:red;
height:100px;
width:70%;
}
#my_button{
width:100px;
margin-left:calc(100% - 100px);
}
I'm not sure if this will help, but are you unable to change the parent's position due to not having access alone? If so, you could just use some jQuery to add the position.
$(document).ready(function () {
$('#someone_elses_div').css({
'position':'relative'
});
});
Related
Im having some issues achieving absolute positioning on an element. Im trying to implement two banner ads to stay stationary when the user scrolls through a div. I tried changing the parents position to relative and the children I want to remain static position to absolute. This gets the initial placement right, but I am still able to scroll past the absolute divs. Here is the appropriate CSS/HTML.
HTML:
<div id="pane1">
<div id="home-banner1" class="banner">
</div>
<div id="home-banner2" class="banner">
</div>
<?php ..... ?>
</div>
CSS:
#pane1{
width:100%;
background-repeat: repeat;
height:auto;
display:inline-block;
padding:20px 50px 50px 50px;
min-height:500px;
text-align:center;
position:relative;
}
.banner{
width:50px;
height:300px;
background-color:white;
position:absolute;
top:0;
}
#home-banner1{
left:0;
}
#home-banner2{
right:0;
}
Use position:fixed; for the banners so that it will stay on screen at fixed location even while you scroll up or down the page.
EDIT
For the hiding and displaying of banner only below that #container element, you could use some jQuery like this:
$(window).scroll(function() {
var top_div_height = $('#container').height(); // height of the blue top container
if ($(this).scrollTop() < top_div_height) { // hide the rightside banner if the user is viewing that blue top container
$('#home-banner2').css({
'display': 'none'
});
}
else{ //... otherwise show the rightside banner
$('#home-banner2').css({
'display': 'block'
});
}
});
Make sure you set the CSS rule position:fixed; for the #home-banner2 element.
Hope this will help.
Actually your code work exactly as expected.
Position: absolute move the element relative to the closest parent element with position: relative. So, if the parent element go outside the viewport, so it does the child absolute element.
To get the wanted result, you need some javascript/jquery to fix the element as its parent enter the viewport and 'unfix' when the parent leaves.
Something similar to the Bootstraps' affix
I want to know how to a continued below div.
What I mean is like they have in [w3schools.com][1]
If you go to one of their turorials you will see menu in the left side, now even there is no content inside the div it still continue down (his background I mean)
I upload image that explain what I mean: http://i.stack.imgur.com/iLiUD.png
I hope that you understand me, sorry on my english.
EDIT:
You ask for a code, but I dont try anything because I dont know what to do.
Any way, this is the page: link removed
Like you say to me I set the div height to 100%, dosent help.
It's looking like that whole container is one div. Inside that div are several others that have their own height element. For example if you have a container div (using fixed just for ease right now and since you posted no code)
.myContainer{
position: fixed;
top: 0;
left: 0;
width:250px;
height:100%;
background: #ccc;
}
Inside that div you'll place the inside elements like
.insideMyContainer{
float:left;
min-height:125px; //whatever height you want or just let it be auto based on content
}
You can give fixed height:1000px; via css, or padding-bottom:200px; to that div...
element {
padding-bottom: px; /*gives extra space*/
}
Don't know what you need..
Edit:
step 1 - give a class name to content div
<div style="width:79%;display: inline-block;padding-left: 10px;" class="bigboy">
step 2 - put this code insideyour tag
<script>
$( document ).ready(function() {
$(".apl").height($(".bigboy").outerHeight()+ "px");
}
</script>
and done :-)
Please see this: http://bootsnipp.com/snippets/featured/centered-processing-modal
It is a modal for letting the user know that something is going on in the backend, so please wait. How can I have this only on a form/div and not the whole page in Bootstrap3?
Thanks for helping
Just do it as they did it, you can use the chrome inspector for that, but i'll describe the technique for you.
1) Create a div (or any element that you want, as long as if its not a block element you change its display to block) inside a container, in this case your form or a div containing that form.
2) Set the position of that container as relative and the modal position to absolute, if you don't set the parent position to relative, the modal will be relative to the body tag.
3) Set a fixed widht and height for your modal, lets say 200px for both, then add a top and a left property for the modal of 50%, this will center your element top-left corner relative to its parent, since you want the center of the element in the middle and not the corner, you need to do an offset adjustment, by moving up and left half its size, for this you'll use margin-top: -100px; and margin-left:-100px; which is the negative of widht/2 and height/2
Here is how your html should look like:
<div class="container">
<!-- your form here -->
<div class="custom-modal">
<!-- loading gif here -->
</div>
</div>
And here is how your css should look like:
.container{
position:relative;
}
.custom-modal {
width: 200px!important; /* Use !important in case you want to override another val*/
height: 200px;
position: absolute; /*You can use fixed too*/
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
display:none; /* You want it to be hidden, and show it using jquery*/
}
Now, you should set it as hidden, and when do your ajax request, you can set its visibility back with javascript.
Jquery example
// Store your modal object in a variable
var $myModal = $('.custom-modal');
// On ajax call or any event call this
$myModal.fadeIn();
// When your ajax call is done, then hide it again on the callback
$myModal.fadeOut();
This may be a long shot to do without using JavaScript...
If I have the following (stripped out code for the problem)
<div id="container">
<div id="content"></div>
</div>
#container {
position: relative;
}
#content {
position: absolute;
}
The content box contains dynamic content so a fixed height cannot be used.
Position absolute has to be used on the content div as its using jQuery UI stuff...
How would I get the container box to resize its height to fit the content?
I understand this is probably impossible without using some sort of JavaScript, as placing a div positioned absolute takes it out of the flow etc etc, but just wondered if anyone knew of some sort of work around?
Thanks!
edit: I misunderstood the question the first time.
If all else fails, here's a jQuery solution:
$('#container').css('height',$('#content').height());
Ok, I have no idea what your content is (jQuery UI stuff). However, say it's just an image:
#container {
position: relative;
}
#content {
position: absolute;
top:0; bottom:0; left:0; right:0;
}
This will set your content area to at least 100% width and height of the parent.
I am using JS to write HTML code where I need to display 2 images exactly overlapped.
The height and width of both are same.
What CSS properties can I use to do this?
Position relative on the container, and absolute on the images:
All of the above answers are missing the fact that you need to position a parent element with something other than static, or else you will be positioning them absolute to the browser window, which I presume you do not wish to do.
position: absolute will give your position in the container of the closest parent with some sort of positioning. So we give the parent position:relative; without declaring top or bottom, this way it will be 0px off from where it would normally be (i.e. no change, but still has position declared).
<div id="container">
<img src="data:image/png;base64,R0lGODlhAQABAPAAAC+byy+byywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
<img class="hide" src="data:image/png;base64,R0lGODlhAQABAPAAADCQIzCQIywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
</div>
#container{
position:relative;
}
#container img{
position:absolute;
top:0;
left:0;
}
.hide:hover{
opacity:0;
}
http://jsfiddle.net/BLbhJ/1/
Edit: Added your hide functionality
Play around with the css in this:
http://jsfiddle.net/zuZxD/
I used opacity to display the overlapping.
<style>
.imageoverlap{
position: absolute;
top:100px;
}
</style>
...
<div class='imageoverlap'>
image1
</div>
<div class='imageoverlap'>
image2
</div>
Try that :D
If you set position to absolute, you can control where you want to place it.
<style>
#overlay{position:absolute; top:0px;}
</style>
<div id="layer1"><img src="img1.png"></div>
<div id="overlay"><img src="overlay_image.png"></div>
Now you need to position #overlay where you want it, by setting top and left positions, i.e., top:0px, left:300px;