Foros del web, para los que viven de bits

opzina · 17-jun-2008, 17:49

Hola, necesitaria saber si se puede optimizar y/o mejorar este css. (creo que en IE6) se ve mal.

body {
margin : 0 auto;
padding : 0;
width : 802px;
height : 130px;
position : relative;
background-image : url(../imagenes/fondo_textura_verde.png);
}
#todo {
margin : 0;
padding : 0;
border : 1px solid #000000;
}
#login {
margin : 0;
padding : 0;
position : absolute;
top : 3px;
left : 3px;
font-family : Calibri;
font-size : 12px;
}
#menu {
position : absolute;
top : 105px;
left : 20%;
margin : 0;
padding : 0;
font-family : Calibri;
font-size : 18px;
}
#header {
border-bottom : 1px solid #000000;
margin : 0 auto;
padding : 0;
width : 802px;
height : 130px;
}
#cuerpo {
min-height : 400px;
height : auto;
background-color : #ffffff;
margin : 0 auto;
padding : 50px;
position : relative;
}
#footer {
border-top : 1px solid #000000;
margin : 0 auto;
padding : 0;
background-color : #ffdfff;
}
#menu2 {
margin : 0 auto;
padding : 0;
font-family : Calibri;
font-size : 12px;
}

es de esta pagina: http://www.nutrimel.com.ar le puse al body width 802 pq sino no me tomaba el borde de la derecha.
saludos

opzina · 18-jun-2008, 08:32

alguien q pueda ayudarmee!!!

DragonX · 18-jun-2008, 08:49

Probá con esto:

Código HTML:

<!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>Bienvenidos | nutrimel.com.ar</title>
<style>
*{
  padding:0;
  margin:0;
}

body {
margin : 0 auto;
width : 802px;
height : 130px;
position : relative;
background-image : url(../imagenes/fondo_textura_verde.png);
}
#todo {
border : 1px solid #000000;
}
#login {
position : absolute;
top : 3px;
left : 3px;
font-family : Calibri;
font-size : 12px;
}
#menu {
position : absolute;
top : 105px;
left : 20%;
font-family : Calibri;
font-size : 18px;
}
#header {
border-bottom : 1px solid #000000;
width : 802px;
height : 130px;
}
#cuerpo {
min-height : 400px;
height : auto;
background-color : #ffffff;
padding : 50px;
position : relative;
}
#footer {
border-top : 1px solid #000000;
background-color : #ffdfff;
}
#menu2 {
font-family : Calibri;
font-size : 12px;
}
</style>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="http://www.nutrimel.com.ar/includes/pngfix.js"></script>
<![endif]-->
</head>
<body>

<div id="todo">

<div id="header"><img src="../imagenes/header.png" />

<table id="login">
  <tr>
    <td><a href="?mod=login">iniciar sesión</a></td>
    <td>|</td>
    <td><a href="?mod=registro">registrarse</a></td>
  </tr>
</table>
<table id="menu" >
  <tr>

    <td><a href="?mod=home">inicio</a></td>
    <td>&nbsp;</td>
    <td>|</td>
    <td>&nbsp;</td>
    <td><a href="?mod=contacto">contacto</a></td>
    <td>&nbsp;</td>
    <td>|</td>

    <td>&nbsp;</td>
    <td>turnos</td>
    <td>&nbsp;</td>
    <td>|</td>
    <td>&nbsp;</td>
    <td><a href="?mod=nutriblog">nutriblog</a></td>
    <td>&nbsp;</td>

    <td>|</td>
    <td>&nbsp;</td>
    <td><a href="?mod=actualidad">actualidad</a></td>
    <td>&nbsp;</td>
    <td>|</td>
    <td>&nbsp;</td>
    <td>links</td>

  </tr>
</table>

</div>

<div id="cuerpo" align="center">
<div id="fila1" style="width:33%; position:absolute; top:50px; left:2%">
<div id="celda 1" style="margin:0px; padding:0px; background-color: #ffedd4; border-top:2px solid #ffb03f; border-left:1px dotted #d3d3d3; border-right:1px dotted #d3d3d3; font-family:Calibri; font-size:16px; text-align:center;">Encuestas</div>
<div id="celda 2" style=" border-left:1px dotted #d3d3d3;  border-right:1px dotted #d3d3d3; font-family:Calibri; font-size:12px; text-align:left; ">encuesta</div>
<div id="celda 2" style=" margin:0px; padding:0px; border-left:1px dotted #d3d3d3; border-right:1px dotted #d3d3d3; border-bottom:1px solid #d3d3d3; border-top:1px dotted #d3d3d3; background-color: #e4efff; font-family:Calibri; font-size:12px; text-align:center;">encuesta</div>
</div>

<div id="fila2" style="width:34%; position:absolute; top:50px; left:67%">
<div id="celda 3">div 1</div>
<div id="celda 4">div 2</div>
</div>

<div id="fila3" style="width:60%; position:absolute; top:250px; left:20%">
<div id="celda 1" style="margin:0px; padding:0px; background-color: #c2e4b3; border-top:2px solid #007F00; border-left:1px dotted #d3d3d3; border-right:1px dotted #d3d3d3; font-family:Calibri; font-size:16px; text-align:center;">Últimos post | nutriblog</div>
<div id="celda 2" style=" border-left:1px dotted  #d3d3d3;  border-right:1px dotted  #d3d3d3; font-family:Calibri; font-size:12px; text-align:left; "><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    12 de Junio  |
    7mo post, renovación de la cartelera 
    <br/>

   
    12 de Junio  |
    Llegamos el 6to post, este es el ultimo que se publica 
    <br/>
   
    12 de Junio  |
    El libro que estoy leyendo se llama el principe de Maquiavelo 
    <br/>
   
    12 de Junio  |
    Mañana pasan a buscar el lcd creo q al mediodia, vendran??? 
    <br/>
   
    12 de Junio  |
    Probando otro post para la organizacion del organizer en el index 
    <br/>
   
    12 de Junio  |
    Probando wordpress y posts en index. 
    <br/>

</div>
<div id="celda 3" style=" margin:0px; padding:0px; border-left:1px dotted  #d3d3d3; border-right:1px dotted #d3d3d3; border-bottom:1px dotted  #d3d3d3;border-top:1px dotted #d3d3d3; background-color: #e4efff; font-family:Calibri; font-size:12px; text-align:center;"><a href="?mod=nutriblog">nutriblog</a></div>
</div>

</div>

<div id="footer">
<table id="menu2" >
  <tr>
    <td><a href="?mod=home">inicio</a></td>

    <td>&nbsp;</td>
    <td>|</td>
    <td>&nbsp;</td>
    <td><a href="?mod=contacto">contacto</a></td>
    <td>&nbsp;</td>
    <td>|</td>
    <td>&nbsp;</td>

    <td>turnos</td>
    <td>&nbsp;</td>
    <td>|</td>
    <td>&nbsp;</td>
    <td><a href="?mod=nutriblog">nutriblog</a></td>
    <td>&nbsp;</td>
    <td>|</td>

    <td>&nbsp;</td>
    <td><a href="?mod=actualidad">actualidad</a></td>
    <td>&nbsp;</td>
    <td>|</td>
    <td>&nbsp;</td>
    <td>links</td>
    <td>&nbsp;</td>

    <td>|</td>
    <td>&nbsp;</td>
    <td><a href="?mod=login">login</a></td>
    <td>&nbsp;</td>
    <td>|</td>
    <td>&nbsp;</td>
    <td><a href="?mod=registro">registrarse</a></td>

    <td>&nbsp;</td>
    <td>|</td>
    <td>&nbsp;</td>
    <td>newsletter</td>
    </tr>
  <tr>
    <td colspan="16">&nbsp;</td>
    <td>&nbsp;</td>

    <td colspan="16">&nbsp;</td>
    </tr>
  <tr>
    <td colspan="33" align="center">Copyright © 2008 Nutrimel.com.ar Todos los derechos reservados | Disclaimer</td>
    </tr>
</table>

</div>

</div>

</body>
</html>

Tu código HTML era un desastre, tenias 3 tags de body, tres de Head y otros desastres

Fijate y decinos

opzina · 18-jun-2008, 11:10

Hola, gracias por responder....

Bueno lo de los 3 heads y 3 bodys...puede deberse a q se cargan modulos y por eso en el codigo se vean todos los head???...cmo solucionarlo??

cdo termine la pagina todos los estilos van a ir en un archivo aparte..

el codigo q pusiste..se ve bien en el browser, mal en el dreamweaver (aunq aca nadie navega) y tb los links no funcionan...

saludos.

opzina · 18-jun-2008, 11:11

si queres te paso el html del layout de la web modular.....(ya q el css q pase al pricipio es de del layout)...decime y lo cargo...

17-jun-2008, 17:49	#1 (permalink)
opzina Fecha de Ingreso: marzo-2008 Mensajes: 148	(Consulta) Correccion codigo CSS Hola, necesitaria saber si se puede optimizar y/o mejorar este css. (creo que en IE6) se ve mal. body { margin : 0 auto; padding : 0; width : 802px; height : 130px; position : relative; background-image : url(../imagenes/fondo_textura_verde.png); } #todo { margin : 0; padding : 0; border : 1px solid #000000; } #login { margin : 0; padding : 0; position : absolute; top : 3px; left : 3px; font-family : Calibri; font-size : 12px; } #menu { position : absolute; top : 105px; left : 20%; margin : 0; padding : 0; font-family : Calibri; font-size : 18px; } #header { border-bottom : 1px solid #000000; margin : 0 auto; padding : 0; width : 802px; height : 130px; } #cuerpo { min-height : 400px; height : auto; background-color : #ffffff; margin : 0 auto; padding : 50px; position : relative; } #footer { border-top : 1px solid #000000; margin : 0 auto; padding : 0; background-color : #ffdfff; } #menu2 { margin : 0 auto; padding : 0; font-family : Calibri; font-size : 12px; } es de esta pagina: http://www.nutrimel.com.ar le puse al body width 802 pq sino no me tomaba el borde de la derecha. saludos Última edición por opzina; 17-jun-2008 a las 20:58.

18-jun-2008, 08:32	#2 (permalink)
opzina Fecha de Ingreso: marzo-2008 Mensajes: 148	Respuesta: (Consulta) Correccion codigo CSS alguien q pueda ayudarmee!!!

18-jun-2008, 11:10	#4 (permalink)
opzina Fecha de Ingreso: marzo-2008 Mensajes: 148	Respuesta: (Consulta) Correccion codigo CSS Hola, gracias por responder.... Bueno lo de los 3 heads y 3 bodys...puede deberse a q se cargan modulos y por eso en el codigo se vean todos los head???...cmo solucionarlo?? cdo termine la pagina todos los estilos van a ir en un archivo aparte.. el codigo q pusiste..se ve bien en el browser, mal en el dreamweaver (aunq aca nadie navega) y tb los links no funcionan... saludos.

18-jun-2008, 11:11	#5 (permalink)
opzina Fecha de Ingreso: marzo-2008 Mensajes: 148	Respuesta: (Consulta) Correccion codigo CSS si queres te paso el html del layout de la web modular.....(ya q el css q pase al pricipio es de del layout)...decime y lo cargo...

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado