search

Home  >  Q&A  >  body text

Keep page elements consistent: Make sure your title or logo is consistent across pages

I have been working on my website for a while now and over time I have continued to add many sections to my website but I have been manually editing each page and every time I add a new button to redirect to a new section, and while this isn't difficult or takes too long, I'm not sure how well this will work in the long run.

The following are related titles

Is there a way to make these elements consistent on every page by changing just one file?

This is my HTML code

<div class="logocontainer">
 <a href="index.html">
 <img src="images/badasslogo.png" align="center" class="logo"></a>
 </div>
<body>

<div class="buttoncontainer">
  <a href="index.html">
    <img src="images/buttons/homebutton.png" class="button"></a>

  <a href="blog/blogmain.html">
    <img src="images/buttons/blogbutton.png" class="button"></a>

  <a href="art/artmain.html">
    <img src="images/buttons/artbutton.png" class="button"></a>

  <a href="fanart/fanartmain.html">
    <img src="images/buttons/fanartbutton.png" class="button"></a>

  <a href="partners/partnersmain.html">
    <img src="images/buttons/partnersbutton.png" class="button"></a>
    
  <a href="guestbook/guestbook.html">
    <img src="images/buttons/guestbookbutton.png" class="button"></a>

  <a href="servers/serversmain.html">
    <img src="images/buttons/serversbutton.png" class="button"></a>
    
  <a href="downloads/downloadsmain.html">
    <img src="images/buttons/downloadsbutton.png" class="button"></a>
    
  <a href="extras/extrasmain.html">
    <img src="images/buttons/extrasbutton.png" class="button"></a>

  <a href="donate/donatemain.html">
    <img src="images/buttons/donatebutton.png" class="button"></a>
  
  <a href="about/about.html">
    <img src="images/buttons/aboutbutton.png" class="button"></a>
</div>

This is CSS

.logocontainer {
   text-align: center;
}

.logo {
   display: inline-block;
   margin-bottom: 10px;
}

.buttoncontainer {
    text-align: center;
}

.button {
    display: inline-block;
}

P粉165823783P粉165823783486 days ago530

reply all(2)I'll reply

  • P粉014218124

    P粉0142181242023-09-09 11:36:15

    You need to add your menu to the menu.html page, and then call the menu.html page through jquery.

    menu.html

    <a href="index.html">
    <img src="images/buttons/homebutton.png" class="button"></a>

  <a href="blog/blogmain.html">
    <img src="images/buttons/blogbutton.png" class="button"></a>

  <a href="art/artmain.html">
    <img src="images/buttons/artbutton.png" class="button"></a>

  <a href="fanart/fanartmain.html">
    <img src="images/buttons/fanartbutton.png" class="button"></a>

  <a href="partners/partnersmain.html">
    <img src="images/buttons/partnersbutton.png" class="button"></a>
    
  <a href="guestbook/guestbook.html">
    <img src="images/buttons/guestbookbutton.png" class="button"></a>

  <a href="servers/serversmain.html">
    <img src="images/buttons/serversbutton.png" class="button"></a>
    
  <a href="downloads/downloadsmain.html">
    <img src="images/buttons/downloadsbutton.png" class="button"></a>
    
  <a href="extras/extrasmain.html">
    <img src="images/buttons/extrasbutton.png" class="button"></a>

  <a href="donate/donatemain.html">
    <img src="images/buttons/donatebutton.png" class="button"></a>
  
  <a href="about/about.html">
    <img src="images/buttons/aboutbutton.png" class="button"></a>

    Index.html

    <html>
<head>
    <title>abc</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="logocontainer">
        <a href="index.html">
            <img src="images/badasslogo.png" align="center" class="logo"></a>
        </div>
        <div class="buttoncontainer" id="buttoncontainer">

        </div>
        <script> <!-- Call this script on all page-->
            $(document).ready(function () {
                $('#buttoncontainer').load('menu.html');
            });
        </script>
    </body>
</html>

    reply
    0
  • P粉083785014

    P粉0837850142023-09-09 10:07:27

    You can do this:

    <div id="buttoncontainer">
</div>

<script src="./path-to/js/header.js"></script> // 在闭合的body标签之前添加

    In your header.js file, you can do this: 

    let headerContent = `
<a href="index.html">
    <img src="images/buttons/homebutton.png" class="button"></a>

  <a href="blog/blogmain.html">
    <img src="images/buttons/blogbutton.png" class="button"></a>

  <a href="art/artmain.html">
    <img src="images/buttons/artbutton.png" class="button"></a>

  <a href="fanart/fanartmain.html">
    <img src="images/buttons/fanartbutton.png" class="button"></a>

  <a href="partners/partnersmain.html">
    <img src="images/buttons/partnersbutton.png" class="button"></a>
    
  <a href="guestbook/guestbook.html">
    <img src="images/buttons/guestbookbutton.png" class="button"></a>

  <a href="servers/serversmain.html">
    <img src="images/buttons/serversbutton.png" class="button"></a>
    
  <a href="downloads/downloadsmain.html">
    <img src="images/buttons/downloadsbutton.png" class="button"></a>
    
  <a href="extras/extrasmain.html">
    <img src="images/buttons/extrasbutton.png" class="button"></a>

  <a href="donate/donatemain.html">
    <img src="images/buttons/donatebutton.png" class="button"></a>
  
  <a href="about/about.html">
    <img src="images/buttons/aboutbutton.png" class="button"></a>
`;
document.querySelector('#buttoncontainer').insertAdjacentHTML('beforeend', headerContent);

    Call this on all pages and once you make an edit in the js file it will be applied to all changes on all pages.

    reply
    0
  • Cancelreply