I am trying to align the modal box ( in this case it's a confirm box ) in the center of the page. So I set the position of the main container to be relative and then positioned the div element of the modal box using the following CSS code:
.confirmBox{
top:25%;
left:25%;
}
I have adjusted the values of the top and left attributes. This works fine at lower zoom but as I zoom in the box does not remain in the center of the page. How can I solve this using CSS?
The original code is actually big and i am not able to think of an instance for this case.
Still I am considering the div element with class="confirmBox" to be the code for confirmBox and attaching the fiddle http://jsfiddle.net/W6ATN/47/.
You can use 50% left and top positions, and then subtract half of the width and height to make up for the size of the element:
position:absolute;
top:50%;
height: <your value>px;
margin-top: (negative value of your height, divided by 2);
width:<your value>px;
left:50%;
margin-left: (negative value of your width, divided by 2);
I think this way is easier to understand. If the width of the element is 40% (of its container), then it should be 30% to the left to be equally centered:
|-----30%-----|-------40%--------|-----30%-----|
which all == 100%
Or
you can use % width and % height, and use simple math to figure out the left and top positioning:
position:absolute;
height:40%;
width:40%;
left:30%; // (100 - width) divided by 2
top:30%; // (100 - height) divided by 2
// Slightly modified custom css with all due credit to it's previous owner
//
// ## Cat...
.vertical-align-center {
left: 0%; // <<<------ Align left and comfortably stretch across the screen
display: table-cell;
vertical-align: middle pointer-events: none;
}
Related
:)
when i dont set top/left properties for an element fixed what acccured??
please see this sample code:
#fixed-menu{
background-color:#ba4444;
border-top: 5px solid #0892cd;
height: 60px;
position: fixed;
width: 100%;
z-index:9999;
box-shadow:rgb(128, 128, 128) 0px 5px 15px 0px;
}
#wrapper{
height:900px;
width:960px;
margin:0 auto;
background-color:yellow;
margin-top:100px;
}
<body>
<div id="fixed-menu"></div>
<div id="wrapper"></div>
<body>
with above code,fixed-menu also have 100px margin-top!!!!why?????
...................
how calculated top property???
Once an element has been fixed with position: fixed, the three properties left, width and right together determine the horizontal position and size, relative to the window. (CSS uses the more general word viewport; a window is an example of a viewport.)
You need at most two of the three properties, i.e., left & width, right & width, or left & right. Setting just one of the three, or none at all is also possible. In that case, CSS will use the element's natural (“intrinsic”) size and/or position, as needed, for any properties that are left at their default value ('auto').
The same holds for the trio top, height and bottom. You need to set at most two of them: top if you want to control the distance from the top of the window, bottom to control the distance from the bottom, and height if you want to specify a fixed height.
I hope that answers your question. For further reading you can refer to this link
Tip : Fixed position is free flow guy in the document window. Based on the element present before the fixed element aligns itself next to it.
In your example there's no elem before fixed div but the following wrapper div you are setting the margin top to 100px. which affects the viewport. So you can imagine the viewport for fixed element starts below the 100px mark set by the wrapper div.
you can see removing the margin in wrapper div or set the wrapper position to fixed with margin top 100px. you will get the idea.
I need to allocate some background image to a certain div, the thing is it needs to be positioned from right and not the usual left in CSS. So when defining background-position, it can read, say , right, or some big percentage (which is also calculated from the left side of the screen but anyway works) and.. that's it. I cannot use pixels and get it to go with a fix distance from the right side of its container. Am I right here? So, is there a work-around for this? Anything to do with LESS if that helps? Theoretically, I can have it set to right and somehow decrease a couple of pixels then.
We have margin-right:+-px, padding-right:+px, but not background-position-right:+-px ?
background-position: right 20px;
https://developer.mozilla.org/en-US/docs/CSS/background-position
JSBIN example: http://jsbin.com/ixejey/1/
UPDATE:
Oops, I may have misunderstood the question. The above positions the background image to the right side and 20px from the top--but not a set distance away from the right side. I don't think you can do that at this time with CSS alone.
For now what you could do is instead of using a background image on the element directly, wrap the element inside a wrapper div, then add a second div to hold the "background" image and position it absolutely--which you can do from the right a specific distance.
Example of the alternative option:
<div id="yourContainer">
<div id="yourBackGroundImage"></div>
<div id="yourContent">your content</div>
</div>
css:
#yourContainer {
position: relative;
}
#yourBackGroundImage {
width: 100;
height: 100;
position: absolute;
right: 50px;
}
The first value (calc(100% - 0%)) is the horizontal position and the second value (calc(100% - 10%)) is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%
<div id="hero-content"></div>
CSS
#hero-content{
background-position:
calc(100% - 0%) /* 0px from the right */
calc(100% - 10%) /* 10% from the bottom */
}
<div id="background"></div>
and
#b {
height:100%;
width:100%;
background: ; //put background style here
}
I have a problem in my web design assigment.
I can't make my 4 divs appear in a specific location in the screen.
Also need to mention that all of the 4 divs need to be overlap so I used z-index. But when I run my site on different screens the position always change although I used percents.
This is my css code (welcome, register, login, game are my div classes):
.welcome
{
position:absolute;
top:28%;
right:9%;
width:960px;
height:660px;
z-index: 3;
}
.register
{
position:absolute;
top:28%;
right:9%;
width:960px;
height:660px;
z-index: 2;
}
.Login
{
position:absolute;
top:28%;
right:9%;
width:960px;
height:660px;
z-index: 1;
}
.game
{
position:absolute;
top:28%;
right:9%;
width:960px;
height:660px;
z-index: 0;
}
The problem is that top and left properties only work for elements if these elements' (doesn't have to be direct) parent position is set to relative.
So you can either set body { position: relative;} or create a wrapper div around your 4 divs and set its position to relative.
Here is a fiddle with the code you need; you can position the elements however you wish, and the divs' margins will always be screensize-adapted.
http://jsbin.com/ogexev/1/edit
Note: I changed the width/ height properties a bit (divided by 3) to make them fit the screen.
PS: If many elements have the same properties, you're better off specifying them in one class. That's why I added a class .common in the fiddle.
It doesn't matter if you use percent in top and right, because the 28% of top in 1200px monitor and 960px height monitor is not the same. You must add the four divs inside a div. Create a div as a wrapper and it will work same on all the monitors. Because it doesn't matter the size of the screen the top and right values are the same.
I tried height: 100% but that seems to just be the height of the viewport.
My page scrolls, so I would like for the height to be set to the entire window basically.
Here is a live example - http://jsfiddle.net/gtKBs/750/ (trying to figure out the divider height).
Note, I don't want to move the div, I just want to set the height to the maximum height of the window.
Thanks.
Edit 1
Or even better yet, what I would like to happen is as I scroll the divider stays the same proportion and scrolls with me - i.e. say it is total height of 90%, then as I scroll, I always see the space # top & bottom, indicating that it is just 90% height of the current viewport.
Edit 2
This is what I am trying to do - http://jsfiddle.net/ryBZG/1/ A span 2 divs, span2, span9 where the span2 is a sidebar and the span9 is the content of the page. I want to put a divider between them.
Try to change the CSS of your divider div to the following
.divider{
position:fixed;
left:50%;
top:10%;
bottom:10%;
border-left:1px solid white;
}
As your #bluebox has a fixed width: 550px; I recommend to set your .divider's width to a fixed width (260px), too.
HTH
Andy
I have a problem with setting the appropriate text to the slider. I want the text to appear on the bottom right of the page. Only problem is the different resolutions (tablet, laptop, 24'' monitor).
Testing page: http://tinyurl.com/d825kuv
code:
div {
position:relative;
float:right;
vertical-align: bottom;
}
to move an element to the bottom of a <div>, set the parent <div>'s position to relative: position:relative, then the <div> you want to be placed at the bottom should have CSS
div {
position: absolute;
bottom: 0;
right:0;
}
then just adjust the pixel values to suit your layout.
Do:
position:absolute;
right:0px;
bottom:0px;
This will make sure that the element in question will be as far right, and as far down within the parent as possible. Of course if you wanted to pad it from the right/bottom just take the pixels up a notch. Note that position:absolute only works if the parent's position is not set as default. If in doubt give your parent the following style:
position:relative;