J Doe J Doe - 1 month ago 12
CSS Question

CSS How to keep bodies of html file and included files from merging?

From what my trial and error has shown me is that when I (using php) include another php file, the bodies basically merge.

I have a CSS file that effects the main files body with a class of "main". The CSS file also effects the included files body with a class of "nav".

It appears that both the bodies of each file are effected by both of the styling that targets each class (even though the classes on each of the body tags are different).

Am I mistaken? If not, is there a way I can get around this problem? Thanks!

Included nav file (which includes the css file (I only show the code relating to the body):

<body class="nav">
<ul class="navbar">
<li>
<form action="login.php" method="post">
<input id="email" type="text" name="email" placeholder="Email">
<input id="password" type="password" name="password" placeholder="Password">
<input type="submit" value="Login">
</form>
</li>






Main index file that includes the nav file :

<body class='index'>

<div class="block-signUp">
<h1>Sign Up</h1>

<form action="" method="post">
<input class="firstname" type="text" name="firstname" placeholder="First Name"
value="<?php echo($_POST['firstname']) ?>">
<input class="lastname" type="text" name="lastname" placeholder="Last Name"
value="<?php echo($_POST['lastname']) ?>"> <br>
<input class="email" type="text" name="email" placeholder="Email"
value="<?php echo($_POST['email']) ?>"><br>
<input class="password" type="password" name="password" placeholder="Password"
value="<?php echo($_POST['password']) ?>"><br>

<div class="error-message hidden"></div>
<input type="submit" value="Sign Up"><br>

</form>
<div><a href="login.php">Already Have An Account?</a></div>
</div>

</body>


The only CSS File in the whole website, which the nav file contains :

body.nav { /* This code effects the body in the index file as well for some reason */
margin-top: 150px; /* Make nav bar at top of screen */
}

Answer

incorrect. First of, include and require is injection a script from one file to __FILE__(Master file, the file opened in .htaccess/URL) for example:

file1.php

<?php
    $first_script_var = true;
    include 'file2.php';
?>

file2.php

<?php
    if(isset($first_script_var) && $first_script_var === true){
        echo 'True';
    }
?>

Now file1.php would look like this:

<?php
    $first_script_var = true;
    include 'file2.php';
?>
<?php
    if(isset($first_script_var) && $first_script_var === true){
        echo 'True';
    }
?>
But if you would be using AJAX requests to the HTML DOM Element you would be requesting a file to the `html` tag it would load in the body tags.

Example:
< file1.php

<html>
    <head>
        <title>Hello world</title>
        <script src="jquery.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function(){
                $.ajaxSetup({cache:false});
            });
            function load(){
                $("html").load("file2.php?string=" + document.getElementById("str").value); // $("html") is a selected, it basicly means we have selected the html tag. and the .load(); is a function from JQuery.
            }
        </script>
        <div>
            <input type="text" id="str" placeholder="Echo 'text'" />
            <br />
            <input type="button" onclick="load();" />
        </div>
    </body>
</html>

file2.php

<head>
    <title>New title</title>
</head>
<body>
    <?php
        if(isset($_GET['string'])){ echo $_GET['string']; }
    ?>
</body>

this will result in replacing old header and old body tag with new head and new body tag, remember! Old javascript functions will still be remembered.

Comments