Alineacion en pagina
Publicado por soFila (4 intervenciones) el 31/03/2009 17:34:19
Hola...adjunto pagina en html y su correspondiente .css, el problema es que no logro alinear en el centro de la pagina el contenido, es una tabla con imagenes, me queda muy a la derecha y abajo, no logor que quede al lado de las barra Nuestra Empresa y Nuestros Productos; tampoco me queda bien ubicado el pie de pagina,si alguien m puede ayudar le agradezco!!!
<head>
<title>Documento sin título</title>
<link rel="stylesheet" href="TP 2/div.css"/>
</head>
<body>
<div id="encabezado">
<div id="logo" >
<img src="TP 2/logo_probar.png" alt="" name="logo" width="437" height="120" align="absmiddle"/> </div>
<div id="ingreso">
<form method="post" action="TP 2/logueo.php" onsubmit="return validarUsu()" >
<table width="220" border="0">
<tr>
<td><label><span class="Estilo11">Usuario</span></label></td>
<td><input type="text" name="usuario"/></td>
</tr>
<tr>
<td><label><span class="Estilo11">Contraseña</span> </label></td>
<td><input type="text" name="contraseña"/></td>
</tr>
</table>
<div align="center">
<input name="submit" type="button" value="Enviar"/>
</div>
<ul class="Estilo8">
<li><a href="TP 2/recuperarPass.html">Olvide Mi Contraseña</a></li>
<li><a href="TP 2/registrar.html">Registrarme</a></li>
</ul>
</form>
</div>
</div>
<div id="navegación">
<a href="TP 2/index.html">Inicio</a>/Página Principal
</div>
<ul class="empresa">
<h3>Nuestra Empresa</h3>
<ul><li><a href="TP 2/quien.html">Quiénes Somos</a></li>
<li><a href="TP 2/contactar.html">Contáctenos</a></li>
<li><a href="TP 2/comprar.html">Cómo Comprar</a></li>
<li><a href="TP 2/buscar.html">Buscar</a></li>
<li><a href="TP 2/mapa.html">Mapa del Sitio</a></li>
</ul>
</ul>
<ul class="productos">
<h3>Nuestros Productos</h3>
<ul class="menu">
<li><a href="TP 2/accesorios.html">Ac de Escritorio y útiles</a>
<ul>
<li>Todos</li>
<li>Clips y Ganchos</li>
<li>Elementos de Medición</li>
<li>Elementos de Corte</li>
<li>Gomas</li>
<li>Sacapuntas</li>
<li>Sellos</li>
</ul>
</li>
<li><a href="TP 2/adhesivos.html">Adhesivos</a>
<ul>
<li>Todos</li>
<li>Barra</li>
<li>Cinta</li>
<li>Contacto</li>
<li>Líquido</li>
</ul>
</li>
<li><a href="TP 2/agendas.html">Agendas</a>
<ul>
<li>Todos</li>
<li>Almanaque</li>
<li>Indice Telefónico</li>
<li>Repuestos</li>
<li>Poqket</li>
</ul>
</li>
<li><a href="TP 2/archivos.html">Archivo</a>
<ul>
<li>Todos</li>
<li>Biblioratos</li>
<li>Cajas</li>
<li>Carpeteros</li>
<li>Clasificador</li>
</ul>
</li>
<li><a href="TP 2/escolares.html">Escolares</a>
<ul>
<li>Todos</li>
<li>Carpetas</li>
<li>Cuadernos</li>
<li>Cartucheras</li>
<li>Folios</li>
<li>Etiquetas</li>
<li>Mochilas</li>
<li>Portafolios</li>
</ul>
</li>
<li><a href="TP 2/informatica.html">Informática</a>
<ul>
<li>Todos</li>
<li>Cartuchos y Tonners</li>
<li>Estuches</li>
<li>Medios de Grabación</li>
<li>Mouse</li>
<li>Teclado</li>
</ul>
</li>
<li><a href="TP 2/oficina.html">Insumos de Oficina</a>
<ul>
<li><a href="TP 2/of-all.html">Todos</a></li>
<li><a href="TP 2/of-abro.html">Abrochadoras</a></li>
<li><a href="TP 2/of-fi.html">Ficheros</a></li>
<li><a href="TP 2/of-per.html">Perforadoras</a></li>
<li><a href="TP 2/of-cal.html">Calculadoras</a></li>
</ul>
</li>
<li><a href="TP 2/resmas.html">Resmas</a>
<ul>
<li><a href="TP 2/res-all.html">Todos</a></li>
<li><a href="TP 2/res-a3.html">A3</a></li>
<li><a href="TP 2/res-a4.html">A4</a></li>
<li><a href="TP 2/res-car.html">Carta</a></li>
<li><a href="TP 2/res-ofi.html">Oficio</a></li>
</ul>
</li>
</ul>
</ul>
<table border="3" bordercolor="#6633FF" class="contenido">
<tr>
<td height="58"><img src="" width="125" height="120" /></td>
<td><img src="TP 2/images2.jpg" width="125" height="120"/></td>
</tr>
<tr>
<td height="28"><div align="left"><span class="Estilo14">Cartucho HP 21 de color negro. Para impresora
HP Deskjet 3940,3920 Printers, HP PSC 1400</span></div></td>
<td><div align="left"><span class="Estilo14">Resma Autor por 500 hojas de 80 gr/m2. Tamaño A4(210x290). Para impresora multifunción </span></div></td>
</tr>
<tr>
<td height="29"><div align="right" class="Estilo16">$58,92</div></td>
<td><div align="right" class="Estilo17">$15,33</div></td>
</tr>
<tr>
<td><img src="TP 2/images3.jpg" width="125" height="120" /></td>
<td><img src="TP 2/images4.jpg" width="125" height="120"/></td>
</tr>
<tr>
<td><span class="Estilo14">Bibliorato oficio, forrado negro. Palanca alta, 75 mm.</span> </td>
<td><span class="Estilo14">Marcador Edding retráctil para pizarra E12. Con trazo de 1,5 a 3mm. Tinta al alcohol, apta para borrado en seco. Color negro. Por unidad. </span></td>
</tr>
<tr>
<td><div align="right" class="Estilo17">$13,18</div></td>
<td><div align="right" class="Estilo17">$14,02</div></td>
</tr>
</table>
<div class="piepagina"> Nombre - Contacto - Direccion<br/>
Tel- e-mail: <a href="mailto:[email protected]"> [email protected]</a> </div>
</body>
</html>
_______________________________________________________________________
/* CSS Document */
.Estilo8 {font-size: 12px}
.Estilo11 {color: #FFFFFF; font-weight: bold; }
.Estilo14 {font-size: 12px; color: #888888; }
.Estilo16 {color: #000000;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;}
.Estilo17 {font-family: Arial, Helvetica, sans-serif;
font-weight: bold;}
body{line-height: 1.166;
margin: 0px;
padding: 0px; }
h3{ font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic;
color:#6666FF;}
.formu{background-color:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:500px;
float:right;
margin-top:120px;
margin-left:255px;}
.tablaProd{font-family:Verdana, Arial, Helvetica, sans-serif;
width:400px;
float:right;}
#encabezado{position:relative;
background-color:#6633CC;
height:120px;
width:800px; }
#logo{ background-color:#CCCCCC;
float:left;
height:120px;
width:550px;
margin: 0px 0px;
padding: 0px 0px 0px 0px;}
#ingreso{ height:120px;
float:right;
width:20%;
margin:0px;
padding: 0 3px 0 0; }
#ingreso form{
margin:0px;
height:120px;
background-color:#CCCCCC;
width:230px;}
#ingreso form li{
color:#000000;}
ul.empresa{
width:250px;
margin:0 180px 0 0;
float:left;
border-bottom:3px solid #6633CC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;}
ul.empresa ul{margin:0px;
list-style:none;
border-top:2px dotted #CCCCCC; }
ul.empresa li{border-bottom:2px dotted #CCCCCC;
}
ul.empresa a:link{padding: 2px 0px 2px 5px;
color: #666666;
text-decoration: none;
/*background-color: #FFFFFF;*/
/*border-top: 1px solid;*/
width: auto;}
ul.empresa a:hover{
width:100%;
border-top: 1px solid;
padding: 2px 0px 2px 10px;
color: #FFFFFF;
background-color: #ADB0DC;}
ul.productos{
width:250px;
float:left;
margin:0 400px 0 0;}
ul.productos a:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#999999;}
ul.menu{
list-style-image:url(flecha.png);}
ul.menu ul /* Para todos los ul debajo del ul.menu */
{
display:none;
background-image:url(barra_li.png);
background-repeat:repeat-y;
background-position:left;
/*list-style-position:outside;*/}
/* Esto afecta a todos los ul inmediatamente debajo (el > ) de un li que a su vez esté dentro de un ul.menu */
li.menu{list-style:none;}
ul.menu li:hover > ul{
display:block;
list-style:none;
list-style-image:none;}
.parrafo{
border-color:#6633FF;
font-family:Verdana, Arial, Helvetica, sans-serif;
float:right;
width:60%;
padding:0;
margin:0;
text-align:justify;}
.contenido{
float:right;
width:50%;
margin: 0;
padding: 0;
height:auto; }
#navegación{
font-style:oblique;
font-weight:bold;
font-family:Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 0 0;
height:10px;
width:800px;
border:inset #DDDDDD;
background-color:#DDDDDD; }
.piepagina{
background-color:#6633CC;
color: #FFFFFF;
font-size:12px;
width: auto;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
border: medium groove #CCCCCC;
margin-top: 0.4em;
margin-right: 0.1em;
margin-bottom: 0.5em;
margin-left: 0.1em;
text-align: center;
padding-top: 0.3em;
padding-right: 0.75em;
padding-bottom: 0.4em;
padding-left: 0.3em;
position:relative;
cursor: auto;}
<head>
<title>Documento sin título</title>
<link rel="stylesheet" href="TP 2/div.css"/>
</head>
<body>
<div id="encabezado">
<div id="logo" >
<img src="TP 2/logo_probar.png" alt="" name="logo" width="437" height="120" align="absmiddle"/> </div>
<div id="ingreso">
<form method="post" action="TP 2/logueo.php" onsubmit="return validarUsu()" >
<table width="220" border="0">
<tr>
<td><label><span class="Estilo11">Usuario</span></label></td>
<td><input type="text" name="usuario"/></td>
</tr>
<tr>
<td><label><span class="Estilo11">Contraseña</span> </label></td>
<td><input type="text" name="contraseña"/></td>
</tr>
</table>
<div align="center">
<input name="submit" type="button" value="Enviar"/>
</div>
<ul class="Estilo8">
<li><a href="TP 2/recuperarPass.html">Olvide Mi Contraseña</a></li>
<li><a href="TP 2/registrar.html">Registrarme</a></li>
</ul>
</form>
</div>
</div>
<div id="navegación">
<a href="TP 2/index.html">Inicio</a>/Página Principal
</div>
<ul class="empresa">
<h3>Nuestra Empresa</h3>
<ul><li><a href="TP 2/quien.html">Quiénes Somos</a></li>
<li><a href="TP 2/contactar.html">Contáctenos</a></li>
<li><a href="TP 2/comprar.html">Cómo Comprar</a></li>
<li><a href="TP 2/buscar.html">Buscar</a></li>
<li><a href="TP 2/mapa.html">Mapa del Sitio</a></li>
</ul>
</ul>
<ul class="productos">
<h3>Nuestros Productos</h3>
<ul class="menu">
<li><a href="TP 2/accesorios.html">Ac de Escritorio y útiles</a>
<ul>
<li>Todos</li>
<li>Clips y Ganchos</li>
<li>Elementos de Medición</li>
<li>Elementos de Corte</li>
<li>Gomas</li>
<li>Sacapuntas</li>
<li>Sellos</li>
</ul>
</li>
<li><a href="TP 2/adhesivos.html">Adhesivos</a>
<ul>
<li>Todos</li>
<li>Barra</li>
<li>Cinta</li>
<li>Contacto</li>
<li>Líquido</li>
</ul>
</li>
<li><a href="TP 2/agendas.html">Agendas</a>
<ul>
<li>Todos</li>
<li>Almanaque</li>
<li>Indice Telefónico</li>
<li>Repuestos</li>
<li>Poqket</li>
</ul>
</li>
<li><a href="TP 2/archivos.html">Archivo</a>
<ul>
<li>Todos</li>
<li>Biblioratos</li>
<li>Cajas</li>
<li>Carpeteros</li>
<li>Clasificador</li>
</ul>
</li>
<li><a href="TP 2/escolares.html">Escolares</a>
<ul>
<li>Todos</li>
<li>Carpetas</li>
<li>Cuadernos</li>
<li>Cartucheras</li>
<li>Folios</li>
<li>Etiquetas</li>
<li>Mochilas</li>
<li>Portafolios</li>
</ul>
</li>
<li><a href="TP 2/informatica.html">Informática</a>
<ul>
<li>Todos</li>
<li>Cartuchos y Tonners</li>
<li>Estuches</li>
<li>Medios de Grabación</li>
<li>Mouse</li>
<li>Teclado</li>
</ul>
</li>
<li><a href="TP 2/oficina.html">Insumos de Oficina</a>
<ul>
<li><a href="TP 2/of-all.html">Todos</a></li>
<li><a href="TP 2/of-abro.html">Abrochadoras</a></li>
<li><a href="TP 2/of-fi.html">Ficheros</a></li>
<li><a href="TP 2/of-per.html">Perforadoras</a></li>
<li><a href="TP 2/of-cal.html">Calculadoras</a></li>
</ul>
</li>
<li><a href="TP 2/resmas.html">Resmas</a>
<ul>
<li><a href="TP 2/res-all.html">Todos</a></li>
<li><a href="TP 2/res-a3.html">A3</a></li>
<li><a href="TP 2/res-a4.html">A4</a></li>
<li><a href="TP 2/res-car.html">Carta</a></li>
<li><a href="TP 2/res-ofi.html">Oficio</a></li>
</ul>
</li>
</ul>
</ul>
<table border="3" bordercolor="#6633FF" class="contenido">
<tr>
<td height="58"><img src="" width="125" height="120" /></td>
<td><img src="TP 2/images2.jpg" width="125" height="120"/></td>
</tr>
<tr>
<td height="28"><div align="left"><span class="Estilo14">Cartucho HP 21 de color negro. Para impresora
HP Deskjet 3940,3920 Printers, HP PSC 1400</span></div></td>
<td><div align="left"><span class="Estilo14">Resma Autor por 500 hojas de 80 gr/m2. Tamaño A4(210x290). Para impresora multifunción </span></div></td>
</tr>
<tr>
<td height="29"><div align="right" class="Estilo16">$58,92</div></td>
<td><div align="right" class="Estilo17">$15,33</div></td>
</tr>
<tr>
<td><img src="TP 2/images3.jpg" width="125" height="120" /></td>
<td><img src="TP 2/images4.jpg" width="125" height="120"/></td>
</tr>
<tr>
<td><span class="Estilo14">Bibliorato oficio, forrado negro. Palanca alta, 75 mm.</span> </td>
<td><span class="Estilo14">Marcador Edding retráctil para pizarra E12. Con trazo de 1,5 a 3mm. Tinta al alcohol, apta para borrado en seco. Color negro. Por unidad. </span></td>
</tr>
<tr>
<td><div align="right" class="Estilo17">$13,18</div></td>
<td><div align="right" class="Estilo17">$14,02</div></td>
</tr>
</table>
<div class="piepagina"> Nombre - Contacto - Direccion<br/>
Tel- e-mail: <a href="mailto:[email protected]"> [email protected]</a> </div>
</body>
</html>
_______________________________________________________________________
/* CSS Document */
.Estilo8 {font-size: 12px}
.Estilo11 {color: #FFFFFF; font-weight: bold; }
.Estilo14 {font-size: 12px; color: #888888; }
.Estilo16 {color: #000000;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;}
.Estilo17 {font-family: Arial, Helvetica, sans-serif;
font-weight: bold;}
body{line-height: 1.166;
margin: 0px;
padding: 0px; }
h3{ font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic;
color:#6666FF;}
.formu{background-color:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:500px;
float:right;
margin-top:120px;
margin-left:255px;}
.tablaProd{font-family:Verdana, Arial, Helvetica, sans-serif;
width:400px;
float:right;}
#encabezado{position:relative;
background-color:#6633CC;
height:120px;
width:800px; }
#logo{ background-color:#CCCCCC;
float:left;
height:120px;
width:550px;
margin: 0px 0px;
padding: 0px 0px 0px 0px;}
#ingreso{ height:120px;
float:right;
width:20%;
margin:0px;
padding: 0 3px 0 0; }
#ingreso form{
margin:0px;
height:120px;
background-color:#CCCCCC;
width:230px;}
#ingreso form li{
color:#000000;}
ul.empresa{
width:250px;
margin:0 180px 0 0;
float:left;
border-bottom:3px solid #6633CC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;}
ul.empresa ul{margin:0px;
list-style:none;
border-top:2px dotted #CCCCCC; }
ul.empresa li{border-bottom:2px dotted #CCCCCC;
}
ul.empresa a:link{padding: 2px 0px 2px 5px;
color: #666666;
text-decoration: none;
/*background-color: #FFFFFF;*/
/*border-top: 1px solid;*/
width: auto;}
ul.empresa a:hover{
width:100%;
border-top: 1px solid;
padding: 2px 0px 2px 10px;
color: #FFFFFF;
background-color: #ADB0DC;}
ul.productos{
width:250px;
float:left;
margin:0 400px 0 0;}
ul.productos a:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#999999;}
ul.menu{
list-style-image:url(flecha.png);}
ul.menu ul /* Para todos los ul debajo del ul.menu */
{
display:none;
background-image:url(barra_li.png);
background-repeat:repeat-y;
background-position:left;
/*list-style-position:outside;*/}
/* Esto afecta a todos los ul inmediatamente debajo (el > ) de un li que a su vez esté dentro de un ul.menu */
li.menu{list-style:none;}
ul.menu li:hover > ul{
display:block;
list-style:none;
list-style-image:none;}
.parrafo{
border-color:#6633FF;
font-family:Verdana, Arial, Helvetica, sans-serif;
float:right;
width:60%;
padding:0;
margin:0;
text-align:justify;}
.contenido{
float:right;
width:50%;
margin: 0;
padding: 0;
height:auto; }
#navegación{
font-style:oblique;
font-weight:bold;
font-family:Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 0 0;
height:10px;
width:800px;
border:inset #DDDDDD;
background-color:#DDDDDD; }
.piepagina{
background-color:#6633CC;
color: #FFFFFF;
font-size:12px;
width: auto;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
border: medium groove #CCCCCC;
margin-top: 0.4em;
margin-right: 0.1em;
margin-bottom: 0.5em;
margin-left: 0.1em;
text-align: center;
padding-top: 0.3em;
padding-right: 0.75em;
padding-bottom: 0.4em;
padding-left: 0.3em;
position:relative;
cursor: auto;}
Valora esta pregunta
0