Ayuda por favor

javigafe · #1 (**permalink**) 09/03/2010, 14:15

Hola yo nunca he hecho muchas web, i supongo que será una tontería de problema pero llevo unas cuantas horitas i no lo consigo solucionar.

Miren cuando entro con IE o Firefox a mi web (http://set.netii.net/es-set/bienvenida.html) me sale la parte superior de la web, mal porque me sale una line que no tendría que estar, pero si entro con Opera o Chrome funciona sin ningún problema.

PD: ya que pregunto me podrían dar un poco de opinión sobre el diseño de la web se que está hecho de manera muy sencilla pero es para mejorar.

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=iso-8859-1" />
<title>Set - Barcelona</title> 
<head>
<link rel="shortcut icon" href="../graficos/favicon.ico" >

<style type="text/css">
<!--
body,td,th {
	color: #FFF;
	font-family: Arial Black, Gadget, sans-serif;
}
body {
	background-color: #3E0000;
	text-align: center;
}
a:link {
	text-decoration: none;
	color: #FFF;
}
a:visited {
	text-decoration: none;
	color: #CCC;
}
a:hover {
	text-decoration: none;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
a {
	font-size: 0px;
	color: #000;
}
h1 {
	font-size: 50px;
	color: #FCC;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Arial, Helvetica, sans-serif;
}
h2 {
	font-size: 12px;
	color: #FCC;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body>
<table width="920" height="1017" border="0"  align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="23" colspan="4" >&nbsp;</td>
    <td width="589" height="23" >&nbsp;</td>
    <td width="28" height="23" colspan="3" >&nbsp;</td>
  </tr>
  <tr>
    <td width="300" height="225" rowspan="3" bgcolor="#600001"><a href="bienvenida.html"><img src="http://www.forosdelweb.com/f4/graficosset/set.jpg" width="300" height="255" border="0" /></a></td>
    <td colspan="4" bgcolor="#600001" height="31" background="../graficosset/bordesuperior.jpg"></td>
    <td width="31" height="31" colspan="3" background="../graficosset/esquina-superior-derecha.jpg"></td>
  </tr>
  <tr>
    <th height="130" colspan="4" align="center" valign="top" bgcolor="#600001"><h1>Bienvenidos</h1></th>
    <td width="31" colspan="3" rowspan="2" background="../graficosset/bordederecho.jpg" bgcolor="#600001">&nbsp;</td>
  </tr>
  <tr>
    <th height="23" colspan="4" align="center" valign="top" bgcolor="#600001"><h3>Aqu&iacute; descrpci&oacute;n principal/subtutulo</h3></th>
  </tr>
  <tr>
    <td width="300" height="60"  bgcolor="#600001"><a href="setdeborn.html"><img src="http://www.forosdelweb.com/f4/graficosset/set de born.jpg" width="300" height="60" border="0" /></a></td>
    <td colspan="4" rowspan="9" align="center" valign="top" bgcolor="#600001" style="text-align:justify">&nbsp;</td>
    <td width="31" colspan="3" rowspan="9" background="../graficosset/bordederecho.jpg" bgcolor="#600001">&nbsp;</td>
  </tr>
  <tr>
    <td width="300" height="99"  bgcolor="#600001"><a href="Laltresetdeborn.html"><img src="http://www.forosdelweb.com/f4/graficosset/L'altre set de born.jpg" width="300" height="99" border="0" /></a></td>
  </tr>
  <tr>
    <td width="300" height="60" bgcolor="#600001"><a href="setdegotic.html"><img src="http://www.forosdelweb.com/f4/graficosset/Set de gotic.jpg" width="300" height="60" border="0" /></a></td>
  </tr>
  <tr>
    <td width="300" height="60" bgcolor="#600001"><a href="comollegar.html"><img src="http://www.forosdelweb.com/f4/graficosset/Como llegar.jpg" width="300" height="60" border="0" /></a></td>
  </tr>
  <tr>
    <td width="300" height="60"  bgcolor="#600001"><a href="reservascontacto.html"><img src="http://www.forosdelweb.com/f4/graficosset/Reservas y Contacto.jpg" width="300" height="60" border="0" /></a></td>
  </tr>
  <tr>
    <td width="300" height="60" bgcolor="#600001"><a href="especialidades.html"><img src="http://www.forosdelweb.com/f4/graficosset/Especialitzacions.jpg" width="300" height="60" border="0" /></a></td>
  </tr>
  <tr>
    <td width="300" height="60" bgcolor="#600001"><a href="nuestrosvinos.html"><img src="http://www.forosdelweb.com/f4/graficosset/Nuestros vinos.jpg" width="300" height="60" border="0" /></a></td>
  </tr>
  <tr>
    <td width="300" height="60" bgcolor="#600001"><a href="horarios.html"><img src="http://www.forosdelweb.com/f4/graficosset/Horarios.jpg" width="300" height="60" border="0" /></a></td>
  </tr>
  <tr>
    <td width="300" height="60" bgcolor="#600001"><a href="historia.html"><img src="http://www.forosdelweb.com/f4/graficosset/Historia.jpg" width="300" height="60" border="0" /></a></td>
  </tr>
  <tr>
    <td width="300" height="166" rowspan="2" background="../graficosset/vasemenu.jpg" bgcolor="#600001">&nbsp;</td>
    <td height="135" colspan="4" bgcolor="#600001">&nbsp;</td>
    <td width="31" height="135" colspan="3" background="../graficosset/bordederecho.jpg" bgcolor="#600001">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4" height="31" background="../graficosset/bordeinferior.jpg" bgcolor="#600001">&nbsp;</td>
    <td width="31" height="31" colspan="3" background="../graficosset/esquina-inferior-derecha.jpg" bgcolor="#600001">&nbsp;</td>
  </tr>
</table>
<h2>Web hecha por Javier  (Javigafe)</h2>
</body>
</html>

Gracias

Ryo · #2 (**permalink**) 09/03/2010, 15:11

Así por lo pronto veo que tienes un </HEAD> (ese precisamente, el que está en mayúsculas) que sobra. Prueba a quitar eso a ver.

Respecto a mi opinión, no quisiera ser hiriente, pero se nota que no tienes del todo claro cuál es la finalidad de cada elemento XHTML; vamos, que se nota lo que dices, que eres novato y has ido a lo "fácil". No he mirado el código en profundidad, pero veo a mejorar algunas cosas, unas de manera muy fácil y otras a base de investigación y práctica.

Lo fácil es realmente fácil, pero a su manera importante e interesante: separa del todo el Javascript y el CSS. Esto es, escribe su código en un fichero aparte (uno para CSS y otro para Javascript) y desde el XHTML simplemente los llamas con link en la parte head. Lo difícil tiene más miga: usar realmente la hoja de estilos en CSS y usar los elementos HTML que realmente corresponde. Es fácil maquetar con tablas al principio, pero realmente puede llegar a resultar hasta más laborioso... Las tablas son, o deberían ser, para tabular datos, nada más. En la vida real (libros, anotaciones en los cuadernos...) sólo se usan tablas para eso y esto es exactamente lo mismo. Deberías usar otro tipo de elementos (guía rápida de XHTML con sus elementos). También deberías reflejar todo el estilo (colores e imágenes de fondo, por ejemplo) en la correspondiente hoja de estilos (esto es, en el CSS) y no directamente en los atributos XHTML. Es más claro, separa bien la estructura del diseño, deja un fichero menos pesado y créeme, es mucho más cómodo de hacer.

Ánimo, no dejes de investigar y practicar ;)

javigafe · #3 (**permalink**) 09/03/2010, 15:34

Gracias por tu respuesta pero he quitado el </HEAD> como me indicaste i me sigue pasando lo mismo.
Gracias

jac_o_bo · #4 (**permalink**) 10/03/2010, 14:53

En el css en body debe ser body,td {
color: #FFF;
font-family: Arial Black, Gadget, sans-serif;
margin:0; padding 0;
}

javigafe · #5 (**permalink**) 10/03/2010, 16:15

Muchas gracias por intentar ayudarme y por los consejos, pero al final la mejor solución ya que no se arreglaba ha sido rehacerla y ya me funciona perfecta.
Gracias.