0

I have this css for the header:

.panelSuperior{
    position: relative;
    top: 0;
    left: 0;

    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
}

.logo{
    position: absolute;
    top: 25px;
    left: 35%;

    width: 350px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

here's my html:

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>index.html</title>
<link rel="stylesheet" href="index.css">

</head>

<body>
    <div class="panelSuperior">
        <img alt="fondoPrincipal" src="fondoPrincipal.jpg" class="panelSuperior"/>
    </div>

    <div class="logo">
        <img alt="logoFlorida" src="logoFlorida.png" class="logo"/>
    </div>
    <br>
</body>
</html>

I want to use that header for all my html pages I have. I tried doing some research online but all answers are with php, and I have to do it with html. Is there any way to do that?

Aldimir
  • 193
  • 1
  • 2
  • 16
  • You can use these css rules for different pages (just load your index.css file in all the pages where you need it). As for your HTML, if you can not use a Backend language (such as PHP), duplicate the same code in the other html files – ludovico May 08 '19 at 20:33
  • You could save the header code in a file, e.g. `header.html` and load it as an `iframe` element. – disinfor May 08 '19 at 20:34
  • @disinfor suggests using an iframe. Also, in the link provided earlier, there are many answers suggesting to use JavaScript. I strongly discourage you using any of this two options (JavaScript / iframe). They work but they're probably not the best solution, specially considering that this is for the header of your page – ludovico May 08 '19 at 20:38
  • @ludovico I only gave the iframe example as it's HTML only. As far as JS (or any of the solutions on the duplicate question), it's completely valid solution - what makes the header any different? OP doesn't have to include the `` tags and the include could only be the two divs (which is what the question infers). I think the OP is using header in a broad sense to include just those two divs. – disinfor May 08 '19 at 21:13
  • I'm just saying that they're probably not the best solution (for example, in terms of UX and accessibility), specially if this is intended to be the primary section at the top of your website. – ludovico May 08 '19 at 22:57

1 Answers1

1

Old school stuff before server side languages even existed.

Option 1

  • Copy / paste the header on all your html pages

Option 2

  • Use Javascript to "include" that div. Example follows using jQuery but you can easily do it with Vanilla Javascript

    $('body').prepend('Your header code');

Option 3

  • Use an iFrame for the header
Community
  • 1
  • 1
Carlos Alves Jorge
  • 1,919
  • 1
  • 13
  • 29