Como Hacer Esto con Div

j84625 · #1 (**permalink**) 19/02/2010, 14:38

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>

<style type="text/css">
<!--
html,body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height:100%;
	width:100%;

}
.Tabla01 {
	height: 100%;
	width: 100%;
	background-color: #CCCCCC;
}
.Tabla02 {
	height: 100px;
	width: 100px;
	background-color: #999999;
}
</style>
</head>

<body>
<table class="Tabla01">
  <tr>
    <td align="center" valign="middle"><table class="Tabla02">
      <tr>
        <td align="center" valign="middle">Centro</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

salvatro · #2 (**permalink**) 19/02/2010, 19:39

No entiendo, solo le pones la clase a una div y listo o que quieres hacer ?

Joseph · #3 (**permalink**) 19/02/2010, 19:57

Ya lo tienes hecho solo debes cambiar algunas cosas, haces un documento .css (tupagina.css) en un editor de texto, dreamweaver o cualquiera que uses, con el siguiente código:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height:100%;
width:100%;

}
#Tabla01 {
height: 100%;
width: 100%;
background-color: #CCCCCC;
}
#Tabla02 {
height: 100px;
width: 100px;
background-color: #999999;
}

y en el html que desees aplicar ese estilo:

dentro del head colocas

<link rel="stylesheet" href="tupagina.css" type="text/css" />

y en el body:

<div id="Tabla01 ">tu información aquí</div>
<div id="Tabla02 ">tu información aquí</div>

creo que eso es lo que necesitabas, no?

j84625 · #4 (**permalink**) 21/02/2010, 14:45

Cita:

Iniciado por Joseph

Ya lo tienes hecho solo debes cambiar algunas cosas, haces un documento .css (tupagina.css) en un editor de texto, dreamweaver o cualquiera que uses, con el siguiente código:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height:100%;
width:100%;

}
#Tabla01 {
height: 100%;
width: 100%;
background-color: #CCCCCC;
}
#Tabla02 {
height: 100px;
width: 100px;
background-color: #999999;
}

y en el html que desees aplicar ese estilo:

dentro del head colocas

<link rel="stylesheet" href="tupagina.css" type="text/css" />

y en el body:

<div id="Tabla01 ">tu información aquí</div>
<div id="Tabla02 ">tu información aquí</div>

creo que eso es lo que necesitabas, no?

has visto en vista previa las tablas?

Joseph · #5 (**permalink**) 21/02/2010, 18:53

No la verdad lo realicé acá sin verificarlo, lo chequeo luego y te aviso

ArturoGallegos · #6 (**permalink**) 21/02/2010, 22:10

y si te das una revisada al foro? si observas tu código lo único especial que necesitas es centrar un div horizontal y verticalmente

http://www.forosdelweb.com/f53/centr...te-div-541036/

j84625 · #7 (**permalink**) 22/02/2010, 15:22

Cita:

Iniciado por Ag666

y si te das una revisada al foro? si observas tu código lo único especial que necesitas es centrar un div horizontal y verticalmente

http://www.forosdelweb.com/f53/centr...te-div-541036/

las tablas trabajan con porcentajes por eso para mi es complicado hacerlo en div

ArturoGallegos · #8 (**permalink**) 22/02/2010, 17:06

Cita:

Iniciado por j84625

las tablas trabajan con porcentajes por eso para mi es complicado hacerlo en div

?¿ no entiendo que tiene que ver el que tus tablas usen porcentajes. aparte la tabla que tu insertastas en el centro esta en pixeles, si supiste usarlos una vez no veo porque no puedas usarlo mas seguido.

si le das varias repasadas al post que te pase creo que no tendras problemas en entender su logica.

Carlangueitor · #9 (**permalink**) 23/02/2010, 00:56

Cita:

Iniciado por j84625

las tablas trabajan con porcentajes por eso para mi es complicado hacerlo en div

Los DIVs también pueden trabajar en porcentajes

Saludos

j84625 · #10 (**permalink**) 25/02/2010, 09:30

listo ya lo hice