stackoom
  简体   繁体   中英

what can I do to clean up my php files to not include the html and css in them?

 原文  2019-10-21 02:54:09  1   2    php/ html/ css

Question

Below is the html and css for the navigation bar which I want to be used universally through my website, is there a way I can put this in a separate file and just call the file at the beginning of the html and php files for my webpage? I've tried to put the in separate files and included them in the other html pages. As for the php would I be able to do an include "path/to/html/file" or would I put that above the php? I just want a more organized way of doing this. Any help is appreciated thank you!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>


body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* Full height */
  height: 50%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Images used */
.img1 { background-image: url("logo.jpeg"); }


/* Position text in the middle of the page/image */
.bg-text {

  color: black;
  font-weight: bold;
  font-size: 80px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  padding: 20px;
  text-align: center;
}
</style>
</head>

<style>
.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

.dropdown {
    float: left;
    overflow: hidden;
    }

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    }

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
    }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<div class="navbar">
    <a href="../login/homePage.html">Lewis University</a>
    <div class="dropdown">
        <button class="dropbtn">Colleges</button>
        <div class="dropdown-content">
            <a href="../colleges/show_college.php">List Colleges</a>
            <a href="../colleges/search_college.html">Search Colleges</a>
            <a href="../colleges/new_college.html">Add Colleges</a>
        </div>
    </div> 
    <div class="dropdown">
        <button class="dropbtn">Department</button>
        <div class="dropdown-content">
            <a href="../department/show_department.php">List Department</a>
            <a href="../department/search_department.html">Search Department</a>
            <a href="../department/new_department.html">Add Department</a>
        </div>
    </div> 
    <div class="dropdown">
        <button class="dropbtn">Program</button>
        <div class="dropdown-content">
            <a href="../program/show_program.php">List Program</a>
            <a href="../program/search_program.html">Search Program</a>
            <a href="../program/new_program.html">Add Program</a>
        </div>
    </div> 
    <div class="dropdown">
            <button class="dropbtn">Concentration</button>
            <div class="dropdown-content">
                <a href="../concentration/show_concentration.php">List Concentration</a>
                <a href="../concentration/search_concentration.html">Search Concentration</a>
                <a href="../Concentration/new_concentration.html">Add Concentration</a>
            </div>
        </div> 

     <div class="dropdown">
            <button class="dropbtn">prefix</button>
            <div class="dropdown-content">
                <a href="../prefix/show_prefix.php">List Prefixes</a>
                <a href="../prefix/search_prefix.html">Search Prefixes</a>
                <a href="../prefix/new_prefix.html">Add Prefixes</a>
            </div>
        </div> 

    <div class="dropdown">
            <button class="dropbtn">Course</button>
            <div class="dropdown-content">
                <a href="../courses/show_course.php">List Course</a>
                <a href="../courses/search_course.html">Search Course</a>
                <a href="../courses/new_course.html">Add Course</a>
            </div>
        </div> 
    <div class="dropdown">
            <button class="dropbtn">Coures & Concentration</button>
            <div class="dropdown-content">
                <a href="../course_concentration/show_course_concentration.php">List Coures & Concentration</a>
                <a href="../course_concentration/search_course_concentration.html">Search Coures & Concentration</a>
                <a href="../course_concentration/new_course_concentration.html">Add Coures & Concentration</a>
            </div>
        </div> 

    <div class="dropdown">
        <button class="dropbtn">Course Type</button>
        <div class="dropdown-content">
            <a href="../course_type/show_course_type.php">List Course Type </a>
            <a href="../course_type/search_coures_type.html">Search Course Type</a>
            <a href="../course_type/new_course_type.html">Add Course Type</a>
        </div>
    </div> 


    <div class="dropdown">
        <button class="dropbtn">Course & Prereq</button>
        <div class="dropdown-content">
            <a href="../course_prereq/show_course_prereq.php">List Course & Prereq</a>
            <a href="../course_prereq/search_course_prereq.html">Search Course & Prereq</a>
            <a href="../course_prereq/new_course_prereq.html">Add Course & Prereq</a>
        </div>
    </div> 

    <div class="dropdown">
        <button class="dropbtn">Phrase</button>
        <div class="dropdown-content">
            <a href="../phrase/show_phrase.php">List Phrase</a>
            <a href="../phrase/search_phrase.html">Search Phrase</a>
            <a href="../phrase/new_phrase.html">Add Phrase</a>
        </div>
    </div> 

</div>

</head>

<body>
    <main role="main" class="container-fluid">
    <h1> Colleges </h1>

2 answers

solution1
 1  2019-10-21 04:45:28

For CSS, use external stylesheets. In your header, include this line:

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

And cut out all your css from <head> and paste it into mystyle.css .

What this does is that whenever you have linked the above line of code, that page will call the css styles from mystyle.css .

And to clean up your html code, you shouldn't clean your entire html, but rather, you should only clean up repeated html codes that would appear in other pages as well. Such as your navigation menu.

You can do so by using the php function called include

Try this:

1) Create a new file called navigation.php - Inside this, paste your entire navigation html code, starting from <div class="navbar">.....</div> .

2) Now for your html, you have to rename it as a .php . So instead of index.html it should be index.php .

3) Now include the navigation it in by doing so: 

<body>
   <?php include 'navigation.php';?>
   // your html codes of other things below your navigation
</body>

So this way you can call in repeated things such as navigation menu, footer and so on.

solution2
 0  2019-10-21 02:59:46

Although I would recommend using a framework like Laravel so you could use Blade to do this more efficiently & have it better organized, this would also work:

<?php
    require('path/to/file');
?>

//content

and have the path/to/file contain your header HTML code.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can i separate php code with html to have them both clean and separate in different files? How do I use Drupal to call my CSS or JavaScript files in another page and include them in multiple pages How can I include a CSS file in one PHP file, when all of my PHP files use a common header include? My php controller can't include css files Do I have to write PHP code in my HTML documents AND include it on EVERY page or can I use an external file just like css/js? In what directory do i put my mysql config.php files when setting up a website/app? How do I include PHP in my html form on a wordpress page? How can I clean up my query strings before using the values in my PHP? How can a php include access the css files What is causing my PHP page to render html tags as text (and what can I do to fix it)?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM