DISABLE ADBLOCK

ADBlock is blocking some content on the site

ADBlock errore

css + form example similar to outlook.com's layout [closed]

StackOverflow https://stackoverflow.com/questions/13216740

Question

Can anyone help by providing some samples, or examples to generate a css class to re-produce the effect similar to outlook.com's login page?

Where the page is centralized, splitted into 2 halves, the left side containing an image, and the right side with the login fields

Solution

not a downvoter, had a look at the Outlook site; nearly threw up when I had a look at the source code Outlook.com:

and their css is well... see for yourself.

What I'd do is build a page with two colums of predefined width (can use absolute values in this case). So a class of column width in pixels, and have this assigned to two sections - one featuring the image, and the other featuring the login/ everything else. If the page is resized to be smaller one should appear below the other - which is nice degrading.

You possibly could have an image and a login box without using CSS and somehow configure the login box to be middle aligned with the image - but it's a bad solution and certainly using deprecated code.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow