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;
}
Related
I have the following problem:
I have a father-div, that's position is "relative". Inside this div I have 2 son-div's. The first son-div should be positioned relative to the father-div. But the second son-div should be positioned to the whole browser-window.
My HTML and CSS:
#father
{
position:relative;
}
#son1
{
position:absolute;
left:0;
top:0;
}
#son2
{
position:absolute;
left:670;
top:140;
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
My problem now is, that the son2-div is also positioned relative to the father-div.
Is there any possibility to tell the son2-div, that it should inerhit the "position:relative" of the father and make left and top absolutely absolute to the whole window?
My problem is: I should change this inside a very big, complex HTML-structure, so it's not possible for me to change the HTML-structure.
First change
#son2
{
position:absolute;
left:670;
top:140;
}
to
#son2
{
position: fixed; /*change to fixed*/
left:670px; /*add px units*/
top:140px; /*add px units*/
}
Result:
#father
{
position:relative;
margin: 40px auto;
width:200px;
height: 200px;
background: red
}
#son1
{
position: absolute;
left:0;
top:0;
width:20px;
height: 20px;
background: black
}
#son2
{
position:fixed;
left:70px;
top:140px;
width:200px;
height: 200px;
background: green
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
This is unfortunately not possible without changing the HTML structure. An absolute positioned div will always position itself according to its first relative positioned parent.
What you could possibly do however, is change your #father element's width/height so you can still position your #son2 element correctly. This really depends on your layout and how far you can edit the #father element without destroying the layout. Or if possible, change your CSS so you do not need position: absolute; on #son1 (after which you can remove the position: relative; from your #parent).
You should keep your 2nd son div outside of your father div.
#father
{
background-color: blue;
width: 200px;
height: 200px;
}
#son1
{
position:relative;
left:0;
top:0;
background-color: red;
width: 50px;
height: 50px;
}
#son2
{
position:absolute;
left:670px;
top:140px;
background-color: yellow;
width: 50px;
height: 50px;
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
Don't need to use position: relative; for parent div
son1 should be position: relative; for your aim.
I highly suggest use background-color and width , height to see the position of div on your page.
Also there is a simple mistake in your code:
left:670;
top:140;
You should specify the measurement unit;
left:670px;
top:140px;
Your div#son1 is already positioned to div#father by default (static position). You don't need to set any positions to them.
#father
{
/* don't set position. it's static by default */
}
#son1
{
/* don't set position. It's positioned to #father by default */
left:0;
top:0;
}
#son2
{
position:absolute;
left:670;
top:140;
}
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
Also, if you want your div#son2 to be positioned to the window (user visible area), but not the root element (body), you should set div#son2 to fixed
See this video for more details about fixed position.
https://www.youtube.com/watch?v=nGN5CohGVTI
Absolute div keeps showing up above the other divs, while is should appear underneath;
here is a quick demo:
http://jsfiddle.net/hvP8c/2/
<div id="logo">
<h1></h1>
<div id="line"></div>
</div>
#logo {
position: relative;
}
h1 {
width: 60px;
height: 60px;
border-radius: 50%;
border:1px solid #000;
background-color:#eee;
z-index:100;
margin:0 auto;
}
#line {
border-bottom:1px solid #033e5e;
position:absolute;
left:0;
top:30px;
width:100%;
z-index:1;
}
In this demo, the line should go below the circle. I tried to play with z-index but it didn't have any effects.
z-index only applies to positioned elements. Since the h1 (which appears to be the "other div" you are talking about) is position: static it won't apply there.
Set position: relative on the h1
You have to set position: relative or position: absolute to h1
Change z-index for #line from 1 to -1:
#line {
z-index: -1;
}
Demo: http://jsfiddle.net/hvP8c/4/
Beware that it may not work on IE6/7. OK in IE8.
just do => z-index:-1; of the id '#line'
I want to know the best way to achieve the below image in CSS+HTML.
I'm having difficulty explaining in words what I want, so I guess a picture would make it more clear:
While the second and third parts are doable. I'm curious to know the best way to achieve the first one (Blue menu). If i split my page into three parts (based on the menus), in the case of blue, my div items must float out of the horizontal width of the menu, but within the vertical.
Thoughts wise ones?
Working Fiddle
You can see i have used position:relative on parent and position:absolute on child to make it flow out of that li element.
ul {
list-style:none;
width:906px;
height:600px;
}
li {
float:left;
display:inline-block;
border:1px solid #ccc;
width:300px;
height:600px;
text-align:center;
position:relative;
}
.selected {
background:yellow;
}
.div {
position:absolute;
left:-150px;
width:600px;
height:80px;
border:1px solid #000;
background:#fff;
z-index:2;
}
#div-1 {
top:30px;
}
#div-2 {
top:140px;
}
#div-3 {
top:250px;
}
You can do it by position: absolute.
.blueDiv{
position:relative;
}
.innerDiv{
position:absolute;
top: (your choice);
left: 50%;
margin-left: -(innerDivSize / 2);
}
If you don't have the width of the elements inside ... you can try to push them to the left and right by:
.innerDiv{
position:absolute;
top: (your choice);
left: 0;
right: 0;
}
But that will work only if the parent element is not on the very left or very right of the page.
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;
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.