How do i get this in my webpage. I want to add the menu bar in my webpage

user_13731895 0
Viewed 34

I want the menu bar as shown in the picture in my webpage click hear to view the output required

Here what I have done till now .png

First time using stack overflow sorry if I didn't ask the question in the right way

My Code: HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DesignTemplate</title>
    <link rel="stylesheet" href="StyleSheet.css" />
  </head>
  <body>
    <p class="header">
      Program Name: Computer Engineering Technnology-Computing Science <br />
      Course Name: Web Programming
    </p>
    <p class="menu">Menu</p>
    <p class="content">Content</p>
    <p class="footer">
      040982223 <br />Saiharshal Nadiminti<br />nadi0009@algonquinlive.com
    </p>
  </body>
</html>

**CSS**
* {
  font-family: "Times New Roman";
  font-size: 10px;
  background-color: white;
  text-align: center;
}

h3 {
  color: green;
}

h4 {
  color: red;
}

p {
  padding: 15px;
}

.header {
  border: 3px solid;
  height: 70px;
  text-align: center;
}

.content {
  border: 3px solid;
  height: 400px;
  text-align: center;
}
.footer {
  border: 3px solid;
  height: 50px;
  text-align: center;
}
css html
1 Answers

You have to keep in mind that it's illegal to nest block-level elements inside <p></p>. But you can use <div></div> to contain anything you like. Keeping this in mind, the code is pretty straight-forward;

<div class="header">
   Program Name: Computer Engineering Technnology-Computing Science <br />
   Course Name: Web Programming
   <p class="menu">Menu</p>
</div>

with CSS (for placing .menu to right):

.menu {
    border: 3px solid;
    height: 24%;
    text-align: center;
    width: 20%;
    float: right;
}
user_74816630
Related