I need help fixing my website

Joined
Oct 15, 2023
Messages
2
Reaction score
0
Im a student that recently started studying computer science. We were asked to make a website with a navigation bar, 5pages and in each page credits.
Ive had some problems with the design of the page and Im hoping you could help me.
The problems are as following:
1.I would like the background image that I added to cover the whole background of the site instead of what it is like right now.
2.I would like the all rights reserved to rectangle to be alligned to the navigation bar(move it up).
3.I would like the navigation bar if possible to start from the top left of the site to the top right of it without any spaces as there are right now.
4.I would like to change the title of the homepage in the tabs section to Home Page.
5.I would like to make The "welcome to the..." rectangle, the "fun facts about..." and the "html stands for..." texts to be as they are right now but with no spaces between them.
6.Right now when I hover on the information and go down to general information it closes because of the text... I tried to fix it with layers (z-index) but it didn't work.
Im looking forward to learning html and css so if you see something in my code that I can improve(which im sure you will) I would like you to point it out so I can get better!
We are currently on a vacation so the teacher can't help me fix it so I'm hoping you can.
Im adding the code here:

MasterPage:
HTML:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>4/2
    <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
    <link rel="stylesheet" href="StyleSheet1.css" type="text/css" />
</head>
<body style="background-image: url(https://img.freepik.com/free-vector/neon-light-arrow-direction-perspective_1017-22033.jpg?w=1060&t=st=1697228411~exp=1697229011~hmac=29c4e2037c22b4e2ac1e1e4861cbc31be46e09a38beba44902b788050999dbd2);width:1220px;z-index:1;">

    <table class="NavBar">
      <tr">
       <td>
        <ul>
            <li><a href="HomePage.aspx">Home</a></li>
            <li><a href="">Information</a>
                <ul>
            <li><a href="HistoryPage.aspx">History</a></li>
            <li><a href="GeneralInformationPage.aspx">General Information</a></li>
               </ul>
            </li>
            <li><a href="RecommendedLinksPage.aspx">Recommended Links</a></li>
            <li><a href="GalleryPage.aspx">Gallery</a></li>
            <li style="width:215px;font-size:10px;margin-left:1000px;margin-top:0px">©All Rights Reserved To Nadav Weissman</li>
        </ul>
       </td>

      </tr>
        </table>
        <form id="form1" runat="server">
    
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    
    </form>
</body>
</html>

HomePage:
HTML:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="HomePage.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style>        table, th, td {
            
        }
    </style>
    <title>Home Page</title>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
            <h1 class="FunFacts";style="color:cornsilk;">Welcome to The html Information Website!<br /></h1>
    <table class="HomePage">
        <tr>
<th>
     <p>Fun Facts About Html</p>
</th>
        </tr>
        <tr style="border-color:#D1DEDE">
            <td class="TD">
                HTML stands for HyperText Markup Language
            </td>
        </tr>
    </table>
            
</asp:Content>

CSS:
CSS:
body {
    font-family: 'Californian FB';
}
ul{
margin: 0;
padding:0;
list-style:none;
}

ul li {
        float: left;
        width: 250px;
        height: 50px;
        background-color: lightskyblue;
        opacity: 1;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
       }

ul li a{
    text-decoration:wavy;
    color:whitesmoke;
    display:flex;
}



    ul li ul li {
        display: none;
      
    }

    ul li:hover ul li {
        display: block;
    }

a {
    box-shadow: inset 0 0 0 0 #54b3d6;
    color: #54b3d6;
    padding: 0 .25rem;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

    ul li a:hover {
        box-shadow: inset 250px 0 0 0 #54b3d6;
        color: white;
    }

ul li ul li {
    box-shadow: inset 250px 0 0 0 cornflowerblue;
    color: white;
}

    ul li ul li:hover {
        box-shadow: inset 250px 0 0 0 #18eaed;
    }

.NavBar {
    width: 100%;
    border:none;
    z-index:2;
}
h5 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:aliceblue;
    background-color:lightskyblue;
    width:200px;
    height:50px;
    text-align:center;
    line-height: 50px;
    font-size:10px;
    opacity:1;
}

