1

Tengo una tabla llamada noticias con los tipicos campos: titulo, fecha, texto, imagen1, etc.

En el div cajaDesplegar esta el campo noticias es un solo parrafo grande y cuando quiero publicar la noticia luce tan burdo como es.

Que me recomiendan hacer para poder darle estilo a ese campo texto que esta en el div de la clase cajaDesplegar, es decir: separarlo por parrafos, con sus saltos de linea , tomando en cuenta que es un campo de una tabla llamada noticias.

este es mi php:

     <html lang="es">

<head>
    <meta charset="utf-8">

    <title>PNoticias</title>
    <!-- Declaración de fichero de estilos -->
    <link rel="stylesheet" type="text/css" href="estilos/estilo.css">
</head>

<body>
    <div class="general">
        <div class="sisnav">
            <span class="notsp00">HOME - &gt;</span>
        </div>
        <?php
    include("modulos/cabeceranew.php");
    include("modulos/publiBanner.php");
    ?>
            <div class="caja3">

                <section>
                    <div class="colnoticia">

                        <?php
                if (isset($_GET['codigo'])) {
                    $codigo = $_GET['codigo'];
                    include("modulos/conexion.php");
                    // selecionamos la base de datos
                    if (mysqli_select_db($conn, $dbname) === TRUE) {


                        $sql1 = "SELECT  * FROM noticias  WHERE idnoti=$codigo  ORDER BY fecha DESC, titular ASC";

                        $result = mysqli_query($conn, $sql1);
                        if ($result) {
                            // Si hay registros
                            if (mysqli_num_rows($result) !== 0) {
                                $fila = mysqli_fetch_assoc($result);
                                ?>
                            <div class="imgtitular">
                                <div>
                                    <?php echo "<img src='" . $fila['imagen01'] . ""; ?>' class="imgtitular">
                                        <div class="titulo">
                                            <?php echo "<span> " . $fila['titular'] . ""; ?> </span>
                                        </div>
                                </div>
                                <br/>
                                <div class="redes">
                                    <table class="icono">
                                        <tr>
                                            <td>
                                                <a href="http://www.facebook.com"> <img src="img/imagenes/facebook.png" class="imgcono"></a>
                                            </td>
                                            <td>
                                                <a href="http://www.twitter.com" target="_blank"><img src="img/imagenes/twitter.png" class="imgcono"></a>
                                            </td>
                                            <td>
                                                <a href="https://plus.google.com/" target="_blank"><img src="img/imagenes/google+.png" class="imgcono"></a>
                                            </td>
                                            <td>
                                                <a href="http://www.instagram.com" target="_blank"><img src="img/imagenes/instagram.png" class="imgcono"></a>
                                            </td>
                                        </tr>
                                    </table>

                                </div>
                                <div class="notienca">

                                    <?php

                                        $fecha = DateTime::createFromFormat('Y-m-d', $fila['fecha']);
                                        $fecha = date_format($fecha, "d-m-Y");?>
                                        <span>NOTICIA | <?php echo $fecha; ?>  </span>
                                        <br/>
                                        <?php echo "<span> " . $fila['resumen'] . ""; ?> </span>

                                </div>
                                <div class="cajaDespliega">
                                 <!-- texto puro y duro que quiero darle estilo -->
                                    <?php echo $fila['noticia']; ?>
                                </div>
                            </div>



                            <?php


                            }


                        }

                    }
                }?>
                    </div>
                </section>
                <?php
        include("modulos/publiCol.php");
        ?>
            </div>

    </div>
    <?
mysqli_close($conn);

?>
</body>

</html>

Codigo HTML una vez generada la web:

<html lang="es">

<head>
    <meta charset="utf-8">
</head>
<title>PNoticias</title>
<!-- Declaración de fichero de estilos -->
<link rel="stylesheet" type="text/css" href="estilos/estilo.css">

<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/02978B9B-0ED5-F343-B86A-20756DCD6086/main.js" charset="UTF-8"></script>
</head>

