I need help fixing my website

Nadav Weissman · Oct 15, 2023

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;
}

VBService · Oct 21, 2023

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 */
}

Nadav Weissman · Oct 24, 2023

Thank you so much !You helped me alot and made my day!

Need help with code on website (noob)	2	Jul 18, 2022
Help with my responsive home page	2	Dec 14, 2022
Not sure why drop-down is not working.	2	Mar 24, 2024
Horizontal menu bar header	2	May 12, 2021
Need help fixing code	1	Mar 30, 2018
Dropdown menu in a fixed navbar	2	Apr 1, 2024
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Help needed with code	5	Mar 7, 2021

I need help fixing my website

Nadav Weissman

VBService

Nadav Weissman

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads