How do i deactivate a screen using a div/layer when u need to log in?

[pixel69]

This might sound confusing:
How do i deactivate a screen using a div/layer when u need to log in?

I've seen it on other sites where there is a layer/div (semi transparent) overlays the screen and a login screen appears right on the top. Once you login the semi transparent screen/layer dissapears!

 

[SPYDERIX]

Basically the overlay would be a div or whatever and contain the login form. The css background property would be an image and you could make a semi-transparent png set to 75% black opacity to give the effect of dimming the site.

NATE

http://www.mainframehosting.net

Got a question? Search G O O G L E first.

 

[pixel69]

Can you maybe give me an example?

 

[SPYDERIX]

Ok, first make your image. Open photoshop or whatever 1px x 1px fill with black then set to 75% and save as a png 24 with transparency on.

Next do your div with the form in it:

<div id="login_overlay">
<!-- form goes here -->
</div>

#login_overlay
	{
	margin: 0px 25px 25px 0px;
	background-image: url(../images/your.png);
	border: solid 1px #ffffff;
	width: 150px;
	text-align: left;

	/* add in your positioning code with z-index to 		float above everything */
	}

* html #login_overlay
	{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/your.png", sizingMethod="scale");
	}

That last bit of css may look whacked to you but that's b/c it's the IE hack to get transparent pngs to view properly.

I can't help you with the positioning of the form though b/c I don't do css layouts, but someone can help you with that. I can tell you though that once logged in just set the visability to hidden on the div.

Hope this helps!

NATE

http://www.mainframehosting.net

Got a question? Search G O O G L E first.

 

[pixel69]

Thanks!!!
I modified it a bit, but it is working!

Thanks mate!

 

[SPYDERIX]

No prob!

NATE

http://www.mainframehosting.net

Got a question? Search G O O G L E first.

 

[SPYDERIX]

I actually like what you are doing here though. Do you have a url to show with this? I think I might like to do something similar with regards to logging in. Great way to draw attention to it.

NATE

http://www.mainframehosting.net

Got a question? Search G O O G L E first.

 

[pixel69]

Hehe,

Unfortunatly i used it on a intranet web application, so it's not accessable on the internet. I will see if i can get a screenshot and show you!!

 

[SPYDERIX]

Can you show me your positioning code too?

NATE

http://www.mainframehosting.net

Got a question? Search G O O G L E first.