Page loses styles

Question

Page loses styles

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (-2 votes)

0

Someone could help me guiding me on how to know which is the problem for which my page loses the css style ... is a news page that I am creating, uploads data through Ajax when doing scroll until the end, infinite scroll type, it worked fine, but I made some changes in the database and it stayed like this:

Is there any way to know what is wrong, and why is not recognizing the CSS styles? It should be noted that the style sheet is perfectly linked to the page:

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

This is the index.php code, which receives data from the Noticia1 table, which has several fields such as Title, Subtitle, Author etc etc, in turn this code has a script will load data through Ajax every time the scroll to the end of the page. Whenever this happens, it will send the variable "pagina" to data.php by URL, the variable "pagina" will increase by 7, to load more data:

//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>

In the page datos.php, the variable "pagina" is received and it is used to send the data of the respective rows requested each time the variable "pagina" increases:

<?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>";
        }

?>

mysql html php css

asked by Marvin Morales 18.11.2017 в 19:49

source

4 answers

0

try adding? v = 1 in the href of the style, sometimes it happens that the cache stays stored and the recent changes of the style are not updated.

Your tag would look like this

link type="text / css" href="css / main.css? v = 1"

answered by 18.11.2017 в 20:07

0

The causes that cause this error are:

1.-Check that you have loaded the jquery library.

<head>
 <script src="jquery-3.2.1.min.js"></script>
 <link rel="stylesheet" type="text/css" href="css/main.css">
 </head>

2.-There is no javascript running before the jquery library has been loaded or a plugin that uses jquery running also before.

A page can be manipulated without risk of errors only when the document is ready. jQuery is responsible for detecting this state in our place. The code included within $ (document) .ready () will be executed only when the document object model (DOM) is ready to execute Javascript code. Knowing this, when it is ready you call the loadData () function that you must have defined.

answered by 18.11.2017 в 23:54

0

All src scripts and css styles do not have to be in the head Try adding jquerry and prepending it to the other functions you have, try also to add codes in this piece of JavaScript onload.

window.onload = function() { 
  //parte de tu código aquí que quieres que se ejecute en la carga de la página
}

answered by 19.11.2017 в 00:08

Define DataGridView column width when loading from a DataSet? [duplicate] Call procedure from java

score -2 · Accepted Answer

-2

Solved, the <head></head> tags were inside the PHP while () loop, what I did was to remove those tags from the loop and the problem was solved.

answered by 22.11.2017 / 23:44

source