How to give include a php file without conflicting with the css of the two files?

Asked

Viewed 361 times

1

I want to put on my page a button that has bootstrap and its own css, this button is in the login.php file. But when I go to give the login.php include in my index.php file it generates a "conflict" in the styles of my main page which in this case is index.php. So how do I bring login.php to index.php without the latter having the style changed?

--no login button-- inserir a descrição da imagem aqui --with button, generating the css conflict-- inserir a descrição da imagem aqui

index php.

<!DOCTYPE html>
    <html>
    <head>
        <title></title>

    <link href="https://fonts.googleapis.com/css?family=Bahiana" rel="stylesheet">

    <style>

    h1{
        font-family: 'Bahiana', cursive;
        font-size: 100px;

    }

    li{
        font-family: 'Bahiana', cursive;
        font-size: 40px;
    }


    body{
        background-color: #e3e9f2;
    }

    li{
        list-style-type: none;
        display: table;
        margin: 0 auto;
        margin-top: 10px;
        padding: 10px;
        border: 12px solid black;

    }

    a:hover{
        list-style-type: none;
        display: table;
        margin: 0 auto;
        margin-top: 10px;
        padding: 10px;
        border: 12px solid black;
        color: purple;
        background-color: grey;


    }

    a{
        text-decoration: none;
        color: black;

    }


    </style>

    <body>

    <?php


    include 'login.php';


    ?>

    <CENTER><h1>teste</h1></CENTER>

    <ul>
    <li><a href="http://localhost/whatsthis/"><a href='post.php?id=$post_id'>teste </a></a></li>
    <li><a href="">> teste <</a></li>
    <li><a href="">> teste <</a></li>
    <li><a href="">> teste <</a></li>
    </ul>



    </body>
    </html>

login.php

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .modal-header, h4, .close {
      background-color: #5cb85c;
      color:white !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-footer {
      background-color: #f9f9f9;
  }
  </style>
</head>
<body>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body" style="padding:40px 50px;">
          <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
              <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>

    </div>
  </div> 
</div>

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });
});
</script>

</body>
</html>

1 answer

3


Your Login has an entire HTML, including DOCTYPE, include directly in index.php will not work, see that you added include inside <body>, ie after included the result will be "catastrophic" for HTML, will turn this:

<!DOCTYPE html>
<html>
<head>
    <title></title>

<link href="https://fonts.googleapis.com/css?family=Bahiana" rel="stylesheet">

<style>

h1{
    font-family: 'Bahiana', cursive;
    font-size: 100px;

}

li{
    font-family: 'Bahiana', cursive;
    font-size: 40px;
}


body{
    background-color: #e3e9f2;
}

li{
    list-style-type: none;
    display: table;
    margin: 0 auto;
    margin-top: 10px;
    padding: 10px;
    border: 12px solid black;

}

a:hover{
    list-style-type: none;
    display: table;
    margin: 0 auto;
    margin-top: 10px;
    padding: 10px;
    border: 12px solid black;
    color: purple;
    background-color: grey;


}

a{
    text-decoration: none;
    color: black;

}


</style>

<body>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-header, h4, .close {
  background-color: #5cb85c;
  color:white !important;
  text-align: center;
  font-size: 30px;
}
.modal-footer {
  background-color: #f9f9f9;
}
</style>
</head>
<body>

<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header" style="padding:35px 50px;">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
    </div>
    <div class="modal-body" style="padding:40px 50px;">
      <form role="form">
        <div class="form-group">
          <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
          <input type="text" class="form-control" id="usrname" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
          <input type="text" class="form-control" id="psw" placeholder="Enter password">
        </div>
        <div class="checkbox">
          <label><input type="checkbox" value="" checked>Remember me</label>
        </div>
          <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
      </form>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
      <p>Not a member? <a href="#">Sign Up</a></p>
      <p>Forgot <a href="#">Password?</a></p>
    </div>
  </div>

</div>
</div> 
</div>

<script>
$(document).ready(function(){
$("#myBtn").click(function(){
    $("#myModal").modal();
});
});
</script>

</body>
</html>

<CENTER><h1>teste</h1></CENTER>

<ul>
<li><a href="http://localhost/whatsthis/"><a href='post.php?id=$post_id'>teste </a></a></li>
<li><a href="">> teste <</a></li>
<li><a href="">> teste <</a></li>
<li><a href="">> teste <</a></li>
</ul>



</body>
</html>

How to solve

The html document cannot have two tags <html> and two tags <body>, have to organize first, remove everything from login.php that "can’t" go inside body, do so:

login.php:

<style>
.modal-header, h4, .close {
    background-color: #5cb85c;
    color:white !important;
    text-align: center;
    font-size: 30px;
}
.modal-footer {
    background-color: #f9f9f9;
}
</style>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body" style="padding:40px 50px;">
          <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
              <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>

    </div>
  </div> 
</div>

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });
});
</script>

index php.

<!DOCTYPE html>
<html>
<head>
<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Bahiana" rel="stylesheet">

<style>

h1{
    font-family: 'Bahiana', cursive;
    font-size: 100px;

}

li{
    font-family: 'Bahiana', cursive;
    font-size: 40px;
}


body{
    background-color: #e3e9f2;
}

li{
    list-style-type: none;
    display: table;
    margin: 0 auto;
    margin-top: 10px;
    padding: 10px;
    border: 12px solid black;

}

a:hover{
    list-style-type: none;
    display: table;
    margin: 0 auto;
    margin-top: 10px;
    padding: 10px;
    border: 12px solid black;
    color: purple;
    background-color: grey;


}

a{
    text-decoration: none;
    color: black;

}


</style>

<body>

<?php


include 'login.php';


?>

<CENTER><h1>teste</h1></CENTER>

<ul>
<li><a href="http://localhost/whatsthis/"><a href='post.php?id=$post_id'>teste </a></a></li>
<li><a href="">> teste <</a></li>
<li><a href="">> teste <</a></li>
<li><a href="">> teste <</a></li>
</ul>



</body>
</html>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.