I have had a look at a number of the articles on here which seem to provide a fix for most people, apparently except for me.
I am using the following CSS on my website:
/* login page background */
body.function-login {
display:inline-block;
float:none;
vertical-align:middle;
height:100%;
background:transparent url("http://sheqcomply.com/loginbackground.jpg") no-repeat center center fixed;
background-size:contain;
}
No matter what I try I just cannot get the login box to vertically align within the page. I can provide the layout css and page html if needed but havent included it within this post as they are large.
The current code results in this
Thanks in advance
This is what I use often when I have to align things vertically, I position the element at 50% from top and then translate it with -50%. It should work for you too, but it also depends on the other css instructions you have there.
.function-login {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Vertical alignment, a perenial favourite.
One way to achieve this is to have another div around the component. In your example this would be the child of container with class col-md-6 col-md-offset-3. For this you need to add the height: 100vh style. For your actual component div you then add the following style
position: relative;
top: 50%;
transform: translateY(-50%);
There's probably little tweaks you need to do in order to get the "right" alignment for your context, but this should do it.
Related
I can't seem to get the Leaflet full screen plugin to work appropriately in Google Chrome when I set the CSS position property for the map div.
Here's a JS Bin to demonstrate my problem.
See the code:
#map { position:absolute; top:100px; bottom:50px; width:100%; }
On Firefox and IE, the map correctly goes to full screen (i.e. expands beyond the dimensions of the map div), but on Chrome, the full screen gets constrained by the top and bottom properties of the map div.
Any ideas on how to overcome this problem?
Thanks!
Eli
Edited 8/14/14: Thanks #FranceImage for the great answer, which worked like a charm. I'm still learning CSS and thus I'm sure there are always better ways to do things than I have done. For example, I'm not sure how to use the float property to achieve the same effect that I have with position: absolute on my page here.
How do I change the following code to use the float property instead of position: absolute to achieve the desired effect of having my map NOT overlap the header and sidebar? Thank you!
#map2 {
height: 100%;
width: 100%;
}
#mapcontain {
position: absolute;
top: 125px;
bottom: 50px;
left: 16%;
right: 0;
width: 100%;
}
For the plugin to work, you can't change the following
#map { position:absolute; top:0; bottom:0; width:100%; }
You will have to wrap the in a container (another div) where you will apply your positioning css
<div id="content">
<div id="map"></div>
</div>
Note: I would not use absolute positioning for a page layout.
Absolute position benefit is that the element is taken out of the normal flow and can cover other elements. It is usually used for dialog boxes and popups.
Go for float position.
I am weak in css and can you please help with this problem. You can see problem by clicking on Login/Register link in the below url.
Test box url
This is done in drupal. I am not able get the css to make the div with id "toboggan-login" to appear under the "Login/Register" link
Forgot to mention. I put the below css code. It works in small resolution systems. But its does not work in my 22'' monitor.
div#toboggan-login {
position: absolute;
top: 23px;
left: 74em;
}
This will fix your issue:
CSS:
div#toboggan-login {
position:absolute;
left: 50%;
margin-left: 310px;
width: 160px;
}
Than if you want to distance it a bit from the Login/Register top, just add:
top:10px; or how much px you want!
To explain the above lines:
The left:50%; pushes your element in the middle of the screen, so even at window resize your element will stay there, centered.
But to set it appropriately to some center-left position than we add position-left that will adjust the element position to a desired amount of px left from the center.
putting image always in center page(E.x image loading for ajax call), even when move scroll. how is it?
For most browsers, you can use position:fixed
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
If the image was, for instance, 40x30 pixels, you'd set margin-left:-20px; margin-top:-15px instead.
Here's a jsfiddle example: http://jsfiddle.net/WnSnj/1/
Please note that position:fixed doesn't work exactly the same in all browsers (though it's ok in all the modern ones). See: http://www.quirksmode.org/css/position.html
<style>
.CenterScreen{
position:fixed;
/*element can move on the screen (only screen, not page)*/
left:50%;top:50%;
/*set the top left corner of the element on the center of the screen*/
transform:translate(-50%,-50%);}
/*reposition element center with screen center*/
z-index:10000;
/*actually, this number is the count of the elements of page plus 1 :)*/
/*if you need that holds the element top of the others. */
</style>
If you add this class your element, it will be always center of the screen.
For example:
Hello world
This might help you : http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/
Put the image in a div tag with some class name (centeredImage) and use the following css
div.centeredImage {
margin: 0px auto;
position: fixed;
top: 100px;//whatever you want to set top;
}
i need this kind of effect in my project. there is a left corner floating red color strip. but i want to implement it for image using css. Please refer below image
http://www.w3.org/TR/xhtml2/mod-tables.html#sec_26.6.1.
you can use position:fixed; for a div.
Example code
css
#redBar {width:40px; height:200px; position:fixed; background:red;}
html
<div id="redBar"></div>
Demo http://jsbin.com/aqofa5
You can modify the background property to add your custom background image like background:url("the-path-for-the-image").
It is called fixed position. Here is css that accomplishes this:
.element { position:fixed; top:2%; right:2%;}
More info.
You can use a positioned div:
#myImgDiv
{
position: fixed;
top: 0;
left: 0;
background-image: url(path/to-img.png);
}
If it's an image related to content, it's best to use an <img> tag with an alt attribute within this div.
Let's say this is you DIV
<div id="alwaysThere"><img src="..."></div>
This should be CSS style:
#alwaysThere
{
position: fixed; /* or absolute if you want it to be fixed page top-left */
top: 0;
left: 0;
}
Use fixed position when you want your image to stay there regardless of page scrolling and absolute when you want it to stay top left on your page which means it will scroll when you'll scroll the page down.
The example you provided with a link uses fixed hence it stays there regardless of scrolling.
Pretty easy to be done, do the following:
div#divID
{
position:fixed;
top:0px;
left:0px;
}
This will give you the effect that this div will never leave the visible area of the browser.
Other position values are:
Static -- default
Absolute -- absolute in terms of the page, not the browser window
Relative -- relative to what it would be if the position was static
This is already an image. It doesn't use a floating div.
This CSS is used for the body:
background-image: url(http://www.w3.org/StyleSheets/TR/logo-ED);
background: white;
background-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;
Please see this UI sketch image, I have this div in sidebar (black box) on a certain site and as I scroll down or scroll up, I don't want it to hide...I want it to move itself down as I scroll down and move itself up as I scroll back up so that it never hides out. Can you recommend me some jQuery that can get this done? or something else. Please help, thanks.
Don't use jQuery for this please; it's pure CSS.
#MyDiv
{
position: fixed;
top: 10px;
left: 10px;
}
Adjust the exact position to your liking by adjusting top and left. Maybe you want it centered vertically like in the image (if the sketch is accurate in that aspect), in which case you have to deal with all the fun tricks necessary for vertical centering; hopefully in your case something like this would work:
#MyDiv
{
position: fixed;
top: 50%; /* This places the _top_ of the div in the middle of the page. */
left: 10px;
height: 500px;
margin-top: -250px; /* This moves the div upward by half of its height,
thus aligning the middle of the div with the middle
of the page. */
}