Grow your CSS skills. Land your dream job.

[Solved] Menu bar has disappeared

  • # March 10, 2010 at 4:34 pm

    Hi guys,

    I’m a complete beginner at CSS and web design in general and have encountered a problem! I am currently working on a template that I downloaded from the internet and have been making a couple of changes to the layout – mainly adding a picture to the header. However, I have somehow managed to make the menu bar disappear. I know that I haven’t deleted anything to do with the menu bar as I have only been making changes in the header section (logo and slogan, to be precise).

    Can anybody tell me where it has gone any why???

    My webpage is at http://www.blackboxnutrition.co.uk

    Code:
    #container {background-color:#FFFFFF; padding:10px;}

    #header {height:150px; background-color:#000000;}
    #logo {font-size:30px; background:url(images/dark_pixel2.jpg) no-repeat; background-position: center right; height:100px; padding:50px 0 0 30px;}
    #logo a {color:#FFFFFF; text-decoration:none;}
    #slogan {text-indent: 1.25em; float:left; font-size:24px; color:#FFFFFF; padding:60px 30px 0 0;}

    #menu {height:40px; background-image:url(images/menu_bg.png); margin-top:5px;}
    #menu ul {margin:0; padding:0;}
    #menu li {list-style:none; float:left; background:url(images/menu_border.png) right no-repeat;}
    #menu a {float:left; height:20px; padding:10px 30px; color:#FFFFFF; font-size:15px; font-weight:bold; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
    #menu a:hover {background:url(images/menu_border.png);}

    Thanks in advance

    # March 11, 2010 at 5:00 am

    I couldn’t connect to your site.

    # March 12, 2010 at 3:18 am

    Sorry, what a dope! http://www.blackbox-nutrition.co.uk

    # March 12, 2010 at 3:27 am

    You’ve made the colour of your text the same colour as the background (White)

    Code:
    #menu a {
    color:#FFFFFF;
    float:left;
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    font-weight:bold;
    height:20px;
    padding:10px 30px;
    text-decoration:none;
    }

    Change color to #000 (black)

    # March 12, 2010 at 3:52 am

    Ah, schoolboy error!!!

    As it turns out, on closer inspection, I hadn’t uploaded all the images from the template folder (another schoolboy error!). Sorted now.

    Thanks for the help though, I’ll be able to spot simple things like that a bit easier from now on!

    Cheers!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".