I am creating a login screen where there is a login box that I'd like to appear in the center of the screen (horizontally and vertically) no matter what resolution the user has.
I have looked around and can only find tutorials/articles that center content horizontally, which is half of what I want.
Any idea how I can achieve centralisation in both planes?
The best approach is using CSS and a Javascript callback for older IE versions.
CSS
.center {
width: 300px; // your login div width
height: 300px; // your login box height
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px; // width/2
margin-top: -150px; // height/2
}
HTML
<div class="center">
Hey dude, I'm in the middle!
</div>
Live example
http://jsfiddle.net/86Asb/
Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width. This will work in all browsers except IE6,IE7 maybe.
The only way I know to vertically center an item is using javascript. Here is a simple example of how to do it using jquery and absolute positioning through CSS. Link to a jsfiddle and code to follow.
http://jsfiddle.net/AlienHoboken/XCPGe
Javascript:
$(document).ready(function() {
var width = $('#test').css('width');
var height = $('#test').css('height');
width = width.replace('px', '');
height = height.replace('px', '');
$('#test').css('left', ($(window).width()/2) - (width/2));
$('#test').css('top', ($(window).height()/2) - (height/2));
});
CSS:
#test {
position: absolute;
width: 50px;
height: 50px;
background: #000000;
}
I'm using the following solution (no fixed width of dialog), keeps it centered horizontally.
#test {
position: absolute;
max-width: 300px;
left: 1%;
right: 1%;
}
Any feedback / disadvantages appreciated!
Related
I'm currently trying something out which i saw on another website.
Imagine many pictures at the same position at the bottom of the website. Now when you scroll up - it will scroll every picture one bye one up - when done you will get eventually to the footer.
I already tried position: sticky etc. but it did not worked as I wanted.
Can someone help me? I would be so happy!
.poster-middle {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-middle-img {
margin-top: 500px;
}
.poster-left {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-left-img {
margin-top: -700px;
}
.poster-right {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-right-img {
margin-top: -700px;
}
<div class="poster-middle"><div class="poster-middle-img"><img src="img/1.jpg"></div></div>
<div class="poster-left"><div class="poster-left-img"><img src="img/2.jpg"></div></div>
<div class="poster-right"><div class="poster-right-img"><img src="img/3.jpg"></div></div>
right now everything is scrolling up together
You can achive this with pure css.
The trick is to use the sticky attribute of the position property and define the bottom property. This way all images are sticking to the bottom of the page. If the value of the bottom property is less than the image height, the top of all the images are visible all the time. The images below the first one are outside of view (technically) but will be visible because of the sticky attribute. Margin-bottom defines the margin between the images.
When the user starts scrolling, one image after the other is scolling into the view and is released from the position at the bottom and will scroll freely to the top.
position: -webkit-sticky;
position: sticky;
bottom: -200px;
margin-bottom: 300px;
The rest is normal positioning.
I created a little fiddle to show a full example. You can build your solution from there very easily.
I said CSS only, but used javascript in the fiddle. The code is only to give all elements a z-index. You can do this when generating the page or with nth-child in the css. But I didn't want to do that. Call it laziness ;)
You can use jquery to do this
var src = ['url_image1.jpg', 'url_imafe2.jpg'];. // Array of source of images
var i = 0;
$(document).ready(function() {
$(window).bind('mousewheel',function() {
$('#imgs').hide().delay(1000).fadeIn();
if (i==1){
$('#imgs').attr('src', src[i]);
i=0;
}
else {
$('#imgs').attr('src', src[i]);
i=1;
}
});
});
<style>
div{height:500px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="imgs" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg">
</div>
I'm essentially displaying a banner image on a page. At the base of that image is an overlay (the abs. pos. div) with a semi-transparent background image to make a "see through" effect. Everything is positioned properly and working fine except the overlay at a width of 100% expands outside of my container div. I've tried setting the overflow to hidden of the container div but that does not seem to work. My parent container has a position relative as well. This is responsive so the overlay with need to shrink and expand to the image width. Here's my code:
.hero-img-wrap {
position: relative;
margin-top: 35px;
padding-left: 15px;
padding-right: 15px;
}
.hero-img-wrap img {
width: 100%;
height: auto;
}
.hero-img-wrap .trans-overlay {
position: absolute;
bottom: 0;
z-index: 9;
height: 19px;
background-image: url('../images/semi_transparent_white.png');
width: 100%;
}
<div class="hero-img-wrap">
<img src="images/banner_image.jpg" alt="">
<div class="trans-overlay"></div>
</div>
I could pull this off with JQuery but I'd like to avoid that. For what it might be worth - this code is within a Bootstrap 3 column.
Since you've defined the height, why not a negative value
position: relative;
top: -19px;
Just a thought, heres a fiddle for ya
http://jsfiddle.net/g11yggap/
Try
Width:inherit;
On overlay div
I am relatively new to front-end dev so a bit lost as to how i can go about this. I created a container that contains a slider and some images. My supervisor has a huge screen so obviously there will be empty space at the bottom of the screen. So he doesn't want that. Instead he wants the container to be centered horizontally and vertically based on the size of the user's screen.
How can I do this properly with as minimal code as possible? I believe there is jQuery plugin but wanted to see if there is a better way or if doing this makes sense at all or not?
Due to the flow-based nature of CSS, without Javascript this can only be done if the vertical size of the centered element is fixed, by applying a position:absolute' andtop:50%` within a fixed container, and then use negative margin to offset the container. Click here for JSFiddle Sample.
Alternatively the same effect can be reached by using display:table-cell, but that's kind of messy and loses you a lot of flexibility. Sample already supplied in the other answer here so I'll save myself the effort :)
You can do it easily using a vertical-align property.
Since vertical-align works the desired way way only in a table cell, this trick with display property can give you the desired effect.
#yourDiv {
// give it a size
width: 100px;
height: 100px;
margin: 0 auto;
}
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
See a fiddle with demo.
Try this:
HTML:
<div class="center"></div>
CSS:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: red;
}
Demo: http://jsfiddle.net/WDth4/
Exactly Center an Image/Div Horizontally and Vertically:
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/
I have a main container DIV for the content of my page, that is horizontally centered:
HTML:
<div id="master_container">
.. my content here ...
</div>
CSS:
#master_container {width: 960px; margin: 0 auto;}
Client wants to have adverts at both sides of the page, outside of the master_container. I tried various CSS to try and position those divs but when window is resized, they overlap with the master_container. Also, I am asked to have them float when the page is scrolled.
Can anyone please direct me to the correct solution? Thanks in advance...
>> DEMO <<
[Note that I used a 700px width for #master_container]
1. Positioning
Most important CSS is the styling and positioning of the adverts, which I have given the class .advertis:
.advertis {
position: fixed; /*creates floating effect */
top: 20px; /* divs will always stay 20px from top */
width: 220px;
padding: 10px;
background: white;
border: #ccc 1px solid;
border-radius: 4px;
}
#left {
margin-left: -613px; left: 50%; /* positioning of left ads */
}
#right {
margin-right: -613px; right: 50%; /* positioning of right ads */
}
I can hear you wonder: how do I calculate the margin that I need? Simple:
Get width of #master_container (including padding) = 720px. Divide it by 2 = 360px. Add the width of the ad (including padding and border) = 242px. 240px + 360px = 600px. Add the space that you want to have between the container and the ad = 11px (in my case).
242px (full width of ad) + 360px (half of container) + 11px (space between ad and container) = 613px (margin needed)
2. Hiding when window too small
Now you want to hide the ads when they don't fit in the window any more. You have options for that:
Media Queries
jQuery (or JavaScript or another of its libraries)
In the first jsFiddle I have used media queries (not supported by all browsers). In this Fiddle, I have used jQuery to get the same effect.
function widthCheck() {
var ads = $(".advertis");
if ($(window).width() < 1225) {
ads.hide();
}
else {
ads.show();
}
}
widthCheck(); // Execute onLoad
$(window).resize(function(){
widthCheck(); // Execute whenever a user resizes the window
});
It's up to you to choose which one you want to use. I'll list a few pros and cons, so you can choose for yourself.
Pros media queries:
modern, progressive
works, even when JS is disabled
Cons:
not supported by all browsers
Pros jQuery:
supported by (as good as) all browsers
Cons:
does not work when JS is disabled
not as progressive as media queries
How about that:
Demo: http://jsfiddle.net/insertusernamehere/Ct5BM/
HTML
<div id="master_container">
<div class="ad left">Advertising</div>
<div class="ad right">Advertising</div>
The real content …
</div>
CSS
<style>
body {
width: 100%;
}
#master_container {
position: relative;
width: 960px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
}
div.ad {
position: absolute;
top: 0px;
width: 200px;
height: 400px;
margin: 0px 0px 0px 0px;
border: 1px solid blue;
}
div.ad.left {
left: -220px;
}
div.ad.right {
right: -220px;
}
</style>
Edit: How it works
When you position the main element relative it's not taken out of its flow within its content but it opens a new space for positioning, z-indexes etc. So a child element within this container which has an absolute position is related to the position of its parent. So in this example the "ad" element has a width if 200px and with left -220px it's moved outside the container on the left side with a little "margin" added.
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.