Update the content on the HTML page

Question

Update the content on the HTML page

I am new to coding with HTML and CSS and recently came across a sidebar example that caught my eye. However, I'm facing an issue where the content appears the same on all the different pages of the sidebar.

How can I make sure that the content changes based on the page?

While navigating through the web pages using the sidebar, I noticed that the URL changes but the content remains constant. I suspect there might be an error in the code or perhaps I need to create separate classes for each page, but I'm unsure about the syntax to achieve this.


                <head>
                <title>OpereX Project</title>
                <style>
                    body {
                        font-family: "Lato", sans-serif;
                    }
                    
                    .sidenav {
                        height: 100%;
                        width: 160px;
                        position: fixed;
                        z-index: 1;
                        top: 0;
                        left: 0;
                        background-color: #99ccff;
                        overflow-x: hidden;
                        padding-top: 20px;
                    }
                    
                    .sidenav a {
                        padding: 6px 8px 6px 16px;
                        text-decoration: none;
                        font-size: 25px;
                        color: black;
                        display: block;
                    }
                    
                    .sidenav a:hover {
                        color: #f1f1f1;
                    }
                    
                    .main {
                        margin-left: 160px;
                        font-size: 28px; 
                        padding: 0px 10px;
                    }
                    
                    @media screen and (max-height: 450px) {
                        .sidenav {padding-top: 15px;}
                        .sidenav a {font-size: 18px;}
                    }
                </style>
                </head>
                <body>

                <div class="sidenav">
                <a href="#about">About</a>
                <a href="#services">Services</a>
                <a href="#clients">Clients</a>
                <a href="#contact">Contact</a>
                </div>

                <div class=main>
                <h2>Project</h2>
                </div>
                
                </body>
                </html>

html css

Answer 1

Answer №1

To achieve the desired result, using just HTML is not enough. You will need to incorporate JavaScript in order to replace the content of the 'main' section effectively. This can be done with plain JavaScript or by utilizing popular frameworks like Angular or similar ones. If you prefer sticking to HTML and CSS for simplicity, there are two possible options:

1 - Create separate HTML pages for each piece of content, ensuring that the general layout and sidenav elements are consistent across all pages. Then, modify the navbar links to direct users to the respective HTML pages.

<a href="services.html">Services</a>

While this method is straightforward, it may become challenging to manage as the page expands. However, it allows you to work within your comfort zone and serves as a good learning opportunity for mastering the basics.

2 - Consolidate all content onto a single page and designate named sections for different segments. Maintain the existing links as they target IDs on the current page (using the '#idname' syntax). Simply assign IDs to each section that correspond to the links.

<div id="clients">
    clients content
</div>

These links will smoothly scroll your page down to the specified section upon selection. Although this may not align exactly with your initial goal, it presents a viable solution using only HTML and CSS. Feel free to explore an example of the second approach in action through this fiddle: https://jsfiddle.net/gouk0b8t/

Answer 2

To achieve the desired result, using just HTML is not enough. You will need to incorporate JavaScript in order to replace the content of the 'main' section effectively. This can be done with plain JavaScript or by utilizing popular frameworks like Angular or similar ones. If you prefer sticking to HTML and CSS for simplicity, there are two possible options:

1 - Create separate HTML pages for each piece of content, ensuring that the general layout and sidenav elements are consistent across all pages. Then, modify the navbar links to direct users to the respective HTML pages.

<a href="services.html">Services</a>

While this method is straightforward, it may become challenging to manage as the page expands. However, it allows you to work within your comfort zone and serves as a good learning opportunity for mastering the basics.

2 - Consolidate all content onto a single page and designate named sections for different segments. Maintain the existing links as they target IDs on the current page (using the '#idname' syntax). Simply assign IDs to each section that correspond to the links.

<div id="clients">
    clients content
</div>

These links will smoothly scroll your page down to the specified section upon selection. Although this may not align exactly with your initial goal, it presents a viable solution using only HTML and CSS. Feel free to explore an example of the second approach in action through this fiddle: https://jsfiddle.net/gouk0b8t/

Answer 3

Answer №2

It is advisable to create additional pages, such as about.html, and input relevant content there. Furthermore, make sure to update the anchor tag's href attribute accordingly.

<head>
    <title>OpereX Project</title>
    <style>
    body {
        font-family: "Lato", sans-serif;
    }
    
    .sidenav {
        height: 100%;
        width: 160px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #99ccff;
        overflow-x: hidden;
        padding-top: 20px;
    }
    
    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 25px;
        color: black;
        display: block;
    }
    
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    .main {
        margin-left: 160px;
        font-size: 28px;
        padding: 0px 10px;
    }
    
    @media screen and (max-height: 450px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }
    </style>
    </head>
    <body>
    
    <div class="sidenav">
      <a href="about.html">About</a>
      <a href="services.html">Services</a>
      <a href="clients.html">Clients</a>
      <a href="contact.html">Contact</a>
    </div>
    
    <div class=main>
      <h2>Project</h2>
    </div>
         
    </body>
    </html>

Answer 4

It is advisable to create additional pages, such as about.html, and input relevant content there. Furthermore, make sure to update the anchor tag's href attribute accordingly.

<head>
    <title>OpereX Project</title>
    <style>
    body {
        font-family: "Lato", sans-serif;
    }
    
    .sidenav {
        height: 100%;
        width: 160px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #99ccff;
        overflow-x: hidden;
        padding-top: 20px;
    }
    
    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 25px;
        color: black;
        display: block;
    }
    
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    .main {
        margin-left: 160px;
        font-size: 28px;
        padding: 0px 10px;
    }
    
    @media screen and (max-height: 450px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }
    </style>
    </head>
    <body>
    
    <div class="sidenav">
      <a href="about.html">About</a>
      <a href="services.html">Services</a>
      <a href="clients.html">Clients</a>
      <a href="contact.html">Contact</a>
    </div>
    
    <div class=main>
      <h2>Project</h2>
    </div>
         
    </body>
    </html>

Update the content on the HTML page

Answer №1

Answer №2

Similar questions

Using a div in React to create a vertical gap between two React elements

Centering a floating div in IE causes issues

Interactions with jQuery and the .load() method

Container slide-show fill error

I'm curious as to why a webpage tends to load more quickly when CSS files are loaded before script files. Can anyone shed some

Equal-height columns in a responsive grid system

I am looking to optimize my custom tailwindcss file by reducing its size

Modify the appearance of certain text within an input field

Adjusting the columns of two tables when one table is held in place

What is the best way to resolve the CSS border styling issue surrounding the anchor element?

What could be causing my form to not be centered on the screen?

Is there a more efficient method for transforming an HTML form into an object through serialization?

Ways to choose tags that do not contain a particular tag within them

Is the row border camouflaged by the background?

When using the `display: table-cell` property on a div element, it does not automatically respect

When images are placed within a div, they become tightly packed together and do not allow

Modify the color of a hotspot area when the mouse is hovered over it

` `CSS hover effect not displaying``

Tips on utilizing jQuery to trim and manipulate the current URL

Automatically adjust height directive to fill up the remaining space