Pagina pierde estilos

publicado por: Anonymous

Alguien podria ayudarme guiandome sobre como saber cual es el problema por el cual mi pagina pierde los estilo css… es una pagina de noticias que estoy creando, carga datos mediante Ajax al hacer scroll hasta el final, tipo scroll infinito, funcionaba bien, pero hice unos cambios en la base de datos y se quedo asi:

introducir la descripción de la imagen aquí

Existe alguna manera de saber que esta mal, y por que no esta reconociendo los estilos css? Cabe recalcar que la hoja de estilos esta perfectamente ligada a la pagina:

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

Este es el codigo de index.php, que recibe datos de la tabla Noticia1, la cual tiene varios campos como Titulo, Subtitulo, Autor etc etc, a su vez este codigo posee un script cargara datos mediante Ajax cada vez que el scroll llegue al final de la pagina. Cada vez que esto suceda enviara por URL la variable “pagina” hacia datos.php, la variable “pagina” se incrementara en 7, para cargar mas datos:

//index.php
<?php
//Crear Variables para conexion Noticias Principales
$host = "localhost";
$user = "*********";
$pw = "*********";
$dataBase1 = "kautivai_DatosDeNoticias";

$conexion = mysqli_connect($host, $user, $pw, $dataBase1) or die("Problemas al conectar con base de datos 'kautivai_DatosDeNoticias'");

