Hello everyone;
I`m working on creating a webpage with CSS, but when i click on the menu the first time it works fine, when i click on it again, it disappear. I tried it on both IE and Firefox, it did the same thing. I have the menu on the navigation part, i also have a container, as well as a footer. Thank you for your time.
Here is the code:
I`m working on creating a webpage with CSS, but when i click on the menu the first time it works fine, when i click on it again, it disappear. I tried it on both IE and Firefox, it did the same thing. I have the menu on the navigation part, i also have a container, as well as a footer. Thank you for your time.
Here is the code:
Code:
div.navigation
{
position: absolute;
width: 716px;
height: 100px;
margin-left: 10px;
margin-right: auto;
margin-top: 0px;
margin-bottom: auto;
background-color: #000000;
padding: 0px;
}
div.login
{
position: left;
width: 160px;
height: 73px;
margin-left:12px;
margin-right:12px;
margin-top: 6px;
margin-bottom: auto;
font-size: 8pt;
color: #FFFFFF;
background-color: red;
padding: 2px;
}
div.title
{
position: absolute;
text-align:center;
left:250px;
top:10px;
width: 320px;
height: 60px;
font-size: 8pt;
color: #FFFFFF;
background-color: #000000;
padding: auto;
}
div.links
{
position: absolute;
width:490px;
height: 15.5px;
left:226px;
top:82px;
color: #FFFFFF;
background-color: #FFFCCC;
padding: 0px;
}
td.links
{
width: 120.2px;
background-color: #FFFFFF;
color: black;
font-size: 12pt;
text-align: center;
}
td.links:hover
{
background-color: #666666;
color: white;
text-align: center;
width: 102.2px;
}
td.divider
{
width: 2px;
text-align: center;
background-color: #FFFFFF;
color: black;
}
div.container
{
position: absolute;
width: 700px;
height: 717px;
margin-left: 10px;
margin-right: auto;
margin-top: 0px;
margin-bottom: auto;
background-color: #FFFFFF;
padding: 8px;
}
div.news
{
position: absolute;
width: 300px;
height: 260px;
margin-left: 375px;
margin-right: 10px;
margin-top: 20px;
margin-bottom: auto;
border: 2px black;
padding: 8px;
background-color: lightblue;
font-family: Arial, sans-serif;
color: black;
font-size: 10pt;
}
div.toolbar
{
position: absolute;
width: 300px;
height: 25px;
margin-left: 28px;
margin-right: 375px;
margin-top: 430px;
margin-bottom: auto;
border: 2px black;
padding: 8px;
background-color: black;
font-family: Arial, sans-serif;
color: white;
font-size: 10pt;
}
div.contents
{
position: absolute;
float: left;
width: 300px;
height: 400px;
margin-left: 10px;
margin-right: 540px;
margin-top: 10px;
margin-bottom: auto;
padding: 8px;
background-color: lightblue;
font-family: Arial, sans-serif;
color: black;
font-size: 10pt;
}
div.department
{
position: absolute;
float: right;
width: 300px;
height: 150px;
margin-left: 375px;
margin-right: 10px;
margin-top: 305px;
margin-bottom: auto;
padding: 8px;
background-color: lightblue;
font-family: Arial, sans-serif;
color: black;
font-size: 10pt;
}
div.footer
{
width: 712px;
height: 15px;
margin-left: 10px;
margin-right: auto;
margin-top: 0;
margin-bottom: auto;
background-color: #000000;
padding: 2px;
font-size: 8pt;
text-align: center;
}
body
{
font-family: Tahoma;
background-color: #999966;
color: black;
margin-left: 130px;
margin-right: 50px;
margin-top: 0;
margin-bottom: 0;
}
h1
{
text-align: center;
font-family: Tahoma;
color: red;
font-size: 24pt;
}
h2
{
vertical-align: top;
text-align: center;
font-family: Tahoma;
color: darkblue;
font-size: 14pt;
}
p
{
font-family: Arial, sans-serif;
color: black;
font-size: 12pt;
}
a
{
font-family: Arial, sans-serif;
color: red;
}
//This is the Index
<HTML>
<HEAD>
<link rel="stylesheet" href="paragraph.css" type="text/css">
<title></title>
<!--StartFragment -->
<FRAMESET rows= "100,*,40" border="0" frameborder="0" framespacing="0">
<FRAME SRC="navigation.htm" name = "navigation" scrolling = "yes" marginwidth="0" marginheight="0">
<FRAME SRC="content.htm" name = "content" noresize = "noresize" scrolling = "yes" marginwidth="0" marginheight="0">
<FRAME SRC="footer.htm" name = "footer" noresize = "noresize" scrolling = "no" marginwidth="0" marginheight="0">
</FRAMESET>
</HEAD>
<BODY>
</BODY>
</HTML>
//This is the Navigation
<HTML>
<HEAD>
<link rel="stylesheet" href="paragraph.css" type="text/css">
<title></title>
</HEAD>
<BODY>
<div class= "navigation">
<div class = "login">
<img alt="machines (555K)" src="images/machines.gif" height="72" width="160" />
</div>
<div class="title">
<h1>Bobcat Safety</h1>
</div>
<div class="links">
<table border = "0" cellpadding="0" cellspacing = "0">
<tr>
<td class="links"><a href="index.html">Home</a></td><td class="divider">::</td>
<td class="links"><a href="form.htm">Forms</a></td><td class="divider">::</td>
<td class="links"><a href="manual.htm">Safety Manual</a></td><td class="divider">::</td>
<td class="links"> Links </td>
</tr>
</table>
</div>
</div>
</BODY>
</HTML>
//Content part
<HTML>
<HEAD>
<link rel="stylesheet" href="paragraph.css" type="text/css">
<title></title>
</HEAD>
<BODY>
<div class="container">
<div class = "contents">
<h2>Forms</h2>
<h4>Word Documents</h4>
<ul>
</ul>
<h4>Excel Spreadsheats</h4>
<ul>
</ul>
</div>
</div>
<div class = "toolbar">
<li><a href="forms2.htm">To see all the documents click here</a></li>
</div>
<div class = "news">
<h2>news</h2>
<marquee scrollamount="2" direction="up" loop="true" width="175px">
</marquee>
</div>
<div class = "toolbar">
<li><a href="forms2.htm">To see all the documents click here</a></li>
</div>
<div class = "department">
<h2>Videos</h2>
<ul>
</ul>
</div>
</div>
</BODY>
</HTML>