Putting in a header that is HTML

HTML-CSS
1

Hi

So I know how to include a header that is PHP. Like this in the index-file:

<?php include 'header.php';?>

And in the header.php-file like this: <?php echo '<link rel="stylesheet" href="stylesheet2.css">

<div class="topmenu"> and etc…

But what if my header-file is an HTML-file? How should I include it then? And what should it look like in the header.html-file itself? Instead of <?php echo ', in the beginning

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

Hmm I solved this with some JQuery and stuff. Only problem is that when I included this it fd-up my link list below like this:

Before:

before
before2518×992 131 KB

After:

After
After2000×727 115 KB

This was after I pasted this JQuery stuff to include the index.header like this:

    <title>FROGLEGS</title>

    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 

    <link rel="stylesheet" href="css/stylesheet.css">

And further down:

<div id="header"></div>

Any idea on how to not get wrecked links like this:

Links
Links780×230 14.2 KB

4

I’m not sure I understand, is this plain HTML or PHP?

5

This is an HTML-file which has included some PHP in the script-tag. But this is the only PHP. I used that to be able to include a header and footer from other files.

But that list with the home,services etcetera became inline when I did. Or they are not read from upside down on new rows as they should.

This also took place in the footer:

Footer off
Footer off1638×680 13.2 KB

7

I posted the complete code in another thread as well. Which you might know how to solve as well maybe. This one: Position:fixed in topbar disables Javascript

Here is HTML-file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FROGTIME</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <div class="frogline">>Everything frog</div>

    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 

    <link rel="stylesheet" href="css/stylesheet.css">
    <div id="header"></div>

</head>
<body>
    <h1 class="Froglegs">FROGTIME</h1>



    <p>Frogs like to eat insects when they are hungry</p>
    <div class="container">
        <header>
        <img src="images/Frog.svg" alt="23andfour logo" class="logo" id="logo">

        <nav>
           <a href="#" class="hide-desktop">
               <img src="images/ham.svg" alt="toggle menu" class="menu" id="menu">
           </a>
            <ul class="show-desktop hide-desktop" id="nav">
                <li id="exit" class="exit-btn hide-desktop"><img src="images/exit.svg" alt="exit menu"></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li> 
                <li><a href="#">Contact</a></li> 
            </ul>
        </nav>
    </header>
    <section class="Boxen">
        <h1 class="h1-z">Frogs love to swim slowly during the day when the fish are less active</h1>
        <img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="images/Frog.svg" alt="server graphic" width="100" height="100" class="Frog">

        <p class="subhead">Frogs also like to sleep</p>
<button id="Frogbutton" type="button">Click for frog  sound</button>    
</section>
    </div>

    <img src="images/FrogLogo.jpg" alt="server graphic" class="server">



    <div class="blue-container">
        <div class="container">
            <ul>
                <li>
                    <p>Frogs like swimming</p>
                </li>
                <li>
                    <p>Frogs like swimming</p>
                </li>
                <li><p>Frogs like swimming</p></li>
            </ul>
        </div>
    </div>

    <div class="gray-container">
        <div class="container">
            <ul>
                <li>

                </li>
            </ul>
        </div>
    </div>

    <p id="demo">This site is about frogs</p>
<div>
    <button onclick="myFunction()" class="Frogs">What do frogs like?</button>
    <p id="Frog1"></p>
    </div>

    <div id="footer"></div>

    <script>
        function bigImg(x) {
  x.style.height = "100px";
  x.style.width = "100px";
}

function normalImg(x) {
  x.style.height = "160px";
  x.style.width = "160px";
}
function myFunction() {
  var str = "Frogs like to chill out";
  var result = str.fontcolor("darkgreen");
  document.getElementById("Groda").innerHTML = result;
}
document.getElementById("demo").style.color= "green";


    </script>

</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');

/* Custom Properties */

* {
  box-sizing: border-box;
}

h1:hover{
    color:red;
    text-shadow: red 2px 2px 10px;
}