$obtener_filas = mysqli_query($conexion, "SELECT * FROM Noticia1");
$numero_de_fila = mysqli_num_rows($obtener_filas)+1;

    // Ejecutas las consulta 
    $result = mysqli_query($conexion, "SELECT * FROM Noticia1 WHERE ID = '$numero_de_fila'") or die("Error al realizar consulta: ".mysqli_error($conexion));

    while($final = mysqli_fetch_array($result)){ 
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="author" content="Kautiva Communication Networks">
<meta name="keywords" content="Noticias, virales, videos">
<meta name="description" content="Noticias virales">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="icon" type="image/png" href="imagenes/K_alfa.png" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Volkhov" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css?v=1">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>

<script type="text/javascript">
<?php 
    $conexion = mysqli_connect($host, $user, $pw, $dataBase1) or die ("no se ha podido conectar");
    $cuantos = mysqli_query($conexion, "SELECT COUNT(*) AS Numero FROM Noticia1");
    $cuantoes = mysqli_fetch_assoc($cuantos);
    $Numero = $cuantoes["Numero"];
    $Numero = $Numero/10;
    echo "var Numero = $Numero;";
?>      

//console.log(Numero);
let acum = -1;
let acumulador = () => {
    acum++
    console.log(acum);
}

var pagina = 0.7;

function cargardatos(){
        // Petición AJAX
        acumulador();
        if (acum >= Numero) {
            console.log("error")
        } else {
            $("#loader").html("<img src='imagenes/loading.gif' style='width:135px; height:100px;'>");
            $.get("datos.php?pagina="+pagina,
                function(data){
                    if (data != "") {
                        $(".mensaje:last").after(data); 
                    }
                    $('#loader').empty();
                }
            );
        }               
    }

$(document).ready(function(){
    // Carga inicial    
    cargardatos();
});

$(window).scroll(function(){
    if ($(window).scrollTop() === $(document).height() - $(window).height()){
        pagina++;
        cargardatos();
    }                   
});

</script>

<div id="contenedorHeader">
<header>
    <div id="centrado">
        <a href="index.html"><img src="imagenes/kautivaLogo.jpg" id="logo2"></a>
        <img src="imagenes/menu.png" id="menuIcon">
        <ul>
            <a><li>INICIO</li></a>
            <a href="deportes.html"><li>DEPORTES</li></a>
            <a href="edicion.html"><li>VIDEOS</li></a>
            <a href="noticia.php"><li>VIRALES</li></a>
            <a href="contacto.html"><li>CONTACTO</li></a>
        </ul>
    </div>
</header>
</div>

       <ul id="menu2">
            <a href="index.html"><li>INICIO</li></a>
            <a href="#"><li>DEPORTES</li></a>
            <a href="#"><li>VIDEOS</li></a>
            <a href="noticia.html"><li>VIRALES</li></a>
            <a href="contacto.php"><li>CONTACTO</li></a>
        </ul>

        <div id="CajaRedesPC">
            <a href="https://www.facebook.com/KautivaOficial/"><div class="redesBox"><img src="imagenes/fdefacebook.png" class="redes"></div></a>
            <a><div class="redesBox"><img src="imagenes/birdTwitter.png" class="redes"></div></a>
            <a><div class="redesBox"><img src="imagenes/google.png" class="redes"></div></a>
            <a><div class="redesBox"><img src="imagenes/linkedin.png" class="redes"></div></a>
            <a><div class="redesBox"><img src="imagenes/pinterest.png" class="redes"></div></a>
        </div>

<div id="general" >
    <h1 class="indicadores">Destacados de hoy</h1>

    <hr class="barrasHorizontales" size="3px" color="#1A354C" width="100%" noshade="noshade" style="margin-top: 0; margin-bottom: 10px; opacity: 1;">

    <!--================================================ Bloque Principal ===============================================-->
    <section id="general2">
        <article id="articleIzquierdo">
            <div id="NOTBIG1">
                <div id="fotoB1"><? echo '<img src="'.$final['RutaImagen'].'" class="PORTADAS1">'; ?></div>

                <h3 id="Etiqueta1" style="color: #20a2e3; font-family: 'Raleway', sans-serif; font-size: 12px; line-height: 10px; margin-top: 10px; margin-bottom: 10px;"><?php echo $final['Etiqueta']; ?></h3>

                <hr size="1px" width="100%" noshade="noshade" style="margin: 10px auto; opacity: 0.3;">

                <h1 class="titulosMain" id="Titulo1"><?php echo $final['Titulo']; ?></h1>
                <h1 class="Subtitulos" id="Subtitulo1"><?php echo $final['Subtitulo']; ?></h1>
                <p style="color: #2E2E2E; font-weight: lighter; font-family: Arial; font-size: 11px; margin-top: 10px;">Por: <span style="color: #1279a8;"><?php echo $final['Autor']; ?> <span style="color: #2E2E2E;">|</span></span>&nbsp;<span><?php echo $final['Fecha']; ?></span></p>
                <p class="resumenTitulos"><?php echo $final['Texto']; ?></p>
            </div>
<?php
    } //Cierre del primer while
?>


<?php
    // Ejecutas las consulta 
    $obtener_filas = mysqli_query($conexion, "SELECT * FROM Noticia1");
    $numero_de_fila = mysqli_num_rows($obtener_filas);
    $result2 = mysqli_query($conexion, "SELECT * FROM Noticia1 WHERE ID = '$numero_de_fila'") or die("Error al realizar consulta: ".mysqli_error($conexion));

    while($final2 = mysqli_fetch_array($result2)){ 
?>

                <div id="NOTBIG2">
                <div id="fotoB2"><? echo '<img src="'.$final2['RutaImagen'].'" class="PORTADAS1">'; ?></div>

                <h3 id="Etiqueta2" style="color: #10A2E5; font-family: 'Raleway', sans-serif; font-size: 12px; line-height: 10px; margin-top: 10px; margin-bottom: 10px;"><?php echo $final2['Etiqueta']; ?></h3>

                <hr size="1px" width="100%" noshade="noshade" style="margin: 10px auto; opacity: 0.3; ">

                <h1 class="titulosMain" id="Titulo2"><?php echo $final2['Titulo']; ?></h1>
                <h1 class="Subtitulos" id="Subtitulo2"><?php echo $final2['Subtitulo']; ?></h1>
                <p style="color: #2E2E2E; font-weight: lighter; font-family: Arial; font-size: 11px; margin-top: 10px;">Por: <span style="color: #1279a8;"><?php echo $final2['Autor']; ?> <span style="color: #2E2E2E;">|</span></span>&nbsp;<span><?php echo $final2['Fecha']; ?></span></p>
                <p class="resumenTitulos"><?php echo $final2['Texto']; ?></p>
            </div>
<?php
    } //Cierre del segundo while
