0

Dispongo de una página HTML donde quiero englobar en una tabla un logo, junto al logo un menú superior.

Todo correcto hasta ahí.

El problema viene a la hora de realizar el cuerpo del contenido. "body".

1) ¿Por qué me deja mucho espacio entre cada sonido?

2) ¿Cómo se solucionaría para dividir dentro de la tabla en dos divs, div izquierdo div derecho y poner uno al lado de otro o uno debajo del otro sin tanto margen?

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>Noticias</title>
        <script src="efectos/SpryEffects.js" type="text/javascript"></script>
        <script src="efectos/efecto.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/noticias.css">
    </head>

    <body>
        <div align="center">
            <table width="903" border="0">
                <tr>
                    <td width="383" rowspan="2"><a href="index.html"><img src="http://www.icesi.edu.co/blogs_estudiantes/emidbayona/files/2011/03/wwf-logo-design.jpg" width="375" height="150"/></a></td>
                    <td width="161" height="75"><div align="center"><a href="noticias.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_noticias.jpg" width="150" height="30" /></a></div></td>
                    <td width="156"><div align="center"><a href="quienes-somos.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_somos.jpg" width="150" height="30" /></a></div></td>
                    <td width="188"><div align="center"><a href="nuestras-oficinas.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_oficinas.jpg" width="150" height="30" border="0" /></a></div></td>
                </tr>
                <tr>
                    <td><div align="center"><a href="principios-actuacion.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_patencion.jpg" width="150" height="30" border="0" /></a></div></td>
                    <td width="156"><div align="center"><a href="materias.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_especialidades.jpg" width="150" height="30" border="0" /></a></div></td>
                    <td width="188"><div align="center"><a href="contacto-consultas.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_contacto.jpg" width="150" height="30" border="0" /></a></div></td>
                </tr>
                <tr>
                    <td colspan="4" bgcolor="#0099FF"><div align="center"><img src="imagenes/noticiasbanner.jpg" width="900" height="30"/></div></td>
                </tr>
                <div class="sonido1">
                    <p>En La Gradona, a partir del minuto 61, empieza la entrevista a ...</p>
                    <td height="380" colspan="3" valign="middle" class="bb">
                        <audio controls>
                            <source src="noticias/sonido1.mp3" type="audio/mpeg">
                            Tu navegador no es compatible para reproducir audio.
                        </audio>
                    </td>
                </div>
                <tr>
                    <p>En FM, entrevista a ... con motivo de la gala de Premios Nacional de Ley 2017.</p>
                    <td height="380" colspan="3" valign="middle" class="bb">
                        <audio controls>
                            <source src="noticias/sonido2.mp3" type="audio/mpeg">
                            Tu navegador no es compatible para reproducir audio.
                        </audio>
                    </td>
                </tr>
                <tr>
                    <td height="32" colspan="4" valign="top" bgcolor="#0099FF" class="bb"><center><img src="imagenes/pie1.jpg" width="712" height="30"/></center></td>
                </tr>
            </table>
        </div>
    </body>
</html>

Resultado:

introducir la descripción de la imagen aquí

Mi idea sería la siguiente: introducir la descripción de la imagen aquí

1
  • Ahi hay varios errores </tr><div><td>? hay un td sin tr.
    – Luis Mata
    Commented el 9 feb. 2018 a las 18:58

2 respuestas 2

1

Se debe al atributo "colspan" en las etiquetas "td" tiene 3 y debe ir 2, ademas hay etiquetas "div" mezcladas con etiquetas de tabla lo cual es incorrecto, a mi manera de ver el HTML quedaría de la siguiente manera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Noticias

<body>
    <div align="center">
        <table width="903" border="0">
            <tr>
                <td width="383" rowspan="2"><a href="index.html"><img src="http://www.icesi.edu.co/blogs_estudiantes/emidbayona/files/2011/03/wwf-logo-design.jpg" width="375" height="150"/></a></td>
                <td width="161" height="75"><div align="center"><a href="noticias.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_noticias.jpg" width="150" height="30" /></a></div></td>
                <td width="156"><div align="center"><a href="quienes-somos.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_somos.jpg" width="150" height="30" /></a></div></td>
                <td width="188"><div align="center"><a href="nuestras-oficinas.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_oficinas.jpg" width="150" height="30" border="0" /></a></div></td>
            </tr>
            <tr>
                <td><div align="center"><a href="principios-actuacion.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_patencion.jpg" width="150" height="30" border="0" /></a></div></td>
                <td width="156"><div align="center"><a href="materias.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_especialidades.jpg" width="150" height="30" border="0" /></a></div></td>
                <td width="188"><div align="center"><a href="contacto-consultas.html" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><img src="imagenes/b_contacto.jpg" width="150" height="30" border="0" /></a></div></td>
            </tr>
            <tr>
                <td colspan="4" bgcolor="#0099FF"><div align="center"><img src="imagenes/noticiasbanner.jpg" width="900" height="30"/></div></td>
            </tr>
            <tr>

                <td height="380" colspan="2" valign="middle" class="bb">
                    <div class="sonido1">
                    <p>En La Gradona, a partir del minuto 61, empieza la entrevista a ...</p>
                        <audio controls>
                            <source src="noticias/sonido1.mp3" type="audio/mpeg">
                            Tu navegador no es compatible para reproducir audio.
                        </audio>
                        </div>
                </td>    
                <td height="380" colspan="2" valign="middle" class="bb">
                    <p>En FM, entrevista a ... con motivo de la gala de Premios Nacional de Ley 2017.</p>
                    <audio controls>
                        <source src="noticias/sonido2.mp3" type="audio/mpeg">
                        Tu navegador no es compatible para reproducir audio.
                    </audio>
                </td>
            </tr>
            <tr>
                <td height="32" colspan="4" valign="top" bgcolor="#0099FF" class="bb"><center><img src="imagenes/pie1.jpg" width="712" height="30"/></center></td>
            </tr>
        </table>
    </div>
</body>

1

En primer lugar, una buena practica y mi recomendación personal es que no incluyas el o los estilos directamente en los elementos html, en vez de eso vincula una hoja de estilos con el siguiente codigo:

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

Ahora bien te dejo esta pagina sobre CSS

En segundo lugar, referente a tu problema tengo que decirte que lo mejor seria empezar desde "0" tomando en cuenta lo anterior, pues simplemente ese html es una pesadilla sin ofender.

Actualmente existen marcos de trabajos (frameworks) muy sencillos y fáciles de implementar como Materialize que básicamente te ofrecen clases predefinidas que te ayudaran a simplificar el trabajo y tendras un acabado mas profesional, Material Design. Mas Frameworks CSS

1
  • Agregando a lo q dice Alexander, podrias usar bootstrap. Que es un frameworks muy bueno y sencillo. Commented el 9 feb. 2018 a las 20:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.