How does one add a right panel with images linked to another page to his/her website using html? {(CSS) included in the build.}

Question

I only have a website with 6 pages, a top navigational panel and a footer. To make it more appealing, I realize that it would be better if I had a right panel where I have pictures with relevant links to the other pages if the reader would like to skip the introduction or home page.

'''<html>
    <head>
        <title></title>
        
    <style>
        body { margin: 0;
                font-family: Ariel, Helvetica,sans-serif;}
        .topnav { overflow: hidden;
                background-color: #333;}
        .topnav a { float: left;
                    color: #f2f2f2;
                    text-align: center;
                    padding: 14px 16px;
                    text-decoration: none;
                    font-size: 17px;}
        .topnav a:hover { background-color: #ddd;
                        color: black;}
        .topnav a:active { background-color: #04AA6D;
                        color: white;}
                        
        .footer { position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;
                background-color: LightGrey;
                color: white;
                text-align: center;}
    </style>
    </head>

<body>
<div class = "topnav">
<a class = "active" href = "#home"> Home</a>
<a href = "Photo_Gallery.html"> Photo Gallery</a>
<a href = "Our_Work.html"> Our Work</a>
<a href = "include.html"> Get Involved</a>
<a href = "contacts.html"> Contact Us</a>
<a href = "about.html"> About Us</a>
</div>
<marquee direction = "right" width = "850" hspace = "240px"><h2 align = "center">Welcome to Football Club Barcelona</h2></marquee>
<hr size = "5" color = "purple">
<p align = "center"><img src = "barcalogo.jpeg" align = "center" width = "178px" height = "169px"></p>
<hr size = "3"  color = "red">

<h2 style = "color: navy"> Introduction</h2>

<p>Here we bring you one of the most successful multi-sport club on the planet. FC Barcelona have trumpeted the Ueropean scene for over a decade now, and are continuously building on that. In this article we will show you their <b>histroy football</b>, the <b>biggest names</b> that made the most important changes and <b>their style of play</b>.</p>
<p> Now, before we continue, you must know that this club comes a long way. There were seasons where they won nothing. And I mean <i>nothing</i> for a long long time. This article will be an example of one of the greatest defination of staying in the game. The only difference with this defination though, is that these were and are actions.</p>

<h3 style = "color: maroon"> History Football</h3>



<div class = "footer">
<p>We hope you were enthrilled with who we are.</p>
<p> Please proceed to our gallery to view our magical moments. &#128525;</p>
<a href = "Photo_Gallery.html" align = "right"> Next>> </a>

</div>



</body>`enter code here`

</head>
'''