?>


<?php
    // Ejecutas las consulta 
    $obtener_filas = mysqli_query($conexion, "SELECT * FROM Noticia1");
    $numero_de_fila = mysqli_num_rows($obtener_filas) - 1;
    $result3 = mysqli_query($conexion, "SELECT * FROM Noticia1 WHERE ID = '$numero_de_fila'") or die("Error al realizar consulta: ".mysqli_error($conexion));

    while($final3 = mysqli_fetch_array($result3)){ 
?>

                <div id="NOTBIG3">
                <div id="fotoB3"><? echo '<img src="'.$final3['RutaImagen'].'" class="PORTADAS1">'; ?></div>

                <h3 id="Etiqueta3" style="color: #10A2E5; font-family: 'Raleway', sans-serif; font-size: 12px; line-height: 10px; margin-top: 10px; margin-bottom: 10px;"><?php echo $final3['Etiqueta']; ?></h3>

                <hr size="1px" width="100%" noshade="noshade" style="margin: 10px auto; opacity: 0.3; ">

                <h1 class="titulosMain" id="Titulo3"><?php echo $final3['Titulo']; ?></h1>
                <h1 class="Subtitulos" id="Subtitulo3"><?php echo $final3['Subtitulo']; ?></h1>
                <p style="color: #2E2E2E; font-weight: lighter; font-family: Arial; font-size: 11px; margin-top: 10px;">Por: <span style="color: #1279a8;"><?php echo $final3['Autor']; ?> <span style="color: #2E2E2E;">|</span></span>&nbsp;<span><?php echo $final3['Fecha']; ?></span></p>
                <p class="resumenTitulos"><?php echo $final3['Texto']; ?></p>
            </div>

<?php
    } //Cierre del tercer while
?>



            </article>

        <article id="articleDerecho">
<?php
    // Ejecutas las consulta 
    $obtener_filas = mysqli_query($conexion, "SELECT * FROM Noticia1");
    $numero_de_fila = mysqli_num_rows($obtener_filas) - 2;
    $result4 = mysqli_query($conexion, "SELECT * FROM Noticia1 WHERE ID = '$numero_de_fila'") or die("Error al realizar consulta: ".mysqli_error($conexion));

    while($final4 = mysqli_fetch_array($result4)){ 
?>
                <div id="not2">
                <div id="foto2"><?php echo "<img src='".$final4['RutaImagen']."' class='PORTADAS1'>"; ?></div>
                <h1 class="titulosSecundarios" id="Titulo4"><?php echo $final4['Titulo']; ?></h1>
                <h1 class="SubtitulosPequenos" id="Subtitulo1"><?php echo $final4['Subtitulo']; ?></h1>
                    <p style="color: #2E2E2E; font-weight: lighter; font-family: Arial; font-size: 11px; margin-top: 10px;">Por: <span style="color: #1279a8;"><?php echo $final4['Autor']; ?></p>
                <p class="resumenTitulos2"><?php echo $final4['Texto']; ?> </p>
            </div>
<?php
    } //Cierre del cuarto while
?>