.FunFacts {
    background-color: #5B618A;
    color: #000;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    margin: 0 0 0 0;
    z-index: 3;
}

.HomePage p {
    background-color: #5edaf0;
    color: #000;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    font-size: 30px;
    font-weight: bolder
}

.TD {
    background-color: #5edaf0;
    color: #1D201F;
    padding: 10px 25px;
    border-color: #D1DEDE;
    font-size: 20px;
    font-weight:bold;
    border: solid 2px;
    border-radius: 0px;
    margin: 0px;
}

.HomePage{
    z-index: 3;
    margin: 0px;
}
1697390576350.png
 
Joined
Jul 4, 2023
Messages
406
Reaction score
47
First in 2023 we do not use <table> to create the website layout and float in css either.

Here is an example of pure html and css without .net c#, what your project might look like
[ code on-line ]
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Your title here</title>
    <link rel="stylesheet" href="StyleSheet.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="HomePage.aspx">Home</a></li>
          <li>
            <a href="#">Information</a>
            <ul>
              <li><a href="HistoryPage.aspx">History</a></li>
              <li><a href="GeneralInformationPage.aspx">General Information</a></li>
            </ul>
          </li>
          <li><a href="RecommendedLinksPage.aspx">Recommended Links</a></li>
          <li><a href="GalleryPage.aspx">Gallery</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h1 class="fun-facts">Welcome to The html Information Website!</h1>
      <p>Fun Facts About Html</p>
      <p class="td">HTML stands for HyperText Markup Language</p>
    </main>

    <footer>
      ©All Rights Reserved To Nadav Weissman
    </footer>
  </body>
</html>

StyleSheet.css
CSS:
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  --padding05: .5rem;
  --header-height: 50px;

  padding: 0 var(--padding05);
  font-family: 'Californian FB';


  background-color: black;
  background-image:
    url('https://img.freepik.com/free-vector/neon-light-arrow-direction-perspective_1017-22033.jpg?w=1060');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}
header,
main,
footer {
  width: calc(100% - (var(--padding05) * 2));
  padding: var(--padding05);
}
header {
  position: fixed;
  left: var(--padding05); top: var(--padding05);
  display: flex;
  align-items: center;
  height: var(--header-height);
  background-color: hsl(203.5deg 92% 75.5% /.95); /* lightskyblue */
}
header nav {
  width: 100%;
}
header nav ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style: none;
}
header nav ul ul {
  display: none;  
}

header ul li:hover ul {
  position: absolute;
  top: 1rem;
  z-index: 99;
  display: block;
  padding: var(--padding05);
  background-color: hsl(203.5deg 92% 75.5% /.95); /* lightskyblue */
}
header nav a {
  box-shadow: inset 0 0 0 0 #54b3d6;
  color: whitesmoke;
  padding: 0 .25rem;
  text-decoration: none;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
header nav a:hover {
  box-shadow: inset 250px 0 0 0 #54b3d6;
  color: white;
}
main {
  padding-top: calc(var(--header-height) + (var(--padding05) * 2));
}
main .fun-facts {
  background-color: #5b618a;
  color: cornsilk;
  padding: 10px 25px;
  border: 0;
  border-radius: 5px;
}
main p {
  background-color: #5edaf0;
  color: black;
  padding: 10px 25px;
  border: 0;
  margin: 0;
  border-radius: 5px;
  font-size: 30px;
  font-weight: bolder
}
main p.td {
  font-size: 20px;
  font-weight: bold;
  border: 2px solid #d1dede;
  border-radius: 0px;
}
footer {
  position: fixed;
  display: flex;
  justify-content: flex-end;
  font-size: 80%;
  left: var(--padding05); bottom: var(--padding05);
  background-color: hsl(203.5deg 92% 75.5% /.95); /* lightskyblue */
}

1697926146321.png
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,818
Messages
2,569,727
Members
45,675
Latest member
benn

Latest Threads

Top