CODEWITHSUNDEEP
phphtmlcss
J Doe
J Doe

Reputation: 415

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

Upvotes: 0

Views: 142

Answers (2)

user6909366
user6909366

Reputation:

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.

Upvotes: 1

andre mcgruder
andre mcgruder

Reputation: 1520

If you have CSS declared in both include files and the styles are not scoped specifically to the elements on that page they you can get conflicts. This can especially happen if you are styling base tags like body, span, div, table, etc.

When the page is compiled in the browser everything gets thrown together. Long story short. Depending on order the CSS falls in the code it may get overwritten. Also depending on the specificity (real word) of the style it again may get overwritten.

This may help with that.

CSS Specificity Calculator

Be sure that your main and nav class are not on both or especially being styled on both pages

Another thing I see some people do that are new to MVC (model view controller) and calling partial pages is that they include the HTML and BODY tags in the page that is being called in when it's not needed.

Upvotes: 1

Related Questions