[SOLUCIONADO] ¿Es posible insertar un salto de línea con CSS?

#1 (**permalink**) 23/07/2013, 17:36

Hola a todos,

Estoy realizando algunas prácticas de HTML y proponiéndome resolver algunos problemas, aplicando lo aprendido hasta el momento. Lo difícil fue al intentar alinear el Div encuesta1 al lado de la tabla de encuestas. Por suerte, renegando lo logré, pero, al validar me doy cuenta que aplique <br/> que es válido para XHTML 1.0 y yo estoy haciendo esta página de ejemplo en HTML 4.01.

Lo que pretendo es colocar debajo del título el texto: Se ha estrellado un avion en centro américa.

Por otra parte, alguna recomendación en cuanto al código?

Aquí lo dejo:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">

    <title>Documento de prueba</title>

    <style type="text/css">

    #footer { text-align: center; font-size: 40px; color: blue; }

    #encuesta1 { margin-top: 100px;  margin-left: 1cm; margin-right: 780px;  height: 20px; float: right; border-style: groove; }

    #tabla { margin-top: 80px; padding-bottom: 10px;}

    .encuesta {font-size: 20px; color: red; font-weight: bold; text-align: center; }

    </style>

  </head>

  <body>

    <div id="footer">

        <strong>Noticias de ultimo momento</strong>

        <small>Se ha estrellado un avion en centro am&eacute;rica</small>

    </div>

        <div id="content">

                 <p> Texto de la noticia</p>

         </div>

         <div id="encuesta1">

                <span class="encuesta"><-- Encuesta de accidentes en el &uacute;ltimo a&ntilde;o.</span>

            </div>

         <div id="tabla">

                 <table border="1">

              <tr>

                <th>Hasta la fecha</th>

                <th>2012</th>

              </tr>

            <tr>

                <td>100 accidentes</td>

                <td>200 accidentes</td>

            </tr>

            </table>

         </div>

         <p>Para acceder al informe del accidente, haga <a href="http://www.google.com">clic aqui</a></p>

</body>

</html>

Saludos.

pzin · #2 (**permalink**) 23/07/2013, 17:44

Realmente te vale con indicar que strong sea un elemento de bloque:

Código CSS:

Ver originaldiv#footer strong {
  display: block;
}

Pero, es mejor utilizar encabezados para ello, que por defecto son elementos de bloque:

Código HTML:

Ver original<div id="footer"> 
  <h1>Noticias de ultimo momento</h1> 
  <h2>Se ha estrellado un avion en centro am&eacute;rica</h2> 
</div>

Y así te queda todo un poco más semántico.

#3 (**permalink**) 23/07/2013, 18:05

Gracias pzin, una solución fabulosa!. Realmente se me había pasado por alto que podría utilizar los distintos encabezados, falta de práctica...

Con respecto a Código CSS: me viene al pelo, aún desconocía ese código.

Saludos, tema solucionado.