ansaurus

Question

how to position a div in the center and hide it?

Answer 1

+2 A:

You could try using a modal form for your login. jquery ui do a nice one http://jqueryui.com/demos/dialog/#modal-form which will open up a form for you to use in the centre of the page.

Michael Ciba 2009-12-03 22:21:13

Answer 2

+2 A:

Is this what you want? Note the CSS comment. It's important to get the div centered. The "trick" that make the float above the other parts of your site, is position: absolute.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Centering a DIV with CSS</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;
    </script>
    <style type="text/css">

        .center_center {
            position: absolute;
            background-color: #ccc;
            border: 1px solid #000;
            width: 300px;
            height: 200px;
 /* notice: margins are -(value/2) */
 margin-left: -150px;
            margin-top: -100px;
            top: 50%;
            left: 50%;
            display: none;
        }
    </style>
</head>
<body>
    <div id='login' class="center_center">
        Login content
    </div>

 <p><input type="button" value="Login" onclick="$('#login').show()" /></p>
</body>
</html>

Mads Mobæk 2009-12-03 22:27:05

thank you so much! worked like a charm!

fayer 2009-12-03 22:32:19

Great! I see you are new to Stack Overflow. If this solution works for you, it's common practise to mark this solution as accepted by clicking the checkmark next to my answer. You can also vote answers up by clicking the up-arrow next to the question. Thanks.

Mads Mobæk 2009-12-05 17:31:01

ansaurus

tags:

views:

answers:

how to position a div in the center and hide it?

related questions