CODEWITHSUNDEEP
javascriptjqueryhtmlcss
fayer
fayer

Reputation: 17

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

i want to make a login page but it is hidden in the center of the main page.

and then i use jquery to make the div that surrounds it visible and it will be like the login page at www.bytes.com.

but i cant figure it out how to center it with css. it doesnt work without affecting the main pages div positions.

i just want it to float over the main page. someone?

Upvotes: 0

Views: 1568

Answers (2)

Mads Mobæk
Mads Mobæk

Reputation: 35950

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">
<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">
    </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>

Upvotes: 3

Michael Ciba
Michael Ciba

Reputation: 561

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.

Upvotes: 2

Related Questions