<?php
    // Ejecutas las consulta 
    $obtener_filas = mysqli_query($conexion, "SELECT * FROM Noticia1");
    $numero_de_fila = mysqli_num_rows($obtener_filas) - 3;
    $result5 = mysqli_query($conexion, "SELECT * FROM Noticia1 WHERE ID = '$numero_de_fila'") or die("Error al realizar consulta: ".mysqli_error($conexion));

    while($final5 = mysqli_fetch_array($result5)){ 
?>
            <div id="not3">
                <div id="foto3"><?php echo "<img src='".$final5['RutaImagen']."' class='PORTADAS1'>"; ?></div>
                <h1 class="titulosSecundarios" id="Titulo5"><?php echo $final5['Titulo']; ?></h1>
                <h1 class="SubtitulosPequenos" id="Subtitulo1"><?php echo $final5['Subtitulo']; ?></h1>
                <p style="color: #2E2E2E; font-weight: lighter; font-family: Arial; font-size: 11px; margin-top: 10px;">Por: <span style="color: #1279a8;"><?php echo $final5['Autor']; ?></p>
                <p class="resumenTitulos2"><?php echo $final5['Texto']; ?></p>
            </div>
<?php
    } //Cierre del quinto while
?>



<?php
    // Ejecutas las consulta 
    $obtener_filas = mysqli_query($conexion, "SELECT * FROM Noticia1");
    $numero_de_fila = mysqli_num_rows($obtener_filas) - 4;
    $result6 = mysqli_query($conexion, "SELECT * FROM Noticia1 WHERE ID = '$numero_de_fila'") or die("Error al realizar consulta: ".mysqli_error($conexion));

    while($final6 = mysqli_fetch_array($result6)){ 
?>
            <div id="not5">
                <div id="foto5"><?php echo "<img src='".$final6['RutaImagen']."' class='PORTADAS1'>"; ?></div>
                <h1 class="titulosSecundarios" id="Titulo6"><?php echo $final6['Titulo']; ?></h1>
                <h1 class="SubtitulosPequenos" id="Subtitulo1"><?php echo $final6['Subtitulo']; ?></h1>
                <p style="color: #2E2E2E; font-weight: lighter; font-family: Arial; font-size: 11px; margin-top: 10px;">Por: <span style="color: #1279a8;"><?php echo $final6['Autor']; ?></p>
                <p class="resumenTitulos2"><?php echo $final6['Texto']; ?></p>
            </div>
<?php
    } //Cierre del sexto while
?>



<?php
    // Ejecutas las consulta 
    $obtener_filas = mysqli_query($conexion, "SELECT * FROM Noticia1");
    $numero_de_fila = mysqli_num_rows($obtener_filas) - 5;
    $result7 = mysqli_query($conexion, "SELECT * FROM Noticia1 WHERE ID = '$numero_de_fila'") or die("Error al realizar consulta: ".mysqli_error($conexion));

    while($final7 = mysqli_fetch_array($result7)){ 
?>
            <div id="not6">
                <div id="foto6"><?php echo "<img src='".$final7['RutaImagen']."' class='PORTADAS1'>"; ?></div>
                <h1 class="titulosSecundarios" id="Titulo7"><?php echo $final7['Titulo']; ?></h1>
                <h1 class="SubtitulosPequenos" id="Subtitulo1"><?php echo $final7['Subtitulo']; ?> </h1>
                <p style="color: #2E2E2E; font-weight: lighter; font-family: Arial; font-size: 11px; margin-top: 10px;">Por: <span style="color: #1279a8;"><?php echo $final7['Autor']; ?></p>
                <p class="resumenTitulos2"><?php echo $final7['Texto']; ?></p>
            </div>
<?php
    }//Cierre del septimo while
?>


