Need help replacing Navigation Bar on HTML/CSS website.

D

devjohnson1

New Member
I'm not very good with this stuff, but could somebody help me replace this banner into my website, by replacing the current navigation bar. It would mean the WORLD to me, as I've tried and I can't seem to solve the problem.

Here are my website folders, which include my CSS and HTML codes I have so far!

WEBSITE (ONLINE): http://www.ohspress.com/bpa_lets_move/
MY WEBSITE CODE: http://www.mediafire.com/?5vewgwbe1h17lf5
BANNER I WANT INSTEAD: http://apycom.com/menus/8-white-smoke.html

This would be a HUGE help. My deadline is coming soon, and I need some help from experienced web designers! :) Thanks!

Here is my CSS Code:
@charset "utf-8";
/* CSS Document */
/* This sets the default font for the webpage as well as setting the background */
body {
font: 100%/1.4 Arial, Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
color: #000;
background-color:#e3c9a8;
}

.content img {
float:right;
padding:10px;
}

h2, h4, h5, p {
padding:0 10px 0 10px;
margin:0;
}
h3 {
padding:5px 10px 5px 10px;
}
h1 {
text-align:center;
}
/*removes the blue/purple border default from images */
a img {
border:none;
}
/* Creates an outline for all of the content */
#container {
width:960px;
margin: 0 auto;
}
/* Controls the container for the banner at the top of the page */
.banner {
background-color:#fff;
margin: 0px;
padding: 0px;
z-index:-1;
}
/* Centers each header */
.header {
text-align:center;
background-color:#fff;
width:960px;
}
/* Controls the container for the Navigation bar */
.navbar {
background-color:#e3c9a8;
width: 960px;
float: none;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
font-style: normal;
font-weight:bold;
}
/* This is the container for the all of the content */
.content {
background:#fff;
padding: 10px;
}
/* adjusts the footer */
.footer {
font-size:10px;
text-align:center;
background:#003263;
padding:5px 0px 0px 0px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

.footer table {
padding:0;
margin:0 auto;
}

.footer, .footer a {
color:#ddd;
}
#footerlinks {
width:auto;
}
td {
padding:0 15px;
}
.video {
float: right;
margin-top: 0px;
margin-right: 7px;
margin-bottom: 7px;
margin-left: 7px;
border: medium solid #003263;
}
/*social networking link*/
a#fb, a#fb:visited {
background: url(../img/fb.png) no-repeat;
height: 26px;
width: 26px;
position:absolute;
right:25%;
top:10px;
}
a#fb:hover {
background: url(../img/fb_hover.png)
}
a#tw, a#tw:visited {
background: url(../img/tw.png) no-repeat;
height: 26px;
width: 26px;
position:absolute;
right:22%;
top:10px;
}
a#tw:hover {
background: url(../img/tw_hover.png)
}
Click to expand...

And here is the CSS for the navigation bar (Which you will prob need):

@charset "utf-8";
/* CSS Document */
/* Main menu settings */
#menu {
clear:both;
float:left;
margin:0;
padding:0;
border-bottom:1px solid #003263; /* blue line below menu */
width:100%;
font-family:Verdana, Geneva, sans-serif; /* Menu font */
font-size:100%; /* Menu text size */
z-index:1000; /* This makes the dropdown menus appear above the page content below */
position:relative;
background-color:#e3c9a8;
}

/* Top menu items */
#menu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
width:960px;
}
#menu ul li {
margin:0;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
width:160px;
}
#menu ul li a {
display:block;
margin:0;
padding:.6em 1em .4em;
font-size:.8em;
line-height:1.5em;
background:#e3c9a8;
text-decoration:none;
color:#444;
font-weight:bold;
border:1px solid #003263;
text-align:center;
}
#menu ul li.active a {
color:#fff;
background:#003263;
}
#menu ul li a:hover {
background:#df1d36; /* Top menu items background colour */
color:#eee;
border-bottom:1px solid #df1d36;
}
#menu ul li:hover a,
#menu ul li.hover a { /* This line is required for IE 6 and below */
background:#df1d36; /* Top menu items background colour */
color:#eee;
border-bottom:1px solid #df1d36;
}

/* Submenu items */
#menu ul ul {
display:none; /* Sub menus are hiden by default */
position:absolute;
top:2em;
left:0;
right:auto; /*resets the right:50% on the parent ul */
width:10.1em; /* width of the drop-down menus */
}
#menu ul ul li {
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
width:100%;
}
#menu ul ul li a,
#menu ul li.active li a,
#menu ul li:hover ul li a,
#menu ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:.8em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#fff;
color:#444;
line-height:1.4em; /* overwrite line-height value from top menu */
border-bottom:1px solid #333; /* sub menu item horizontal lines */
border-left:1px solid #333;
border-right:1px solid #333;
}
#menu ul ul li a:hover,
#menu ul li.active ul li a:hover,
#menu ul li:hover ul li a:hover,
#menu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#df1d36; /* Sub menu items background colour */
color:#eee;
}

/* Flip the last submenu so it stays within the page */
#menu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}

/* Make the sub menus appear on hover */
#menu ul li:hover ul,
#menu ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}
.video-setup {
float: right;
margin: 0px 7px 7px 0px;
}
Click to expand...
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Where did you get stuck? confused? Was it with linking the javascript? setting up the css? I am hesitant to just build it for you, because you wont learn anything from that.
 
D

devjohnson1

New Member
PixelPusher said:
Where did you get stuck? confused? Was it with linking the javascript? setting up the css? I am hesitant to just build it for you, because you wont learn anything from that.
Click to expand...

I got stuck at putting in the CSS code. I'm not the best at CSS coding. I've been spending a lot of time trying to figure it out, until someone recommended to check out a forum to help me out. I am definitely willing to learn what you did. This would be a huge help if you helped me out, as I am on a deadline to finish this :)

I'm not taking the easy way out, but I am really stuck and I don't know where to turn. Hopefully you can help me out! It would mean so much!
 
Last edited:
You must log in or register to reply here.
Top