NadavWeissman
New Coder
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:
HomePage:
CSS:
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;
}
