CODEWITHSUNDEEP
htmlcss
cephlot
cephlot

Reputation: 144

Html edit page content

I am new to html and css and found this sidebar example that I want to use. The problem is that the content appears on all sidebar pages.

How do I get content to my other pages?

I can see that the web page changes to the different pages when I click on them. But the content is still the same. I think that the is wrong somehow, or that I have to create a class for every page but I don't know the syntax.

    <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; /* Same as the width of the sidenav */
        font-size: 28px; /* Increased text to enable scrolling */
        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>

Upvotes: 0

Views: 146

Answers (2)

Khushbu Vaghela
Khushbu Vaghela

Reputation: 619

You should make the other pages as well, i.e. about.html and add your content there and add it to the anchor tag's href as shown below.

<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; /* Same as the width of the sidenav */
        font-size: 28px; /* Increased text to enable scrolling */
        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>

Upvotes: 0

Jakub Rusilko
Jakub Rusilko

Reputation: 877

It will not work like that with just the html. In order to actually replace the content of the 'main' section you would have to use javascript. You can do this with plain javascript or using one of the popular frameworks such as Angular or any of the others. If you want to stick to only html and css for simplicity, I can see two options:

1 - You create a separate html page for every content that you have and on each of them you copy-paste everything related to the general layout and the sidenav, but put a different content. Then you change the navbar links to point to the other html pages

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

This is very simple but a nightmare to manage if the page grows, however you will be working with the things you know and maybe this is a good way to go for learning the basics.

2 - You can put all your content on the single page and create named sections for different parts. Then you keep the links as they are, because currently they point to IDs on the current page (the '#idname' syntax). Then you just need to add IDs to each section that will match the links.

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

Links at this point will just scroll your page down to the selected section. This is again not what you wanted but this is something that will work with just html and css. See this fiddle for the example of the second approach: https://jsfiddle.net/gouk0b8t/

Upvotes: 1

Related Questions