aqui les dejo el codigo..
[CSS]
<style type="text/css">
#fyh{
position:absolute;
margin: 0 10px 0 0;
height:auto;
top:0px;
right:0px;
font-family:martina;
margin-top:80px;
}
#cerrar{
width:100px;
height:20px;
position:relative;
float:right;
}
#cerrar a{
font-family:martina;
color:white;
}
#cerrar a:hover{
color:white;
}
#header{
width:100%;
height:100px;
background-image: url('css/photo/head2.jpg');
position:relative;
}
#footer{
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
margin:auto;
width:800px;
text-align: center;
background-image: url('css/photo/footer1.jpg');
color: #fff;
height: 2em;
margin-top: 10px;
position:relative;
}
* {
margin: 0;
outline: 0 none;
}
#contenido{
width:100%;
height:auto;
position:relative;
margin-top:0px;
}
html{
height: 100%;
outline: 0 none;
background:white;
color:black;
}
.corte{
clear: both;
padding-top:2em;
position:relative;
}
#contenedor{
min-height:100%;
width:1000px;
//height:auto;
margin: 0 auto;
}
.mensaje-no-leido{
background: url('icon-16-messages.png') no-repeat scroll 3px 3px transparent;
padding: 4px 10px 0 22px;
font-family: Arial,Helvetica,sans-serif;
color:black;
font-size:10px;
}
#caja-menu{
background: none repeat scroll 0 0 #f0f0f0;
border: 1px solid #CCCCCC;
height:26px;
}
#derecha{
float:right;
}
#caja-menu .logout{
background: url('icon-16-logout.png') no-repeat 3px 3px transparent;
}
#caja-menu span{
display:block;
float:left;
line-height:16px;
margin-bottom:5px;
padding: 4px 10px 0 22px;
font-size:11px;
}
a:visited{
color:#0B55C4;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
.logout{
}
table.adminlist tbody tr td {
// background: none repeat scroll 0 0 ;
border: 1px solid #FFFFFF;
height: 25px;
}
.row1{
background-color: #F9F9F9;
font-size:11px;
font-weight:bold;
margin-left:6px;
border:none;
}
.row0{
background-color: #EEEEEE;
font-size:11px;
font-weight:bold;
margin-left:6px;
border:none;
}
.pregunta{
margin-left:6px;
}
table.adminlist .pagination {
display: table;
margin: 0 auto;
padding: 0;
}
.pagination div.limit {
font-size:11px;
float: left;
height: 22px;
line-height: 22px;
margin: 0 10px;
}
input, select {
border: 1px solid silver;
font-size: 10px;
}
table.adminlist thead th {
background: none repeat scroll 0 0 #F0F0F0;
border-bottom: 1px solid #999999;
border-left: 1px solid #FFFFFF;
color: #666666;
text-align: center;
}
.container {
text-decoration: none;
}
table.adminlist {
background-color: #E7E7E7;
border-spacing: 1px;
color: #666666;
width: 30%;
margin-top:20px;
}
.title{
}
body {
font-family: Arial,Helvetica,sans-serif;
font-size:11px:
}
a{
color: #0B55C4;
text-decoration: none;
font-size:11px;
font-weight:bold;
}
#divtapa{
position:fixed;
width:190px;
height:100px;
z-index:999;
background-color:#FFFFFF;
display:none;
}
#mostrame{
position:relative;
width:190px;
height:100px;
display:none;
width:200px;
height:100px;
}
.imgs{
border:none;
}
</style>
[/CSS]
Código HTML:
<html>
<head>
<title>Principal-Admin</title>
<script type="text/javascript" src="jquery-1.5.js"></script>
<script language="JavaScript" type="text/javascript">
function confirmation() {
var answer = confirm("Leave tizag.com?")
if (answer){
alert("Bye bye!")
window.location = "http://www.google.com/";
}
else{
alert("Thanks for sticking around!")
}
}
$(document).ready(function() {
// Muestra y oculta los menús
$('ul li:has(ul)').hover(
function(e)
{
$(this).find('ul').slideDown();
},
function(e)
{
$(this).find('ul').slideUp();
}
);
});
</script>
<script>
$(document).ready(function(){
//al hacer click en mostrar:
$('#mostrar').click(function(evento){
evento.preventDefault()
$('#mostrame:hidden').slideDown();
});
//al hacer click en ocultar:
$('#ocultar').click(function(evento){
evento.preventDefault()
$('#mostrame:visible').slideUp();
});
});
function todos(chkbox)
{
for (var i=0;i < document.forms[0].elements.length;i++)
{
var elemento = document.forms[0].elements[i];
if (elemento.type == "checkbox")
{
elemento.checked = chkbox.checked
}
}
}
</script>
<script>
function enviar_formulario(){
document.formulario1.submit()
}
</script>
</head>
<body>
<div id="contenedor">
<div id="header">
<div id="fyh">
Hoy es: 16/03/2011 </div>
</div>
<div id="contenido">
<div id="caja-menu">
<ul>
<li>
<a href="#">Usuarios</a>
<ul>
<li><a href="principal.php?mod=usuarios">Crear usuario</a></li>
<li><a href="usuarios.php?mod=eliminarsuarios">Eliminar</a></li>
<li><a href="#">Otra opcion</a></li>
</ul>
</li>
<li>
<a href="#">Modulos</a>
<ul>
<li><a href="principal.php?mod=contenido">Gestion</a></li>
<li><a href="principal.php?mod=contenidomodelo">Modelo</a></li>
</ul>
</li>
<li><a href="#">Encuesta</a>
<ul>
<li><a href="principal.php?mod=encuestanueva">Nueva</a></li>
<li><a href="principal.php?mod=encuestamodelo">Modelo</a></li>
</ul>
</li>
<li><a href="#">Mensajeria</a>
<ul>
<li><a href="principal.php?mod=mensajesnuevos">Mensajes nuevos</a></li>
<li><a href="principal.php?mod=mensajes">Todo los mensajes</a></li>
</ul>
</li>
</ul>
<div id="derecha">
<span class='mensaje-no-leido'>Tiene 4 mensajes nuevos</span> <span class="logout">
<a href="destruir.php" >Cerrar sesion</a>
</span>
</div>
</div>
<div id="arriba">
<div id="secciones" style="
width:100%;
height:200px;
font-family:martina;">
<a href='#' id='mostrar'/><img src='addusers.png' title='Nuevo' class='imgs' /></a><a href='javascript:enviar_formulario()' id='eliminar'><img src='trash.png' height='48' width='48' class='imgs' title='Eliminar'/></a><br><table border='1' cellspacing='0'cellpadding='0' class='adminlist'><thead><tr><th width='5'> # </th><th width='20'><input type='checkbox' name='todos' value='' onClick='todos(this);'></th><th class='title'><a href='usuarios.php?order=pregunta' title='Haz click para ordenar por esta columna'>Nombre</a></th><th align='center' width='5%'><a href='#' title='Haz click para ordenar por esta columna'>Permiso</a></th></tr></thead><tfoot><tr><td colspan='7'><del class='container'><div class='pagination'><div class='limit'>Mostrar num.<select id='limit' class='inputbox' size='1' name='limit'><option value='5'>5</option><option value='10'>10</option><option value='15'>15</option><option selected='selected' value='20'>20</option><option value='30'>30</option><option value='50'>50</option><option value='100'>100</option><option value='0'>Todas</option></select></div></div></del></td></tr></tfoot><tbody><form action='usuarios.php' name='formulario1' method='POST'><tr class='row1'><td align='center'>1</td><td><input type='checkbox' name='elegir[]' value='13'></td><td><span class='pregunta'><a href='encuestacms.php?option=13'>juan</a></span></td><td align='center'>777</td><tr class='row0'><td align='center'>2</td><td><input type='checkbox' name='elegir[]' value='14'></td><td><span class='pregunta'><a href='encuestacms.php?option=14'>juan22</a></span></td><td align='center'>222</td></div></form><form action ='usuarios.php' method='POST' id='formnew' name='form11'><div id='mostrame'>Usuario: <input type='text' name='usuarios'><br>Contraseña:<input type='text' name='contrasena'><br>permiso:<input type='text' name='permiso'><br><input type='submit' value='aceptar' name='boton'><a href='#' id='ocultar' />Ocultar</a></div></form></form>no exuste</table><br><br>
</div>
<div class="corte"></div>
</div>
</div>
</div>
<div id="footer">
<p style="font-size:18px;color:black;">Juan Carmena © 2010 Todos los derechos reservados.</p>
</div>
</body>
</html>