<body>
    <div class="general">
        <div class="sisnav">
            <span class="notsp00">HOME - &gt;</span>
        </div>
        <div class="header">

            <header>
                <div class="cabeceranew">
                    <div class="cajimgcab">
                        <a href="index.php"><img class="logo2" src="img/imagenes/logolaliga.png" alt="Logo de laliga,com"></a>
                    </div>
                    <div class="titulocab">NOTICIAS</div>
                </div>
                <nav class="cabeza">
                    <ul>
                        <li>
                            <a href="index.php">Inicio</a>
                        </li>
                        <li>
                            <a href="equipos.php">Equipos</a>
                        </li>
                        <li>
                            <a href="clasificacion.php">Clasificacion</a>
                        </li>
                        <li>
                            <a href="#">Partidos</a>
                        </li>
                        <li>
                            <a href="#">Noticias</a>
                        </li>
                        <li>
                            <a href="#">Apuestas</a>
                        </li>
                        <li>
                            <a href="#">Contactos</a>
                        </li>
                    </ul>
                </nav>
            </header>
        </div>
        <section>

            <div class="publicidadban">
                <a href="https://www.rodilla.es/" target="_blank"><img src="img/imagenes/rodilla.jpg"></a>
            </div>


        </section>
        <div class="caja3">

            <section>
                <div class="colnoticia">


                    <div class="imgtitular">
                        <div>
                            <img src='img/noticias/noti00.jpg' class="imgtitular">
                            <div class="titulo">
                                <span> Por qué el Atlético de Madrid no podrá fichar jugadores este verano </span>
                            </div>
                        </div>
                        <br/>
                        <div class="redes">
                            <table class="icono">
                                <tr>
                                    <td>
                                        <a href="http://www.facebook.com"> <img src="img/imagenes/facebook.png" class="imgcono"></a>
                                    </td>
                                    <td>
                                        <a href="http://www.twitter.com" target="_blank"><img src="img/imagenes/twitter.png" class="imgcono"></a>
                                    </td>
                                    <td>
                                        <a href="https://plus.google.com/" target="_blank"><img src="img/imagenes/google+.png" class="imgcono"></a>
                                    </td>
                                    <td>
                                        <a href="http://www.instagram.com" target="_blank"><img src="img/imagenes/instagram.png" class="imgcono"></a>
                                    </td>
                                </tr>
                            </table>

                        </div>
                        <div class="notienca">

                            <span>NOTICIA | 01-06-2017  </span>
                            <br/>
                            <span> El Tribunal de Arbitraje Deportivo ha mantenido la prohibición de inscribir jugadores en el próximo verano. </span>

                        </div>
                        <div class="cajaDespliega">
                            El Atlético de Madrid no podrá fichar a ningún jugador este verano. Así lo ha confirmado este jueves 1 de junio el Tribunal de Arbitraje Deportivo (TAS) de Lausana, por lo que el club rojiblanco deberá seguir trabajando durante los últimos meses para planificar la próxima temporada. Pero, ¿por qué este 'castigo'? La determinación del TAS llega después de la sanción que la FIFA impuso al Atlético por infringir la normativa sobre traspasos internacionales de futbolistas menores. El equipo de Simeone ya cumplió la primera ventaja de sanción el pasado mes de enero y no podrá inscribir hasta enero de 2018. El TAS estimó parcialmente el recurso del Atlético de Madrid a la sanción de la FIFA, lo que redujo la sanción económica, pero mantuvo la prohibición de inscribir jugadores en la próxima ventana de los meses de julio y agosto. Según el comunicado del organismo arbitral, el grupo de jueces de arbitraje formado por el israelí Efraim Barak, el belga-británico Romano Subiotto y alemán Ulrich Haas encontró que no todos los incumplimientos de normativa de traspasos de menores detectados por la FIFA eran sostenibles, lo que justificó la reducción de la multa inicial de 900.000 francos suizos –825.000 euros– a los 550.000 –504.493 euros– que indica en su laudo como multa final. No obstante, estos casos no justifican eliminar la prohibición de inscribir jugadores para el próximo mercado de verano impuesta por la FIFA al Atlético, según el laudo del TAS. La decisión de los tres jueces arbitrales del TAS supone el cierre de un proceso iniciado por la sanción de FIFA a Atlético y Real Madrid en enero de 2016, suspendida cautelarmente durante el pasado verano, en el que el Atlético contrató a cinco jugadores y confirmada en septiembre de este mismo año, cuando tanto Atlético como Real Madrid recurrieron al Tribunal de Arbitraje Deportivo.
                        </div>
                    </div>
                </div>
            </section>

            <div class="colpubli">
                <div class="publicidadcol">
                    <a href="http://www.lg.com/es/television" target="_blank"><img src="img/imagenes/lg.gif"></a>
                </div>
                <div class="publicidadcol">
                    <a href="https://www.fiat.es/fiat-500l" target="_blank"><img src="img/imagenes/fiat.gif"></a>
                </div>
                <br/>
                <div class="publicidadcol">
                    <a href="http://www.adidas.es/ace_17" target="_blank"><img src="img/imagenes/adidasbanner.jpg"></a>
                </div>

            </div>


        </div>

    </div>


    <?
mysqli_close($conn);

?>
</body>

</html>
10
  • 3
    Las preguntas de recomendacion se cierran por ser basadas en opiniones. Has de editar la pregunta para que entre en lo establecido en el Centro de ayuda. Y tu pregunta final es muy amplia. Un saludo
    – lois6b
    Commented el 19 jun. 2017 a las 9:01
  • se mas concreto y muestra algo en diseño actual para poder ayudarte con los estilos concretos Commented el 19 jun. 2017 a las 9:03
  • Como ya se ha dicho, tal y como está formulada la pregunta es imposible dar una respuesta concreta. No obstante, la mejor opción sería colocar nombres de clases a las diferentes partes que quieres que sean diferentes y luego aplicar formato mediante CSS.
    – A. Cedano
    Commented el 19 jun. 2017 a las 10:10
  • Podrías usar un editor de texto tipo WYSIWYG y almacenar en base de datos el código que te genere, pero ¡aviso! suelen generar mucho código basura.
    – Muriano
    Commented el 19 jun. 2017 a las 10:41
  • Buenas, A ver si con el codigo que acabo de incluir me explico mejor. Muchas gracias @A.Cedano
    – Buda
    Commented el 21 jun. 2017 a las 10:34

2 respuestas 2

2

El párrafo aparece tan burdo, porque burdo lo has introducido en la base de datos. Tal y como está no se puede hacer absolutamente nada, solamente modificar el párrafo en el origen, poniendo los saltos de línea que debería llevar, sean separando cada párrafo mediante las etiquetas <p>...</p> o agregando dos etiquetas <br /><br />.

De todos modos, mediante CSS podrías mejorar tu contenido, pero en cuanto al contenido del párrafo en sí, nada se puede hacer porque sencillamente no hay forma de identificar cómo deben ir separados los párrafos.

Si quieres mejorar el contenido, te puedes valer de reglas CSS aplicadas a las diferentes clases. Aquí te dejo un ejemplo.

El texto del párrafo de noticias ha sido modificado por mí ad libitum mediante dos etiquetas <br />. La respuesta es que debes modificar el contenido en la base de datos para que presente los saltos de línea donde tengan que ir.

/* ===== Box styling custom CSS, copy from here =====*/
.caja3 {
  display: block;
  width: 50%;
  position: relative;
  overflow: hidden;
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  border: 1px solid #999;
  border-radius: 5px;
  background:#EAEAEA;
  text-align: center;
  text-decoration: none;
  margin-right:5px;
 }


.colnoticia .imgtitular .titulo{
  border-bottom: 1px solid #ccc; 
  padding: 0.4em 0; 
  color:#333!important;         
  font-size:1.3rem!important;
  line-height: 2.5rem;
}
 
.intro {
  font-size:0.9rem;
  font-style: italic;
  padding: 1em 0em 1em 0em;  
}  