</article>

        <div id="banner1"><img src="imagenes/bannerGO.jpg" id="bannerPrincipalImagen"></div>
        <div id="bannerResponsive"><img src="imagenes/banner5.jpg" style="width: 100%;"></div>
    </section>


    <!--================================================ Bloque Principal ===============================================-->

    <!--  Tercer Bloque Tercer Bloque Tercer Bloque Tercer Bloque Tercer Bloque Tercer Bloque Tercer Bloque -->
    <h1 class="indicadores" style=" width: 100%; height: 20px; color: #10A2E5; display: flex; align-items: center; margin-top: 30px; margin-bottom: 5px; font-family: 'Raleway', sans-serif; font-size: 17px;">Más noticias</h1>

    <hr class="barrasHorizontales" size="3px" color="#1A354C" width="100%" noshade="noshade" style="margin-top: 0; opacity: 1;">

    <div id="main3">
        <div id="ForLoadMore1">
            <div class="mensaje"></div>  //Div en donde se cargaran los datos
        </div>
        <div id="loader"></div>
    </div>


    <div id="cajaRedesSociales">
        <a href="https://www.facebook.com/KautivaOficial/"><div class="redesBox"><img src="imagenes/fdefacebook.png" class="redes"></div></a>
        <a><div class="redesBox"><img src="imagenes/birdTwitter.png" class="redes"></div></a>
        <a><div class="redesBox"><img src="imagenes/google.png" class="redes"></div></a>
        <a><div class="redesBox"><img src="imagenes/linkedin.png" class="redes"></div></a>
        <a><div class="redesBox"><img src="imagenes/pinterest.png" class="redes"></div></a>
    </div>

</div>

<footer>
    <p style="color: #fff; font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: lighter; ">&copy; 2017 Kautiva Social Communication - All rights reserved</p>
    <div>
        <ul>
            <li>Nosotros</li>
            <li>Términos de uso</li>
            <li>Sponsor</li>
            <a href="contacto.html"><li>Contacto</li></a>
        </ul>
    </div>
</footer>
</body>
</html>

En la pagina datos.php, se recibe la variable “pagina” y se la usa para enviar los datos de las respectivas filas solicitadas cada vez que se incrementa la variable “pagina”:

<?php   
//Crear Variables para conexion Noticias Principales
$host = "localhost";
$user = "*******";
$pw = "*******";
$dataBase1 = "kautivai_DatosDeNoticias";

$pagina = $_GET['pagina']; //se recibe la variable pagina
$num = 10; 
$principio = $pagina * $num; //Se establece el inicio de la fila a mostrar (0.7 * 10 = 7), el intervalo a mostrar sera desde la fila 8 (contando desde la ultima) en forma descendente.
$fin = 5;

$conexion = mysqli_connect($host, $user, $pw, $dataBase1) or die ("no se ha podido conectar");  
    $result = mysqli_query($conexion, "SELECT * FROM Noticia1 ORDER BY ID DESC LIMIT {$principio},{$fin}") or die (mysqli_error($conexion));    

        while($final = mysqli_fetch_array($result)){
            echo "<div class='mensaje'>
                <div class="not7"><div class="fotosMain3" id="foto18"><img src='".$final['RutaImagen']."' class='PORTADAS1'></div><div class="TextoDerecha"><h3 id="Etiqueta16" style="color: #10A2E5; font-family: 'Raleway', sans-serif; font-size: 12px; line-height: 10px; margin-top: 10px; margin-bottom: 10px;">".$final['Etiqueta']."</h3><hr class="barrasNuevas" size="1px" width="100%" noshade="noshade" style="margin: 10px auto; opacity: 0.3;"><a href='noticia.php?title=".$final['Titulo']."' style='text-decoration: none;'><h1 class="titulosMain3" id="Titulo19">".$final['Titulo']."</h1></a><h1 class="Subtitulos" id="Subtitulo15">".$final['Subtitulo']."</h1><p style="color: #2E2E2E; font-family: Arial; font-size: 11px; margin-top: 10px;">Por: <span style="color: #1279a8;">".$final['Autor']."<span style="color: #2E2E2E;">|</span></span>&nbsp;<span>".$final['Fecha']."</span></p><p class="main3Textos" id="main3Textos-12">".substr($final['Texto'], 0, 200)."...</p></div></div>
                    </div>";
        }

?>

solución

Resuelto, las etiquetas <head></head> estaban dentro del bucle while() de PHP, lo que hice fue sacar dichas etiquetas del bucle y el problema se soluciono.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.