Conflict with css in the same web [duplicated]

Question

Conflict with css in the same web [duplicated]

Navigation

#1 by (3 votes)

-3

I have a menu that I post on the main page,

$menuPrincipal= /*Variable donde voy a guardar el menu*/
            "<nav class='menu-container'>".
                "<a href='#' class='menu-btn'><i class='fa fa-bars fa-lg'></i> <b>Menu</b></a>".
                "<div class='menu-slide'>".
                    "<ul class='menu-list'>";
                        if (isset($_SESSION['PlnDir']['apiKey'])){ 
                            $menuPrincipal.="<li class='menu-item'><a href=javascript:PlnDir(\"tareas.html\",\"PlnDir\",\"tarea\");> <span class='glyphicon glyphicon-user'></span> <b>Plan Director<b></a></li>".
                            "<li class='menu-item'><a href=javascript:PlnDir(\"pruebas.html\",\"PlnDir\",\"tarea\");> <span class='glyphicon glyphicon-user'></span> <b>Pruebas<b></a></li>";
                            $count=1;
                        }
                        if (isset($_SESSION['agr_app']['apiKey'])){ 
                            $menuPrincipal.="<li class='menu-item'><a  href=javascript:PlnDir(\"convenios.html\",\"agr_app\",\"convenios\");><span class='glyphicon glyphicon-cloud'></span><b>  Familia La Caña</b></a></li>";
                             $count=$count+2;
                        }
    $menuPrincipal.= "</ul>".
                "</div>".
            "</nav>";

In a div of the main page, I charge another page with a different css, having two css, the one of the main page and the one of the secondary page loaded inside the main one. The problem is that the high school css affects me with the css of the main menu.

It is very hard for me to do a test in html since all the code is in js and php. What I would like to know is that it is done in a case like this.

This code affects the menu and I do not want that to happen. ul { text-align: center; } li { list-style-position: inside; }

css

asked by Lorenzo Martín 12.03.2018 в 14:11

source

1 answer

Vimeo Player API "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided () does not match the recipient window's origin ('')" Video Background with Javascript

score 3 · Accepted Answer

You simply have to overwrite the styles for your main page, use ids to differentiate your elements <ul> and <li>

Home
<ul id="menu-principal"> 

Secondary page
<ul id="menu-secundaria"> 

CSS

    #menu-principal{
       /* estilos página principal*/
    }
    #menu-principal li{
       /* estilos página principal*/
    }
    #menu-secundaria{
       /* estilos página secundaria*/
    }
    #menu-secundaria li{
       /* estilos página secundaria*/
    }