CODEWITHSUNDEEP
phpjavascriptjquery
obinoob
obinoob

Reputation: 657

How to place DIV content on TOP of a Table

I need to place a login form which is wrapped in a div on top of a table.

<?php
session_start();
$_SESSION['login_status']=null;
?>
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Somepage</title>

<script type="text/javascript" src="classes/jquery.js"></script>

<script>
<!--
$(document).ready(function() {

    $('#register').hide();
    $('#login').hide();
    
    $("a:#loginLnk").click(function(){
        $('#register').fadeOut('slow', function(){
            $('#login').fadeIn('slow');
        });
    });

    $("a:#registerLnk").click(function(){
        $('#login').fadeOut('slow', function(){
            $('#register').fadeIn('slow');
        });
    });

    return false;
});

//-->
</script>

</head>
<body>
    <table id="wrapper">
        <tr>
            <td>
                <!-- Banner -->
                <div>
                    <img src="images/banner.gif" />
                </div> <!-- Menu -->
                <div class="navBar">
                <?php
                include 'menu.php';
                ?>
                </div> <!-- Corpo -->
                <div id="body">
                <?php
                include 'body.php';
                ?>
                
                <!-- 
                    LOGIN OR REGISTER
                 -->
                    <div class="box" id="login">
                        <form action="" method="post">
                        <fieldset>  
                            <label for="username">Nome de utilizador:</label>
                            <input name="username" type="text" />
                            <label for="password">Palavra-passe:</label>
                            <input name="password" type="password" /> 
                            <input type="submit" value="Entrar" />
                        </fieldset> 
                        </form>
                    </div>
                    
                    <div class="box" id="register">
                        <form action="" method="post">
                        <fieldset>  
                        
                            <label for="name">Nome Completo:</label>
                            <input name="name" type="text" />
                        
                            <label for="mail">E-Mail:</label>
                            <input name="mail" type="text" />
                            
                            <label for="username">Nome de Utilizador:</label>
                            <input name="username" type="text" />
                                    
                            <label for="password">Palavra-passe:</label>
                            <input name="password" type="password" /> 
                            <br/>
                            <input type="submit" value="Registar" />
                            
                        </fieldset> 
                            
                        </form>
                    </div>
                
                </div>
                
                <!-- Footer -->
                <div class="navBar" id="footer">
                <?php
                include 'footer.php';
                ?>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Upvotes: 1

Views: 675

Answers (4)

clairesuzy
clairesuzy

Reputation: 27644

how about insertBefore()

with the required divs being inserted just before the #body

$('#register').hide();
$('#login').hide();

$("#loginLnk").click(function(){
    $('#register').fadeOut('slow', function(){
        $('#login').insertBefore('#body').fadeIn('slow');
    });
});

$("#registerLnk").click(function(){
    $('#login').fadeOut('slow', function(){
        $('#register').insertBefore('#body').fadeIn('slow');
    });
});

or if you really want it right on top of the table.. .insertBefore("table")

Upvotes: 0

Marc B
Marc B

Reputation: 360762

Wrap your table and login div in another div, then you can use absolute positioning and z-index on the login form.

<div style="position: relative">
   <div id="login" style="z-index: 0">
      ...
   </div>
   <div id="register" style="position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 1">
      ...
   </div>
</div>

This'd make the registration box completely cover up the login box.

Upvotes: 0

BentOnCoding
BentOnCoding

Reputation: 28208

You could use a Jquery Dialog or modify the z-index of the content you wish to sit on top.

Upvotes: 0

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

style.css

.box { position: absolute; top: 200px; left: 45%; }

Upvotes: 1

Related Questions