body {
  margin: 0;
  font-family: Ariel, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a:active {
  background-color: #04AA6D;
  color: white;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: LightGrey;
  color: white;
  text-align: center;
}

<body>
  <div class="topnav">
    <a class="active" href="#home"> Home</a>
    <a href="Photo_Gallery.html"> Photo Gallery</a>
    <a href="Our_Work.html"> Our Work</a>
    <a href="include.html"> Get Involved</a>
    <a href="contacts.html"> Contact Us</a>
    <a href="about.html"> About Us</a>
  </div>
  <marquee direction="right" width="850" hspace="240px">
    <h2 align="center">Welcome to Football Club Barcelona</h2>
  </marquee>
  <hr size="5" color="purple">
  <p align="center"><img src="barcalogo.jpeg" align="center" width="178px" height="169px"></p>
  <hr size="3" color="red">
  <h2 style="color: navy"> Introduction</h2>
  <p>Here we bring you one of the most successful multi-sport club on the planet. FC Barcelona have trumpeted the Ueropean scene for over a decade now, and are continuously building on that. In this article we will show you their <b>histroy football</b>,
    the <b>biggest names</b> that made the most important changes and <b>their style of play</b>.</p>
  <p> Now, before we continue, you must know that this club comes a long way. There were seasons where they won nothing. And I mean <i>nothing</i> for a long long time. This article will be an example of one of the greatest defination of staying in the game.
    The only difference with this defination though, is that these were and are actions.</p>
  <h3 style="color: maroon"> History Football</h3>
  <div class="footer">
    <p>We hope you were enthrilled with who we are.</p>
    <p> Please proceed to our gallery to view our magical moments. &#128525;</p>
    <a href="Photo_Gallery.html" align="right"> Next>> </a>
  </div>
</body>

Please post HTML and CSS you have and what your specific challenge is with that attempt so we may best assist you here. — Mark Schultheiss, Aug 12 '22 at 16:15
I added a snippet to assist you in including the HMTL, CSS and if you have any JavaScript. — Mark Schultheiss, Aug 12 '22 at 16:18
Yes please, we cannot help fix code without well, code and knowing your specific challenge with it. Hope that makes sense. IF it helps you can review https://stackoverflow.com/help/how-to-ask — Mark Schultheiss, Aug 12 '22 at 16:20
Just put ONE page with the code for your question, no need to have a huge amount, just what will reproduce your one challenge you have encountered — Mark Schultheiss, Aug 12 '22 at 16:22
Hey, I just attempted to copy all my code on the body but it gives errors and cannot be posted. Please forgive me, I am new to this GitHub and StackOverFlow. — Nhlanhla_NhliXo, Aug 12 '22 at 16:41
Just get ONE page as rendered and copy (directly from the browser?) the smallest part of that that reproduces your challenge, then do the same for the CSS - remember just the small part for the one question you have will suffice — Mark Schultheiss, Aug 12 '22 at 16:43
Okay, I just edited the post. Please Mr Mark, may you preview it. — Nhlanhla_NhliXo, Aug 12 '22 at 16:49
OK I created a snippet (that runs here) so now please explain as simply as possible what your one challenge/issue is with/based upon that. - and add that to the question. — Mark Schultheiss, Aug 12 '22 at 17:13
Note the code you posted has a trailing "head" tag so I assume that was just a copy/paste issue. i.e.: `
`enter code here` ` — Mark Schultheiss, Aug 12 '22 at 17:14
Yeah, the code must include the that creates a right of the webpage pane. The pane has to have relevant links. — Nhlanhla_NhliXo, Aug 12 '22 at 17:21

score 0 · Accepted Answer · answered Aug 13 '22 at 00:09

Frankly I am going to "guess" here and put some "guesswork" into what is to be IN the "right pane" - but this should give you a starting point to work from.

OK this is quite a bit of overkill and way overly styled and can be cut down.

Main point here is the display:flex; and how things are stacked or in line depending.

Note I used .parent-container and set the middle-block with flex:1; to get the footer to stick to the bottom.

Run it here small and in the full window using the Full Page link when you click the Run Code Snippet to see how it adjusts to the size a bit.

Super ugly colors just to show where things are.

body {
  margin: 0;
  font-family: Ariel, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
}

.parent-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header.section {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.middle-block {
  flex: 1;
  display: grid;
  grid-template: 1fr auto 1fr;
}

.left-side {
  grid-column: 1 / 2;
  background-color: #eeeeff;
  width: 10rem;
}

main {
  grid-column: 2 / 3;
  background-color: #ffefef;
}

.right-side {
  grid-column: 3 / 4;
  width: 10rem;
  background-color: #eeffee;
}

.right-side .no-bullets .link-thing {
  font-size: 0.85rem;
  padding-left: 0em;
  text-indent: -2em;
  list-style-type: none;
}

.link-thing:hover {
  color: orange;
}

.parent-container .section {
  font-size: 1rem;
  padding: 1rem;
  border-style: dashed;
  border-width: 0.1rem;
  border-color: red;
}

header.section {
  background-color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header.section .topnav {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

header.section .topnav .nav-item {
  color: #f2f2f2;
  background-color: #fefe00;
  height: 1.1rem;
  padding: 0.25rem;
  margin-bottom: 0.5rem;
}

.topnav .nav-item a {
  text-decoration: none;
  font-size: 1rem;
}

header.section .nav-item:hover {
  background-color: #ddd;
  color: black;
}

header.section .topnav .nav-item a:active {
  background-color: #04AA6D;
  color: white;
}

footer {
  background-color: LightGrey;
  color: white;
}

footer .footer-text * {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.marquee-not {
  color: black;
  background-color: #ffdddd;
}

<body>
  <div class="parent-container">
    <header class="section">
      <div class="topnav">
        <span class="nav-item">
        <a class="active" href="#home">Home</a>
        </span>
        <span class="nav-item">
        <a href="Photo_Gallery.html">Photo Gallery</a>
         </span>
        <span class="nav-item">
        <a href="Our_Work.html">Our Work</a>
         </span>
        <span class="nav-item">
        <a href="include.html">Get Involved</a>
         </span>
        <span class="nav-item">
        <a href="contacts.html">Contact Us</a>
         </span>
        <span class="nav-item">
        <a href="about.html">About Us</a>
         </span>
      </div>
      <marquee class="marquee-not" direction="right" width="850" hspace="240px">
        <h2 align="center">Welcome to Football Club Barcelona</h2>
        <span>Don't use marquee ref:<a href="https://stackoverflow.com/q/31951282/125981"  target="_blank">https://stackoverflow.com/q/31951282/125981</a></span>
      </marquee>
    </header>
    <div class="middle-block">
      <div class="left-side section">
        <h4>Here we are in the left side pane</h4>
        <ul>
          <li>Just to have some things</li>
          <li>More</li>
          <li>Just more things</li>
        </ul>
      </div>
      <main class="section">
        <hr size="5" color="purple">
        <p align="center"><img src="barcalogo.jpeg" align="center" width="178px" height="169px"></p>
        <hr size="3" color="red">
        <h2 style="color: navy"> Introduction</h2>
        <p>Here we bring you one of the most successful multi-sport club on the planet. FC Barcelona have trumpeted the Ueropean scene for over a decade now, and are continuously building on that. In this article we will show you their <b>histroy football</b>,
          the <b>biggest names</b> that made the most important changes and <b>their style of play</b>.</p>
        <p> Now, before we continue, you must know that this club comes a long way. There were seasons where they won nothing. And I mean <i>nothing</i> for a long long time. This article will be an example of one of the greatest defination of staying in
          the game. The only difference with this defination though, is that these were and are actions.</p>
        <h3 style="color: maroon">History Football</h3>
      </main>
      <div class="right-side section">
        <h4>Right Sidebar</h4>
        <ul class="no-bullets">
          <li class="link-thing"><a>Go Somewhere</a></li>
          <li class="link-thing"><a>Go Somewhere New</a></li>
          <li class="link-thing"><a>Go Somewhere Middl</a></li>
          <li class="link-thing"><a>Go Somewhere Old</a></li>
          <li class="link-thing"><a>Go Somewhere Future</a></li>
        </ul>
      </div>
    </div>
    <footer class="footer-block section">
      <div class="footer-text">
        <p>We hope you were enthrilled with who we are.</p>
        <p> Please proceed to our gallery to view our magical moments. &#128525;</p>
        <a href="Photo_Gallery.html" align="right"> Next>> </a>
      </div>
    </footer>
  </div>
</body>

How does one add a right panel with images linked to another page to his/her website using html? {(CSS) included in the build.}

1 Answers1