Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
1
Note: This is my second year on Robotics and working on the website and I know a lot more and have more experience with website than I did last year.
Hawk Collective - Home
My temporary issues are as follows:
Drop down menu (with sub-menus) and buttons for it
Keeping everything cross-browser compatible (so far so good).
I tried following (while keeping it original) the code layout from this site for the drop down menus:
VULPINE STUDIOS: Home Page
I use Firefox, IE8, Opera, and Safari when I check my sites. I know there are hundreds of other browsers, but I don't know how to find them.
Here is the HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> <title>Hawk Collective - Home</title> </head> <body> <div id="container"> <table id="center"> <tr> <td> <img src="images/hawk_collective_banner.jpeg" /> </td> </tr> <tr> <td> <div class="menu"> <ul> <li> <a href="index.php">Home</a> <ul> <li><a href="http://www.google.com/">Google</a></li> <li><a href="http://www.hawkrobotics.com/">Hawk Collective</a></li> </ul> <li> </ul> <a href="#.php">About Us</a> <a href="#.php">The Team</a> <a href="#.php">Contact</a> </div> </td> </tr> </table> </div> </body> </html>Here is the CSS:
/* Body Properties */
body
{
margin:0; /* Sets the margins for the entire site */
padding:0; /* Sets the padding for the entire site */
background-image:url(../images/background.jpeg); /* Image is used as a background */
background-repeat:no-repeat; /* Sets the background so it does not repeat itself */
text-align:center; /* Centers the container for IE 5* browsers. */
}
/* End Body Properties */
/* Container Properties */
#container
{
text-align:left; /* This overrides the "text-align:center" on the body properties */
}
/* End Container Properties */
/* Link Properties */
a:link,
a:visited
{
color:#ffffff; /* Sets the link color to white before and after it is clicked on */
text-decoration:none; /* Sets it so the links don't have underlines or other decorations */
}
a:hover
{
color:#000000; /* Sets the link color to black while the mouse pointer is hovering over the link */
text-decoration:underline; /* Sets it so the links are underlined while the mouse pointer is hovering over the link */
}
a:active
{
color:green;
text-decoration:none; /* Sets it so the links don't have underlines or other decorations */
}
/* End Link Properties*/
/* Table Properties */
table, tr , td
{
margin:0; /* Sets the table margins to 0 */
padding:0; /* Sets the padding to 0 */
border:1px solid white; /* Sets the table border to 1 pixel around with a solid white border color */
border-collapse:collapse; /* Sets the table so it doesn't have double borders in or around the table */
width:800px; /* Sets the table width to 800 pixels */
}
table#center
{
margin-left:auto; /* Sets the left margin of the table to auto so it is centered */
margin-right:auto; /* Sets the right margin of the table to auto so it is centered */
}
td.bg_color
{
background-color:#1b7a42; /*Sets the table cell color to a light green */
}
/* End Table Properties */
/* Drop Down Menu */
.menu
{
margin:0; /* Sets the margin to 0 */
padding:0; /* Sets the padding to 0 */
text-align:center; /* Centers the text */
font-size:12px; /* Sets the font size of the text to 12 pixels */
font-family:"Times New Roman", Times, Verdana, Arial, Georgia, Sans-serif; /* Sets the font to "Times New Roman" otherwise it goes on to the next font */
color:#ffffff; /* Sets the link color to white */
background-image:url(../images/nav_bar.png); /* Sets the image as the background */
}
.menu ul
{
margin:0; /* Sets the margin to 0 */
padding:0; /* Sets the padding to 0 */
text-align:center; /* Centers the text */
color:#ffffff; /* Sets the link color to white */
}
.menu li
{
margin:0; /* Sets the margin to 0 */
padding:0; /* Sets the padding to 0 */
text-align:center; /* Centers the text */
float:left; /* Sets the menu to float on the left */
display:block; /* Sets the block to be clickable */
cursor:pointer; /* Sets the cursor to the pointer */
z-index:100;
}
.menu li ul
{
margin:0; /* Sets the margin to 0 */
padding:0; /* Sets the padding to 0 */
text-align:center; /* Centers the text */
display:none; /* Sets no display */
position:absolute;
}
.menu li ul li
{
margin:0; /* Sets the margin to 0 */
padding:0; /* Sets the padding to 0 */
text-align:center; /* Centers the text */
float:none; /* No float aspect */
display:none; /* Sets no display */
position:absolute;
}
.menu li ul li:hover
{
margin:0; /* Sets the margin to 0 */
padding:0; /* Sets the padding to 0 */
border:1px solid white; /* Sets the border to 1 pixel around with a solid white border color */
color:#ffffff; /* Sets the link color to white */
}
.menu li ul li a:link
{
color:#ffffff;
text-decoration:none;
}
.menu li ul li a:visited
{
color:#ffffff;
text-decoration:none;
}
.menu li ul li a:hover
{
color:gray;
text-decoration:underline;
background-color:#ffffff;
}
.menu li:hover ul
{
display:block; /* Sets the block to be clickable */
color:#ffffff; /* Sets the link color to white */
}
/* End Drop Down Menu */
Back to top