body {
    font-family: 'Montserrat', 'sans-serif';
    background-image: linear-gradient(45deg, white, #e6e6ff,orange, green);
  }

body p{
  font-weight: bold;
}


p:first-child {
    color:green;
    text-shadow: blue 2px 2px 10px;
}

.text {
  color: #3d9801;
  text-shadow: orange 2px 2px 2px;}

h1 {
  color: #3d9801;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: bold;
  margin-left: 5px;
  font-size: 43px;
  text-shadow: black 2px 2px 10px;
}

h1 a{
  color: #196719;
  font-family: 'Montserrat', 'sans-serif';
  font-weight: bold;
  margin-left: 5px;
  font-size: 43px;
  text-shadow: black 2px 2px 10px;
}

.boxen{
  z-index: -4;
}

.boxen:first-child{
  z-index: -1;
}


.server {
  object-fit: cover;
position: absolute;
top: 340px;
right: 15px;
left: 250px;
width:24%;
height:29.3%;
border-radius: 2px;
z-index: -2;
margin-left:10;
}

.topmenu {
  overflow: hidden;
  background-color: #3d9801;
  padding-top: 5px;
  padding-bottom: 0px;
  height: 36px;
  margin-top: 0px;
  background-image: linear-gradient(to right, #3d9801 ,#3d9801, #3d9801, white);
}

.Froglegs {
  position: absolute;
  margin-right: 25px;
  margin-left: 1000px;
  margin-top: 65px;
  font-size: 50px;
}

.topmenu a {
  color: #f2f2f2;
  padding-left: 25px;
  padding-right: 25px;
  text-decoration: none;
  font-size: 18px;
  position: relative;
  margin-left: 90px;
  margin-top: 10px;
  margin-bottom: 0px;
  bottom: 14px;
  font-family: 'Montserrat';
}

.Frog{
  position: absolute;
  top:-100px;
  margin-top:0px;
  margin-bottom: 20px;
  padding-top: 0px;
}

li {
  float: left;
  font-weight: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #196719;
}

li.dropdown {
  display: inline-block;
}

.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;
  margin-top: 5px;
}

.dropdown-content a {
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
  padding-bottom: 20px;
  padding: 12px 16px;
  z-index: 2;
}

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

.dropdown:hover .dropdown-content {
  display: block;
}

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

a:hover {
  color: #0300ea;
  text-shadow: 0px 0px 1px orangered;
}



.topmenu a:hover {
  background-color: #ddd;
  color: black;
  text-shadow: none;
}


/*.logo {
  position: absolute;
  left: 0px;
  top: 110px;
  bottom: 0px;
  z-index: -3;
  object-fit: cover;
}*/

.logo {
object-fit: cover;
position: absolute;
top: 36px;
right: 150px;
left: 0px;
width:24%;
height:29.3%;
z-index: -3;
border-radius: 2px;
}

.butt {
  width: 2px;
  border: 2px solid green;
  border-radius: 40%;
}

ul {
  font-weight: normal;
}

/* Here the footer begins */

*,*:before,*:after{
  box-sizing: border-box;
}

body{
  font-family: Montserrat;
  margin: 0;
  font-size: 14px;
  display: grid;
}

main{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
line-height: 3.8;
font-size:80px;
text-transform: uppercase;
font-weight: bold;
}

footer{
display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
flex-flow: row wrap;
padding: 50px;
color: #fff;
background-color: #3d9801;
display: flex;
flex-direction:row;
margin: auto;
}

.footer > *{
  flex: 1 100%;
}

.footer-left{
  margin-right: 1.25em;
  margin-bottom: 2em;
}

.footer-left img{
  width: 50%;
}

h2{
  font-weight: 400;
  font-size: 17px;
}

.footer ul{
  list-style:none;
  padding-left:0;
}
.footer li{
  line-height:2em;
}
.footer a{
  text-decoration: none;
}
.footer-right{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
}
.footer-right > * {
  flex:1 50%;
  margin-right: 1.25em;
}
.box a{
  color: #fff;;
}
.footer-bottom{
  text-align:center;
  color: #fff;
padding-top: 50px;
}
.footer-left p{
  padding-right: 20%;
  color: #fff;
}
.socials a{
  background: #364a62;
  width:40px;
  height:40px;
  display:inline-block;
  margin-right:10px;
}
.socials a i{
  color: #e7f2f4;
  padding: 10px 12px;
  font-size: 20px;
}

@media screen and (min-width: 600px){
  .footer-right > *{
      flex:1;
  }
  .footer-left{
      flex:1 0px;
  }
  .footer-right{
      flex:2 0px;
  }
}
@media screen and (max-width: 600px){
  .footer{
      padding:15px;
  }
  main{
      font-size:55px;
  }
}