Hola. Estoy haciendo un sitio desde 0 y pasa algo que va a hacer que me quede más pelón que mi padre!!
Resulta que mi tabla inicial es de 600px de ancho, ahí va el header y un menú desplegable. No entiendo por qué la tabla en donde esta la imágen del header me la hace más ancha de 600px, ya lo especifiqué muy bien, revisé los css y el html.. no entiendo por qué
Incluso ya intenté eliminando el menú (para que no utilice nada de los estilos propios del menú y afecte lo demás del sitio)
Le pasa eso a alguien más también? Qué puedo hacer?
Código HTML:
<link rel="stylesheet" type="text/css" href="estilos.css" />
<script src="menus.js" type="text/javascript"></script>
<script src="multiusos.js" type="text/javascript"></script>
</head>
<body style="border: none">
<table align="center" style="border: none" width="600px">
<tr style="border: none">
<td style="border: none">
<img style="border: none" src="images/top.png" />
</td>
</tr>
<tr style="border: none">
<td style="border: none">
<ul id="qm0" class="qmmc">
<li><a class="qmparent" href="index.html">SICME</a>
<ul>
<li><a href="historia.html">Historia</a></li>
<li><a href="quienessomos.html">¿Quiénes somos?</a></li>
<li><a href="politicadecali ... etc etc .. hasta ... ->
... -> lefonos.html">Contáctenos por teléfono o fax</a></li>
</ul></li>
<li class="qmclear"></li></ul>
</td>
</tr>
<tr><td height="5px"></td></tr><!-- termina el menu -->
<tr><td><div align="center"><script type="text/javascript">elegirInicio();</script></div>
</td></tr></table>
<script type="text/javascript">footer();</script></body>
</html> Las funciones en java son:
Código:
function footer(){
document.writeln('<table align="center" class="footer"><tr><td>\n(c)2009 SICME Laboratorio. Todos los derechos reservados.\n<\/td><\/tr><\/table>');
}
function elegirInicio(){
numero=Math.floor((10-7)*Math.random()) + 8;
switch(numero){
case 8: document.writeln('<img src="http://www.forosdelweb.com/images/Inicio_ad1.png" border="0" \/>');
break;
case 9: document.writeln('<img src="http://www.forosdelweb.com/images/Inicio_ad2.png" border="0" \/>');
break;
case 10: document.writeln('<img src="http://www.forosdelweb.com/images/Inicio_ad3.png" border="0" \/>');
break;
}
}
y los css que se usan en ese archivo son:
Código HTML:
a {
color: #3366CC;
text-decoration: none
}
body {
background-color: #FFFFFF;
background-image: url("http://www.forosdelweb.com/images/bck2.png"); background-position: top left; background-repeat: repeat-x; background-attachment: fixed;
font-family: 'Trebuchet MS',Trebuchet,Verdana,Sans-serif;
font-size: 14px;
line-height: 1.5em;
color: #000000;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
}
.titulo {
font-family: inherit;
font-size: 18px;
font-weight: bold;
}
.footer {
width: 100%;
visibility: show;
right: 0px;
z-index: 20;
float: none;
font-family: 'Trebuchet MS',Trebuchet,Verdana,Sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 11px;
text-align: center;
color: #333333;
position: fixed;
bottom: 0px;
background-color: #BDC7D0;
}
Mi manera de solucionarlo fue seguir utilizando la misma tabla para toda la pag, aunque eso sigue mostrando un "borde" misterioso que no comprendo por qué lo hace. Se puede ver que le puse border: none muchas veces, fue a ver si algo se tenía que especificar. Igual si les sirve el template sientanse libres de copiar el layout.
Qué recomendación tiene alguien por ahí?? Se los agradecería mucho, podría dormir =)
Saludos!