.caja3:hover h2, .box:active h2 {
  color: #fff!important;
  border-bottom-color: #fff;  
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.caja3:hover p, .caja3:active p  {
color: white;
-webkit-transition: -webkit-transform 1s;
transition: -moz-transform 1s;
transition: transform 1s;
}
<div class="caja3">
            <section>
                <div class="colnoticia">
                    <div class="imgtitular">
                        <div>
                            <img src='img/noticias/noti00.jpg' class="imgtitular">
                            <div class="titulo">
                                <span> Por qué el Atlético de Madrid no podrá fichar jugadores este verano </span>
                            </div>
                        </div>
                        <br/>
                        <div class="redes">
                            <table class="icono">
                                <tr>
                                    <td>
                                        <a href="http://www.facebook.com"> <img src="img/imagenes/facebook.png" class="imgcono"></a>
                                    </td>
                                    <td>
                                        <a href="http://www.twitter.com" target="_blank"><img src="img/imagenes/twitter.png" class="imgcono"></a>
                                    </td>
                                    <td>
                                        <a href="https://plus.google.com/" target="_blank"><img src="img/imagenes/google+.png" class="imgcono"></a>
                                    </td>
                                    <td>
                                        <a href="http://www.instagram.com" target="_blank"><img src="img/imagenes/instagram.png" class="imgcono"></a>
                                    </td>
                                </tr>
                            </table>

                        </div>
                        <div class="notienca">

                            <span>NOTICIA | 01-06-2017  </span>
                            <br/>
                            <div class="intro"> <span>El Tribunal de Arbitraje Deportivo ha mantenido la prohibición de inscribir jugadores en el próximo verano. </span>
</div>

                        </div>
                        <div class="cajaDespliega">
                            El Atlético de Madrid no podrá fichar a ningún jugador este verano. Así lo ha confirmado este jueves 1 de junio el Tribunal de Arbitraje Deportivo (TAS) de Lausana, por lo que el club rojiblanco deberá seguir trabajando durante los últimos meses para planificar la próxima temporada. Pero, ¿por qué este 'castigo'? La determinación del TAS llega después de la sanción que la FIFA impuso al Atlético por infringir la normativa sobre traspasos internacionales de futbolistas menores. <br /><br />El equipo de Simeone ya cumplió la primera ventaja de sanción el pasado mes de enero y no podrá inscribir hasta enero de 2018. El TAS estimó parcialmente el recurso del Atlético de Madrid a la sanción de la FIFA, lo que redujo la sanción económica, pero mantuvo la prohibición de inscribir jugadores en la próxima ventana de los meses de julio y agosto.  <br /><br />Según el comunicado del organismo arbitral, el grupo de jueces de arbitraje formado por el israelí Efraim Barak, el belga-británico Romano Subiotto y alemán Ulrich Haas encontró que no todos los incumplimientos de normativa de traspasos de menores detectados por la FIFA eran sostenibles, lo que justificó la reducción de la multa inicial de 900.000 francos suizos –825.000 euros– a los 550.000 –504.493 euros– que indica en su laudo como multa final. No obstante, estos casos no justifican eliminar la prohibición de inscribir jugadores para el próximo mercado de verano impuesta por la FIFA al Atlético, según el laudo del TAS.  <br /><br />La decisión de los tres jueces arbitrales del TAS supone el cierre de un proceso iniciado por la sanción de FIFA a Atlético y Real Madrid en enero de 2016, suspendida cautelarmente durante el pasado verano, en el que el Atlético contrató a cinco jugadores y confirmada en septiembre de este mismo año, cuando tanto Atlético como Real Madrid recurrieron al Tribunal de Arbitraje Deportivo.
                        </div>
                    </div>
                </div>
            </section>

            <div class="colpubli">
                <div class="publicidadcol">
                    <a href="http://www.lg.com/es/television" target="_blank"><img src="img/imagenes/lg.gif"></a>
                </div>
                <div class="publicidadcol">
                    <a href="https://www.fiat.es/fiat-500l" target="_blank"><img src="img/imagenes/fiat.gif"></a>
                </div>
                <br/>
                <div class="publicidadcol">
                    <a href="http://www.adidas.es/ace_17" target="_blank"><img src="img/imagenes/adidasbanner.jpg"></a>
                </div>

            </div>


        </div>

    </div>


    <?
mysqli_close($conn);

?>
</body>

</html>

7
  • @Buda valora el esfuerzo de quien te contesta, que lo hace en su tiempo de forma solidaria, y marcala como respuesta correcta. Lo tuyo es una chapuza en php para resolver una chapuza en la base de datos.
    – Foo Bar
    Commented el 22 jun. 2017 a las 12:20
  • ¿ Me perdí algo @FooBar ?
    – A. Cedano
    Commented el 22 jun. 2017 a las 17:23
  • no, comentaba bajo tu respuesta precisamente para indicarle a Buda (el +1 te lo he puesto yo) que lo correcto si no quiere adulterar su base de datos (ya mal formada) es utilizar correctamente los estilos para cambiar el aspecto. Y que me parece mal, personalmente, que otra persona (tú) se trabaje una respuesta y que @Buda ni siquiera entregue un +1 o marque la respuesta que sabe que es la correcta, y ponga un "ya lo resolví" con una chapuza, incitando a otros a cometer sus mismos errores.
    – Foo Bar
    Commented el 23 jun. 2017 a las 6:30
  • 1
    @Buda ja ja no seas vengativo, no le des -1 a FooBar. Los +1 se dan pulsando en la flecha gris de la izquierda que apunta hacia arriba, y los -1 con la flecha que apunta hacia abajo. Pero no serán efectivos hasta que no tengas los punto suficientes en tu reputación, que creo que son 30 ó 50, ahora no recuerdo exactamente. Pero creo que puedes dar el +1 ahora, el cual se hará efectivo cuando alcances la reputación exigida. Saludos.
    – A. Cedano
    Commented el 27 jun. 2017 a las 14:58
  • 1
    Ignorantia juris non excusat, esta página funciona así, @Buda, los puntos son lo que indican la aceptación de tu respuesta. Si no le votas positivo a quien te contesta, estás despreciando su respuesta, al menos así es aquí. No lo tomes como algo contra tu persona, que no es así, sino contra tu comportamiento, aunque partiera del desconocimiento. (Por cierto, los -1 salen de tu propia puntuación conseguida, cuando quitas un punto baja de los tuyos). Todos somos novatos alguna vez, y no pasa nada. Un saludo.
    – Foo Bar
    Commented el 28 jun. 2017 a las 6:34
0

ya lo pude resolver como podras ver si se puede hacer algo y quizas esto le sirva a alguien mas. Con el siguiente codigo separo en parrafos y le doy estilo con la clase parrafoinfo:

<div class="cajadespliega">
        <?php
           $contador=0;
              $parrafo = preg_split('/\.([\n\r]|<\/p>)/', $fila['noticia']);
              $numparrafos = count($parrafo);
              while($numparrafos > 0){
                 $parrafonoticia = $parrafo[$contador];?>

              <p class="parrafoinfo"><?php echo $parrafonoticia;?></p>
        <?php
              $numparrafos--;
              $contador++;
              }
        ?>
   </div> 
4
  • No amigo, creo que esta solución no es para nada óptima. ¿Por qué mejor no colocas las etiquetas <p>...</p> directamente en los datos de la base de datos. Haciéndolo mediante una función el programa queda menos optimizado.
    – A. Cedano
    Commented el 22 jun. 2017 a las 17:25
  • porque @FooBar dices que esto es una chapuza y porque dices que la base de datos esta mal formada?
    – Buda
    Commented el 27 jun. 2017 a las 13:08
  • y como entrego un +1?
    – Buda
    Commented el 27 jun. 2017 a las 13:09
  • 1
    Explico: una query (en sql, del estilo UPDATE TABLE) en el campo de la base de datos que contiene el párrafo burdo y le añadiese los saltos de línea(<p></p>), sería lo idóneo, se realiza una vez y ya está. Lo tuyo obliga a formatear la forma de la página cada vez que la carga, es consumo de más y además puede darte problemas en un futuro, si usas la misma clase...Es un rodeo malo. Perdona si te he parecido muy agresivo, de verdad me molesta mucho la gente en S.O. que no puntúa las respuestas trabajadas. Aparte, deberías leer stackoverflow.com/tour
    – Foo Bar
    Commented el 28 jun. 2017 a las 6:28

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.