Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Dec 2011
    Posts
    4
    Member #
    30206
    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://13styles.com/css-menus/matte/

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


  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Devjohnson, post: 226854
    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!

    MY WEBSITE CODE: http://www.mediafire.com/?5vewgwbe1h17lf5
    BANNER I WANT INSTEAD: http://13styles.com/css-menus/matte/

    This would be a HUGE help. My deadline is coming soon, and I need some help from experienced web designers! Thanks!
    I'm wiling to help, and if you can post a link to the site I'll look at the code, but I won't download a file from someone I don'y know. Sorry.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Junior Member
    Join Date
    Dec 2011
    Posts
    4
    Member #
    30206
    Just uploaded the site for you!

    http://www.ohspress.com/bpa_lets_move/

    Here is my CSS Code:

    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)
    }
    And here is my CSS code for the navigation menu, which is probably what you will need

    Code:
    @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;
    }
    By the way, if you know of a free drop down CSS menu, that would be awesome! I didn't notice the one I picked out didn't have a drop down! I'll try to find one!

  5. #4
    Junior Member
    Join Date
    Dec 2011
    Posts
    4
    Member #
    30206
    Found one Anything similar would be awesome! http://apycom.com/menus/8-white-smoke.html

  6. #5
    Junior Member
    Join Date
    Dec 2011
    Posts
    4
    Member #
    30206
    Nevermind Fixed it!

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Sorry - I've been away. Glad you got it fixed - how'd you do it?
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Quote Originally Posted by Devjohnson, post: 226954
    Nevermind Fixed it!
    If you could explain how you fixed it, it would help others that are browsing the forums. Thank you

    -M3
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:42 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com