Style a field with the text of a news item

1

I have a table called news with the typical fields: title, date, text, image1, etc.

In the box box, to expand this the news field is a single big paragraph and when I want to publish the news it looks as coarse as it is.

What do you recommend doing to be able to give style to that field text that is in the div of the box box Expand, that is: separate it by paragraphs, with its line breaks, taking into account that it is a field of a table called news .

this is my 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>

HTML code once the web is generated:

<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>
    
asked by Buda 19.06.2017 в 11:00
source

2 answers

2

The paragraph appears so coarse , because coarse you have entered it in the database. As it is, you can not do anything at all, just modify the paragraph in the origin, putting the line breaks you should carry, either separating each paragraph with the <p>...</p> tags or adding two <br /><br /> tags.

Anyway, using CSS you could improve your content, but as for the content of the paragraph itself, nothing can be done because there is simply no way to identify how paragraphs should be separated.

If you want to improve the content, you can use CSS rules applied to different classes. Here is an example.

The text of the news paragraph has been modified by me ad libitum using two <br /> tags. The answer is that you must modify the content in the database so that it presents the line breaks where they have to go .

/* ===== 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>
    
answered by 22.06.2017 / 12:18
source
0

I could solve it as you can see if something can be done and maybe this will help someone else. With the following code I separate in paragraphs and I give it style with the parrafoinfo class:

<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> 
    
answered by 22.06.2017 в 14:00