suppose i have a div, i want it to be out of visible area of computer monitor screen, so that when i use CSS transitions to move it to a specific position, an effect of element moving in slowly from outside of screen is created, and i also would like to create its reverse effect.
position: absolute; then do something like left: -100px;
working example(hover over the box and wait): http://jsfiddle.net/fDnPj/
http://jsfiddle.net/DZFtt/
<div id="example"></div>
<div id="example2"></div>
<div id="example3"></div>
#example{
width:50px;
height:50px;
background-color: #386a95;
position:relative; /*Not moved*/
}
#example2{
width:50px;
height:50px;
background-color: rgb(177, 35, 35);
position:relative;
left:-25px; /*Pushed halfway off the screen*/
}
#example3{
width:50px;
height:50px;
background-color: green;
position:relative;
left:-50px; /*This is now totally hidden from view*/
}
IF you know the width of the div you can use the combination of position and left property like this
#my-div {
position:absolute;
left:-100px;
top:0;
width:100px;
background-color:red;
}
<div id="my-div">Hello</div>
Play here by adjusting the left property.
Related
I have a container div with several smaller div:s inside, all of them with float:left;. If I hover one of the smaller div:s the height and width should be increased and it should overlay the other div:s without moving them.
HTML:
<div id="boxcontainer">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS:
.box {
float:left;
position: relative;
width:150px;
height:150px;
margin:5px;
background-color: yellow;
}
#boxcontainer {
position: relative;
width:500px;
height:auto;
}
.box:hover {
z-index:100;
width:300px;
height:auto;
}
How can I achieve this?
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Instead of float left try position absolute.
I have added a container around each box and positioned each element absolutely within it. This way you can add as many boxes as you wish and keep the same class.
EXAMPLE
HTML
<div id="boxcontainer">
<div class="box">
<div class="Inside"></div>
</div>
<div class="box">
<div class="Inside"></div>
</div>
<div class="box">
<div class="Inside"></div>
</div>
</div>
CSS
#boxcontainer{
position: relative;
width:500px;
height:500px;
}
.box{
position:relative;
float:left;
width:150px;
height:150px;
margin:5px;
}
.Inside{
background:green;
position:absolute;
top:0;
left:0;
width:150px;
height:150px;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
.Inside:hover{
z-index:100;
width:250px;
height:250px;
background:#666666;
}
http://jsfiddle.net/JJ3v4/3/
Live Demo: http://jsfiddle.net/hKL4f/1/
I think the easiest way to do what you want would be to use a CSS transform.
.box:hover {
transform: scale(2, 2);
}
That way you alter the dimensions of the element on hover without affecting any of the other elements in the document flow around it.
If you want the boxes to expand in a different way (ie, to the right and bottom rather than in all directions) you can set a transform-origin property (default is 50% 50%).
Try this...works somewhat
.box{
float:left;
postion: fixed;
width:150px;
height:150px ;
margin:5px;
background-color: yellow;
}
#boxcontainer{
postion: fixed;
width:500px;
height:auto;
}
.box:hover{
z-index:1;
width:260px;
height:160px;
position:absolute;
}
I had the Same problem in my project when i hover , the box changes its width and height but it efffects the other boxes as well so to solve this problem best way is to use transform property as below
.box:hover {
transform: scale(1.2 , 1.2); // This increses the dimmensions of the box and overlay
to others boxes without disturbing others
}
I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.
I've created a JSFiddle that shows my problem:
http://jsfiddle.net/qaEzz/1/
My CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
into the <div id="content">
and added in the css
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
Here is the working Fiddle
If you change position:absolute; to position:fixed;, then it would stick to its position on the right.
For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.
http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
I would like to align an absolute positioned div. Top:50%, bottom:50% not working, what's the solution for this?
CSS
#container {
position:relative;
background:red;
width:600px;
height:600px;
}
#cen {
position:absolute;
width:300px;
height:300px;
background:grey;
top:50%;
bottom:50%;
}
HTML
<div id="container">
<div id="cen"></div>
</div>
http://jsfiddle.net/2xq5F/
To center something vertically, you need do add a top: 50% and a negative margin-top: -(elementHeight/2).
In your case it will be
#cen {
position:absolute;
width:300px;
height:300px;
background:grey;
top:50%;
margin-top: -150px;
}
You can also do it this way:
#cen {
position:absolute;
width:150px;
height:150px;
background:grey;
top:0;
bottom:0;
left: 0;
right: 0;
margin: auto;
}
Demo at: http://jsfiddle.net/audetwebdesign/EBmy3/
Big advantage, no math required.
However, this works because you specified width and height. This gets trickier when you use percentages.
Note: I made the blocks half the size so they fit in the fiddle window... will also work with the larger blocks.
Works Well With Replaced Elements
This technique does a pretty good job if you are positioning an image, which has specific dimensions (though you may not know them).
See example in fiddle.
Vertical alignment is based off of other inline elements. The best way I've found to vertically align something is to add a psuedo class.
It's easy to vertically align something if you know the dimensions, like some of the other answers have noted. It makes it harder though, when you don't have specific dimensions and needs to be more free.
Basically, the method aligns the psuedo class with the rest of the content to align middle whatever is inside the container.
div#container {
width: 600px;
height: 600px;
text-align:center;
}
div#container:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
div#cen {
display:inline-block;
vertical-align:middle;
}
I'm not sure what you need it to be absolutely positioned for, but if you trick CSS into thinking your container is a table-cell, you can use the vertical-align property for a fully dynamic layout.
#container {
position:relative;
background:red;
width:100px;
height:200px;
display: table-cell;
vertical-align: middle;
}
#cen {
width:100px;
height:20px;
background:grey;
}
If those are the real measurements, why not just do this?
#cen {
position: absolute;
width: 300px;
height: 300px;
top: 150px;
background:grey;
}
My outer div is position:relative and inner div is positioned absolute.
I want to set my inner div center align vertically and thinking to use top:auto and bottom:auto but it is not working. Please advice me how it can be done.
div.Container div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
height:95px !important;
position:relative !important;
}
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:auto;
bottom:auto;
right:0px;
}
<div class="Right">
<div class="header-search">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
You can use line-height:95px; in the outer div and vertical-align: middle; in the inner div like this:
div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
line-height:95px !important;
display: block;
}
div.header-search
{
overflow:auto;
border:0px dashed blue;
vertical-align: middle;
}
You can play with it here: http://jsfiddle.net/leniel/5Mm67/
If you want to horizontal align the content of the inner div, just add this in div.Right:
text-align: center;
Here's the result: http://jsfiddle.net/leniel/5Mm67/1/
the best way to achieve what you are after would be to remove the bottom:auto; style and replace the top:auto; with top:50%; . After that work out the height of the search bar that you are trying to center (say its 20px) and add a negative margin styles for half of its height, so if it was 20px the style would be margin-top:-10px;
your css would look like this:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height:20px;
margin-top:-10px;
right:0;
}
set .header-search to top:50% or bottom:50% then use margin-top:-(half of div height) or margin-bottom:-(half of div height); respectively. I also sometimes just simply use top:50% or bottom: 50% without the negative margins.
For example:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height: 500px;
margin-top:-250px;
right:0px;
}
So yeah, in this case you would have to set a fixed height.
Set in the div with position absolute: "top:50%;"
It will display the div a litle bit to low (top od the absolute div should be exacly on the 50% of parent height - relative div) but there are ways to go around this.
For example:
Do even one more div with position relative and move it higher with half of absolute div height (this doesnt look very nice in code) - You must know the divs height, if you dont you can measure the size in sth like jQuery and move div a litle higher.
Easiest way: Maybe try 45% instead of 50% (if its not pixel to pixel design).
Propably somebody has better solutions, if so I would like to see them to :)
This should work:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
right:0px;
}
Hie, there are several methods to vertical centering of div its done through the magic of CSS.... Here is the examples and it works fine i have tested... and it works fine.
HTML:
<div id="parent">
<div id="child">Content here</div>
</div>
CSS:
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Here is other methods click here to see complete reference
Hope, it will helps you. Cheers. !!
Try setting the inner div to margin: auto 0;
Hi again, this time the problem is with css, I' have a custom object (black rectangle named container) that contains items (red rectangle), each item must contain a litle rectangle (blue) named flag. Until here everithing ok.
here is the css properties:
.container
{
overflow:visible;
position:absolute;
border:0px solid;
border-color:Black;
width:500px;
height:500px;
}
.Item
{
overflow:visible;
border:0 invisible;
position:absolute;
z-index:100;
margin-top:1px;
}
.Flag
{
position:absolute;
width:20%;
height:20%;
margin-left:80%;
margin-top:80%;
z-index:98;
opacity: 0.5;
}
And Here is my Html
<div class="Container" id="CondicionesMostrar" style="left: 0.31em; top: 0.31em; width: 84.75em; height: 44em;">
<div class="Item" id="I_Cond_1" style="left: 0.06em; top: 0.06em; width: 216px; height: 120px; border-width:thick; background-color:Black;" onclick="alert(Hello');">
<div class="Flag"></div>
</div>
</div>
The problem is when the size width is greater than height the flag appear out of Item like the image A and if the height is greater than width it appear as the image B. The Item might have different sizes, the tests was made in Firefox 10.0.2, chromre 17.0.963.79m and IE 9, all of them return the same result.
What is the current way to do this? There is anything bad on my css?
I'm using absolute positions because i need to populate Container with many Items.
There is an alternative to perform this task?
Very tks for your help.
on .Flag, remove:
margin-left:80%;
margin-top:80%;
and change it to:
bottom: 0;
right: 0;
Joseph is right, I'm only adding that if parent div you also should use left and top position.
.container
{
position:relative;
border:1px solid #000;
width:500px;
height:500px;
}
.Item
{
position:absolute;
z-index:100;
top:1px;
left: 0;
}
.Flag
{
position:absolute;
width:20%;
height:20%;
right:0;
bottom:0;
z-index:98;
opacity: 0.5;
}